skip to Main Content

On my pages it repeats short content like image licenses, or other things. The convenience would also be to be able to edit them all at the same time by typing just one. I know it’s against SEO, but I don’t really care about search engine penalties.
I can’t get this javascript to work. And yet I think I wrote it right.

<script type='text/javascript'>
//<![CDATA[
  var x = document.getElementById("license").document.querySelectorAll("#license");
  var i;
  var text = "Hello world";
    for (i = 0; i < x.length; i++){
     x[i].innerHTML = text; 
  }
//]]> 
</script>

4

Answers


  1. Try this, but dont use more than one ID. Some codes can work but generally its a bad idea, better to use classes for things like this.

    var mytxt='lalal';
    
    document.querySelectorAll(".test,#blah").forEach(function(elem){
      elem.value=mytxt;
    });
    <input type='text' class='test' readonly>
    <input type='text' class='test' readonly>
    <input type='text' class='test' readonly>
    
    <input id='blah' type='text' readonly>
    <input id='blah' type='text' readonly>
    <input id='blah' type='text' readonly>
    Login or Signup to reply.
  2. If I understand your requirement correctly, then the following should achieve it.

    let something = document.getElementsByClassName('something');
    let button = document.getElementById('button');
    
    // Convert to actual array
    something = Array.from(something);
    
    const update = (val) => {
      something.forEach(item => {
        item.innerHTML = val
      })
    }
    
    button.addEventListener('click', () => update('Updated everything'))
    <div class="something">SOMETHINGGGGG</div>
    <div class="something">SOMETHINGGGGG</div>
    <div class="something">SOMETHINGGGGG</div>
    <div class="something">SOMETHINGGGGG</div>
    <div class="something">SOMETHINGGGGG</div>
    <div class="something">SOMETHINGGGGG</div>
    <div class="something">SOMETHINGGGGG</div>
    <div class="something">SOMETHINGGGGG</div>
    <div class="something">SOMETHINGGGGG</div>
    <div class="something">SOMETHINGGGGG</div>
    <div class="something">SOMETHINGGGGG</div>
    <div class="something">SOMETHINGGGGG</div>
    <div class="something">SOMETHINGGGGG</div>
    <div class="something">SOMETHINGGGGG</div>
    
    <button id='button'>UPDATE</button>
    Login or Signup to reply.
  3. First of all querySelectorAll selects one or more elements and returns it as a list of elements.

    You are selecting elements by id with this ("#license") so it returns only the first element with id="license".

    To get a list of elements you should select them by class or name like this,

    By class document.querySelectorAll(".license")

    By name document.querySelectorAll("[name="license"]")

    I recommend you to read more about Document.querySelectorAll()

    Login or Signup to reply.
  4. In your HTML, you should use unique IDs or use classes if you want them to have a common name. Also while chaining selectors, you don’t have to write document after getting the first selector. I don’t know your HTML, but it is highly possible that it will throw an error.

    document.getElementById("licenses").querySelectorAll(".license");
    

    Above would be the case for

      <div id="licenses">
        <div class="license"></div>
        <div class="license"></div>
        <div class="license"></div>
      </div>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search