CODEWITHSUNDEEP
javascripthtml
HK0
HK0

Reputation: 13

change all elements with a certain class based on text input

I think this is going to be something very simple but I haven't found an answer. How would I make all span elements with class="namehere" display what was inserted in input text?

function start() {
  var name = document.getElementById("name").value;
  document.getElementByClassName("namehere").innerHTML = name;
}
<input id="name" type="text" value="Type name here">
<button type="button" onclick="start()">start</button>
<br>
<br>
<span class="namehere"></span> is doing this and that.
<br>
<span class="namehere"></span> wants to do this and that.
<br>
<span class="namehere"></span> is not doing this or that.
<br>
<span class="namehere"></span> wants to do this but instead is doing that.

Upvotes: 1

Views: 80

Answers (4)

youhanna
youhanna

Reputation: 1

hello HK0 as far as I can remember the document.getElementByClassName can not reach the innerHTML (or at least not directly) so I suggest an easier approach of the matter by using a simple for method and getting the elementbyid like te following:

 <span id="namehere0"></span> is doing this and that.
 <br>
 <span id="namehere1"></span> wants to do this and that.
 <br>
 <span id="namehere2"></span> is not doing this or that.
 <br>
 <span id="namehere3"></span> wants to do this but instead is doing that.

 <script>
 function start(){
  var name = document.getElementById("name").value;
  for(var i=0;i<4;i++) document.getElementById("namehere"+i).innerHTML=name;

  }
        </script>

hope this helps

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 241078

The method getElementsByClassName() returns an array-like object of elements.

You need to iterate over each element and access it by its index.

Working Example

var nameElements = document.getElementsByClassName('namehere');
for (var i = 0; i < nameElements.length; i++) {
    nameElements[i].textContent = document.getElementById('name').value;
}

or:

var nameElements = document.getElementsByClassName('namehere');
Array.prototype.forEach.call(nameElements, function (el) {
    el.textContent = document.getElementById('name').value;
});

Upvotes: 5

David Rissato Cruz
David Rissato Cruz

Reputation: 3657

Take a look in jQuery, it will help you a lot with this kind of solution.

You need to include <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> in your header and change your code to that:

<!DOCTYPE html>
<html>
  <head>
   <title>test</title>
   <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  </head>
  <body>
    <input id="name" type="text" value="Type name here">
    <button type="button" onclick="start()">start</button>
    <br>
    <br>
    <span class="namehere"></span> is doing this and that.
    <br>
    <span class="namehere"></span> wants to do this and that.
    <br>
    <span class="namehere"></span> is not doing this or that.
    <br>
    <span class="namehere"></span> wants to do this but instead is doing that.
    <script>
     function start(){
         var name = $("#name").val();
          $(".namehere").text(name);
     }
    </script>
  </body>
</html>

Upvotes: 0

BlackCetha
BlackCetha

Reputation: 2061

You can get an array of elements with a certain class name with document.getElementsByClassName(name) just as you did, so thats fine.

It returns an array tho, so you actually will have to loop through that.

Upvotes: 1

Related Questions