0

I have a website where when you click on a button, the text inside the button changes to a random string from an array I made. That works fine, but when I try to make that button change the text inside multiple different spans, the function stops working altogether. 

let exampleList = ['Shelf', 'Book', 'Political Idealogy', 'Laptop', 'Smartphone', 'Printer', 'Bicycle', 'Backpack'];

function newExample() {
  let randomNumber = Math.floor(Math.random() * (exampleList.length));
  document.getElementById('changeText').innerHTML = exampleList[randomNumber];
}
<h2>Find Your New
  <button class="examples" onclick="newExample()"><span id="changeText">______</span></button>
</h2>

<p>
  What you need is a <span id="changeText">______</span> or <button class="examples" onclick="newExample()"><span id="changeText">______</span></button>!

Now I know you can't use an ID more than once, but there's no other way that works. I've tried getElementbyClassName, querySelectorAll and none of them worked.

Just to clarify, I want what appears in the button to appear in every span that I set the class = 'changeText'.

I hope someone can point me to where I went wrong.

Sidhant Mathur
  • 47
  • 1
  • 7
  • 1
    getElementbyClassName or querySelectorAll are exactly what you need. What went wrong? – SLaks Feb 26 '18 at 18:20
  • 2
    `getElementbyClassName` should be `getElementsByClassName`, and I assure you that it and `querySelectorAll` work beautifully. –  Feb 26 '18 at 18:21
  • Add the js code you used for getElementsbyClassName and/or querySelectorAll – Huangism Feb 26 '18 at 18:21
  • 1
    You probably tried to apply the `.innerHTML` to the collecion instead of each element. –  Feb 26 '18 at 18:22
  • keep in mind that `getElementsByClassName` and `querySelectorAll` will return a collection (an array) of elements – messerbill Feb 26 '18 at 18:22
  • I simply changed the button HTML from an id of changeText to a class of changeText, and the Javascript from getElementbyID to getElementsbyClassName. That didn't work, and I tried a number of things with querySelectorAll that I don't remember now. – Sidhant Mathur Feb 26 '18 at 18:26

1 Answers1

1

Give all the elements that need updating a common class name. Then, use querySelectorAll() to find them all. Put them into an array and then loop over the array items to populate them.

A couple of other items:

You don't actually need nested span elements within the buttons, just give the buttons the same class name as other elements that need their text updated.

Don't use inline HTML event handling attributes (onclick, etc.) as that technique is 25+ years old and has many reasons to avoid it. Instead, follow modern standards and do all your event binding in JavaScript.

Also, only use .innerHTML when you are getting/setting strings that contain HTML content. When the strings don't have HTML in them, use .textContent.

let exampleList = ['Shelf', 'Book', 'Political Idealogy', 'Laptop', 'Smartphone', 'Printer', 'Bicycle', 'Backpack'];

// Get references to the buttons
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");

// Set up their event handlers
btn1.addEventListener("click", newExample);
btn2.addEventListener("click", newExample);

// Get all the elements that need updating into an array
var elementsToUpdate = Array.prototype.slice.call(document.querySelectorAll('.changeText'));

function newExample() {
  let randomNumber = Math.floor(Math.random() * (exampleList.length));
  // Loop over the spans
  elementsToUpdate .forEach(function(element){
   element.textContent = exampleList[randomNumber];
  });
}
<h2>Find Your New
  <button id="btn1" class="changeText">______</button>
</h2>

<p>
  What you need is a <span class="changeText">______</span> or <button id="btn2"  class="changeText">______</button>!
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71