javascript dynamically changing content of a web page with nested for loops

Question

simply put i want to change all the values in headings to 't' when a button is pressed so i have the following code there are no errors
what i expect to happen is for all headings to change their content to 't'

window.onload = function () {
  let specialButton = document.getElementById('mainButton')

  specialButton.addEventListener('click', removeHeadings())

  function removeHeadings () {
    for (var j = 1, length = 7; j < length; j++) {
      let headings = document.getElementsByName('h' + j)
      for (var i = 0, len = headings.length; i < len; i++) {
        headings[i].innerHTML = 't '
      }
    }
  }
}

<h1>s</h1>
<h2>s</h2>
<h3>s</h3>
<button id="mainButton">Remove Headings</button>

also please tell me why the above does not work

You want getElementsByTagName

Robin Zigmond
– Robin Zigmond

2018-11-10 18:56:53 +00:00
Commented Nov 10, 2018 at 18:56 — Robin Zigmond
– Robin Zigmond, Commented Nov 10, 2018 at 18:56

Callam · Accepted Answer · 2018-11-10 18:57:11Z

2

Firstly, you are executing the removeHeadings function and passing it as the argument for the event listener. Secondly, you are trying to get elements by name when you mean to get them by their tag name – to do this use getElementsByTagName.

window.onload = function () {
  let specialButton = document.getElementById('mainButton')

  specialButton.addEventListener('click', removeHeadings)

  function removeHeadings () {
    for (var j = 1, length = 7; j < length; j++) {
      let headings = document.getElementsByTagName('h' + j)
      for (var i = 0, len = headings.length; i < len; i++) {
        headings[i].innerHTML = 't '
      }
    }
  }
}

<h1>s</h1>
<h2>s</h2>
<h3>s</h3>
<button id="mainButton">Remove Headings</button>

answered Nov 10, 2018 at 18:57

Callam

11.5k2 gold badges36 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

TheLinuxPro Over a year ago

whats the difference between getElementsByTagName and getElementsByName

TheLinuxPro Over a year ago

Firstly, you are executing the removeHeadings function and passing it as the argument for the event listener. can you please clarify more

Ele Over a year ago

@TheLinuxPro The first one finds by Html TAGs and the second by the attribute name of elements.

TheLinuxPro Over a year ago

whats the difference between an html TAG and a name of an element isn't the name of the html element its tag

Ele · Accepted Answer · 2018-11-10 19:15:40Z

1

You're suddenly calling the function removeHeadings(), you need to pass the function and not the result of calling it.

specialButton.addEventListener('click', removeHeadings()); // Remove the parentheses
                                                      ^^

Further, you need to use the function getElementsByTagName.

let headings = document.getElementsByName('h' + j)
                        ^^^^^^^^^^^^^^^^^^^^

The function getElementsByName finds elements by the attribute name in elements. for Example:

<input type='button' name='myButton'>
                     ^^^^

The function getElementsByTagName finds elements by the HTML tag, in your case the H tags, for example:

<input type='button' name='myButton'>
 ^^^^^

edited Nov 10, 2018 at 19:15

answered Nov 10, 2018 at 18:57

Ele

33.8k7 gold badges43 silver badges80 bronze badges

3 Comments

TheLinuxPro Over a year ago

i am having difficulty understanding what you just said can you elaborate further

TheLinuxPro Over a year ago

i know i am bombarding you with questions but what do the parenthesis do whats the difference isn't the end result the same

Ele Over a year ago

@TheLinuxPro no, because you're calling the function and not passing it as a handler instead. What you're actually doing is passing undefined which is the result of calling removeHeadings.

Srinivasu Kotla · Accepted Answer · 2018-11-10 19:16:30Z

0

By Using jQuery you can do this like.

HTML

<h1>S</h1>
<h2>S</h2>
<h3>S</h3>
<h4>S</h4>
<h5>S</h5>
<h6>S</h6>
<button id="change">CHANGE</button>

jQuery

$("#change").click(function change() {
    console.log("CLICKED");
    $("h1, h2, h3, h4, h5, h6").html("T");
});

JsFiddle Live Example

answered Nov 10, 2018 at 19:16

Srinivasu Kotla

1043 bronze badges

1 Comment

TheLinuxPro Over a year ago

isn't jquery redundant with most of the features of newer versions of javascript integrating jquery in?

Collectives™ on Stack Overflow

javascript dynamically changing content of a web page with nested for loops

3 Answers 3

4 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related