JavaScript Button Text innerHTML not Changing when Clicked

Question

I'm relatively new to javascript and am trying to find out why the text content of an element isn't changing when it should. I just want the text content of the '+' to change when clicking the 'click me' button.

The element should change. Why doesn't it work here? A detailed explanation would be very helpful after reading a related post. Thanks for any help.

function change() {
var btnToChange = document.getElementsByClassName("testBtn");

btnToChange.innerHTML = "it changed!";
}

<button class="testBtn">+</button>
<button class="testBtn2" onclick="change()">Click to Change</button>

getElementsByClassName returns an array collection for matching class name from DOM. so in this case use getElementsByClassName('testBtn')[0] — Shiv Kumar Baghel
– Shiv Kumar Baghel, Commented Sep 4, 2018 at 10:53

Ankit Agarwal · Accepted Answer · 2018-09-04 10:49:27Z

5

You need to do document.getElementsByClassName("testBtn")[0]; because document.getElementsByClassName will return you the array of elements that match the class, although there is a single element in the DOM. Since you have one element use [0].

function change() {
  var btnToChange = document.getElementsByClassName("testBtn")[0];

  btnToChange.innerHTML = "it changed!";
}

<button class="testBtn">+</button>
<button class="testBtn2" onclick="change()">Click to Change</button>

answered Sep 4, 2018 at 10:49

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

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

2 Comments

Ankit Agarwal Over a year ago

@user8758206 glad to help.

Domenik Reitzner Over a year ago

Could also be done by document.querySelector('.testBtn') or document.querySelectorAll('.testBtn')[0] for the first element.

Mazhar Ali · Accepted Answer · 2018-09-04 10:54:40Z

1

document.getElementsByClassName("name") gives you an array, the first element of that array is your element. You need to do document.getElementByClassName[0] to get to the element. Try using document.querySelector instead. Also , you can go to the web console to see whats happening to your code.

answered Sep 4, 2018 at 10:54

Mazhar Ali

3521 gold badge3 silver badges13 bronze badges

Comments

Văn Quyết · Accepted Answer · 2018-09-04 10:58:40Z

1

You can use querySelector:

function change() {
    var btnToChange = document.querySelector(".testBtn");
    btnToChange.innerHTML = "it changed!";
}

Or with getElementsByClassName:

function change() {
    var btnToChange = document.getElementsByClassName("testBtn")[0];
    btnToChange.innerHTML = "it changed!";
}

Note that querySelector and querySelectorAll are the methods of document and all elements, but getElementsByClassName is only of document.

answered Sep 4, 2018 at 10:58

Văn Quyết

2,5481 gold badge16 silver badges30 bronze badges

Comments

Chandru · Accepted Answer · 2018-09-04 11:11:47Z

1

document.getElementsByClassName returns an array-like object of all DOM elements. You can use document.querySelector or document.getElementsByClassName()[0] to get the first element.

function change() {
  var btnToChange = document.querySelector(".testBtn");
  btnToChange.textContent= "it changed!";
}

answered Sep 4, 2018 at 11:11

Chandru

1095 bronze badges

Collectives™ on Stack Overflow

JavaScript Button Text innerHTML not Changing when Clicked

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related