How to render text within a randomly selected div onscreen using Javascript? - Jquery

SarahChekfa
March 26, 2023
139 views
1 vote
2 Answers

I’m new to Javascript, so sorry if I’m referring to things incorrectly! I have the following script when a button is clicked, randomly cycles through a list of ideas and lands on one. Here is a video showing how it works:https://streamable.com/rsojyu

I want to make it so that when the script lands on the selected idea, the idea (i.e. the text—A website…etc", renders in the left sidebar. And I want it to be "sticky" as in, when I click the button to come up with a new idea, I want the newly selected idea to render in a new line below the previously selected idea.

Right now, there is something wrong with my script. I’m not sure how to render the text within the particular idea div the script lands on. While the script does render an idea in the sidebar, it is always the first idea within the list, and the ideas do not stack—it seems to be frozen(i.e. when I click the button to run the script again, the new idea does not render below the previous one.)

Does anyone know how I might be able to fix this?

function getIdea() {

  var numElements = $('.idea').length;
  // var verse = $('.idea'.isolate);
  var randomNum = Math.floor(Math.random() * numElements);
  $("button").prop("disabled", true);

  var t = 0;
  var repeat = setInterval(function() {
    randomNum = Math.floor(Math.random() * numElements);
    $('.idea').css("background", "none");
    $('.idea:nth-child(' + randomNum + ')').css("background", "skyblue");
    t += 1;

    if (t == 5) {
      clearInterval(repeat)
      $("button").prop("disabled", false);
      var text = document.getElementById("isolate").textContent;
      document.getElementById("hellomessage").innerHTML = text;

    }
  }, 300);

}

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<!-- Body -->
<div id="ideas">
  <div class="idea" id="isolate">A website where you can make a wish</div>
  <div class="idea" id="isolate">A website that you can rewrite</div>
  <div class="idea" id="isolate">A website that feels analog</div>
  <div class="idea" id="isolate">A website where you perform a ritual</div>
  <div class="idea" id="isolate">A website that is a single image</div>
  <div class="idea" id="isolate">A website with no concept</div>
  <div class="idea" id="isolate">A website that feels illegal</div>
  <div class="idea" id="isolate">A website that hosts banned materials</div>
  <div class="idea" id="isolate">A website playing you music from a boombox</div>
  <div class="idea" id="isolate">A website that's only a concept</div>
  <div class="idea" id="isolate">A website that feels like a B movie</div>
  <div class="idea" id="isolate">A website that keeps growing</div>
  <div class="idea" id="isolate">A website that keeps freezing</div>
  <div class="idea" id="isolate">A website with a timer</div>
  <div class="idea" id="isolate">A website that's running out of time</div>
  <div class="idea" id="isolate">A website with a traffic jam</div>
  <div class="idea" id="isolate">A website that feels like a walkable city</div>
  <div class="idea" id="isolate">A website that other people are walking over</div>
  <div class="idea" id="isolate">A website that loops</div>
  <div class="idea" id="isolate">A website that forgets you</div>
  <div class="idea" id="isolate">A website about your last dream</div>
  <div class="idea" id="isolate">A website wishlist</div>
  <div class="idea" id="isolate">A website with links to other websites</div>
  <div class="idea" id="isolate">A website to distract you for three minutes</div>
  <div class="idea" id="isolate">A website with your personal announcements</div>
  <div class="idea" id="isolate">A website that you need to make smaller</div>
  <div class="idea" id="isolate">A website wikipedia</div>
  <div class="idea" id="isolate">A website that's a platformer</div>
  <div class="idea" id="isolate">A website that you need to highlight to read</div>
  <div class="idea" id="isolate">A website that feels like a campfire</div>
  <div class="idea" id="isolate">A website that you can adjust the temperature of</div>
  <div class="idea" id="isolate">A website where you can smell the zaza</div>
  <div class="idea" id="isolate">A website that's a screensaver</div>
</div>

Answers

document.getElementById("hellomessage").innerHTML = text;

will replace the message in hellomessage id’d element everytime getIdea() is called, you should give the below a try

document.getElementById('hellomessage').insertAdjacentHTML('beforeend', html_of_idea);

You always get the first answer because the below line returns the first element with the id of isolate, which is your first answer.

 var text = document.getElementById("isolate").textContent;

Also, the HTML id attribute is a globally unique identifier. As such, you should not use the same id twice.

Update: (Please note that this is not ideal in my opinion but it works):

function getIdea() {

var numElements = $('.idea').length;
// var verse = $('.idea'.isolate);
var randomNum = Math.floor(Math.random() * numElements);
$("button").prop("disabled", true);

var t = 0;
var repeat = setInterval(function() {
  randomNum = Math.floor(Math.random() * numElements);
  $('.idea').css("background", "none");
  $('.idea:nth-child(' + randomNum + ')').css("background", "skyblue");
  t += 1;

  if (t == 5) {

    clearInterval(repeat)
    $("button").prop("disabled", false);
    var text = document.getElementById("isolate").textContent;

    let element = $('.idea').get(randomNum  - 1);

    document.getElementById('hellomessage').insertAdjacentHTML('beforeend', element.innerHTML);

  }
}, 300);

}

Since you appear to be new to programming I will give you a more detailed answer.

If possible you should use the correct semantic tags for accessibility and SEO reasons. The ideas is in fact a list of ideas and as such you should use a list such as ul. You can hide the list style in CSS by using list-style: none.

You need 2 buttons. A button to randomly select an idea and a button to copy that idea to the other list at the top. However, you can not copy an idea if you never selected an idea before. That’s why you need to hide the add button and show it once an idea is selected. You can do that by giving the add button a class that will hide it. Then use classList.remove in JS to remove that class.
You need to select a random idea. Since I already sued a semantically correct list, every idea must be a list item. I can select in JS every idea by using querySelectorAll and selecting there every li that is a child of the element with the id #ideas => querySelectorAll('#ideas > li'). Then I use the random number function and pick a random element from that list but need to add a +1 to it as it starts counting at 0.
I then simply add a class with classList.add() to that randomly selected element. Here again I can make use of querySelector that allows me to select the elements the same way as in CSS. In my case I combined that with the usage of :nth-child().
I can copy or clone the entire node with the cloneNode() method and then insert it into another list by using the appendChild() function

let selectedIdea;

document.querySelector('#random').addEventListener('click', function() {
  let ideas = document.querySelectorAll('#ideas > li');

  // removes the highlight from all elements
  ideas.forEach(el => el.classList.remove('highlight'));

  // randomly select a random element
  let randomIdea = Math.floor(Math.random() * ideas.length) + 1;

  // highlight that idea
  selectedIdea = document.querySelector(`#ideas > li:nth-child(${randomIdea})`);
  selectedIdea.classList.add('highlight');

  // makes the add button visible
  document.querySelector('#add').classList.remove('d-none');
})


document.querySelector('#add').addEventListener('click', function() {
  // clones the selected Node
  let clone = selectedIdea.cloneNode(true);

  // adds the clone to new list
  document.querySelector('#helloMessages').appendChild(clone);
})

.d-none {
  display: none;
}

#ideas .highlight {
  background-color: skyblue;
}

<ol id="helloMessages"></ol>

<div>
  <button id="random">Randomly Select an idea</button>
  <button id="add" class="d-none">Add the idea to the list</button>
</div>

<ul id="ideas">
  <li>A website where you can make a wish</li>
  <li>A website that you can rewrite</li>
  <li>A website that feels analog</li>
  <li>A website where you perform a ritual</li>
  <li>A website that is a single image</li>
  <li>A website with no concept</li>
  <li>A website that feels illegal</li>
  <li>A website that hosts banned materials</li>
  <li>A website playing you music from a boombox</li>
  <li>A website that's only a concept</li>
  <li>A website that feels like a B movie</li>
  <li>A website that keeps growing</li>
  <li>A website that keeps freezing</li>
  <li>A website with a timer</li>
  <li>A website that's running out of time</li>
  <li>A website with a traffic jam</li>
  <li>A website that feels like a walkable city</li>
  <li>A website that other people are walking over</li>
  <li>A website that loops</li>
  <li>A website that forgets you</li>
  <li>A website about your last dream</li>
  <li>A website wishlist</li>
  <li>A website with links to other websites</li>
  <li>A website to distract you for three minutes</li>
  <li>A website with your personal announcements</li>
  <li>A website that you need to make smaller</li>
  <li>A website wikipedia</li>
  <li>A website that's a platformer</li>
  <li>A website that you need to highlight to read</li>
  <li>A website that feels like a campfire</li>
  <li>A website that you can adjust the temperature of</li>
  <li>A website where you can smell the zaza</li>
  <li>A website that's a screensaver</li>
</ul>

Please signup or login to give your own answer.

Click here to cancel reply.

How to render text within a randomly selected div onscreen using Javascript? – Jquery

Answers