Button to change color of

Question

I am trying to make an interactive periodic table of elements. I need to change the background color of more <td> with the classname "nemetale" when a button is clicked. It's not working, I don't know what I am doing wrong.

There is the button

 <button onclick="document.getElementsByClassName('.nemetale').style.backgroundColor = 'red';">Nemetale</button>

There is one of the <td>s.

<table class="tabel_periodic">
  <!--Randul 1-->
  <tr>

   <td class="nemetale">
    <strong>1</strong><br>
    <acronym>H</acronym><br>
    <em>Hidrogen</em><br>
    <i>1,008</i>
   </td>
 ...

The method is called `getElementsByClassName`, with a capital "N" for "Name" — Federico klez Culloca, Dec 05 '17 at 16:19
This is both off-topic due to a typo and a duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return?](https://stackoverflow.com/q/10693845/4642212). Use the [browser console (dev tools)](https://webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. — Sebastian Simon, Dec 05 '17 at 16:22
@CristianMaranca also consider that `getElementsByClassName` returns an array-like object, so you have to iterate the result, not simply set its `style`. — Federico klez Culloca, Dec 05 '17 at 16:23
Use the console and the typo would be quickly revealed (F12 in Chrome): Uncaught TypeError: document.getElementsByClassmame is not a function at HTMLButtonElement.onclick (test2.htm:2) — Matt_S, Dec 05 '17 at 16:23
@CristianMaranca - thanks for marking my answer as correct. Could you also please up-vote? — Daniel Apt, Dec 06 '17 at 13:17

score 2 · Answer 1 · edited May 30 '18 at 17:08

Working fiddle.

getElementsByClassName() : Returns an array-like object of all child elements which have all of the given class names.

The function .getElementsByClassmame() doesn't exist you should use .getElementsByClassName().

Since the .getElementsByClassName() return a list of elements you should return the first element instead using [0] like :

document.getElementsByClassName('nemetale')[0].style.backgroundColor  = 'red';

var trs = document.getElementsByClassName('nemetale');

document.getElementById('change_color').addEventListener('click', function() {
  for (var i = 0; i < trs.length; i++) {
    changeColor(trs[i]);
  }
});

function changeColor(tr) {
  tr.style.backgroundColor = 'red';
}

<button id="change_color">Nemetale</button>

<table class="tabel_periodic">
  <tr>
    <td class="nemetale">
      <strong>1</strong><br>
      <acronym>H</acronym><br>
      <em>Hidrogen</em><br>
      <i>1,008</i>
    </td>
  </tr>
  <tr>
    <td class="nemetale">
      <strong>2</strong><br>
      <acronym>H</acronym><br>
      <em>Hidrogen</em><br>
      <i>2,008</i>
    </td>
  </tr>
  <tr>
    <td class="nemetale">
      <strong>3</strong><br>
      <acronym>H</acronym><br>
      <em>Hidrogen</em><br>
      <i>3,008</i>
    </td>
  </tr>
</table>

I used it like that, it works, it changes the color of the first element, but i want to change the color of all the elements in this class. — Cristian Maranca, Dec 05 '17 at 16:25
@CristianMaranca - You will have to loop through the collection. You can see how to do this in my answer. — Daniel Apt, Dec 05 '17 at 16:26
@CristianMaranca `[0]style‌` is invalid syntax. You mean `[0].style‌`. — Sebastian Simon, Dec 05 '17 at 16:27

score 0 · Accepted Answer · answered Dec 05 '17 at 16:26

Two things:

Firstly, there is a typo in the function you call. It should be getElementsByClassName().

Secondly, getElementsByClassName() returns a NodeList. This is “like” an Array, but it means you have to select each item from the NodeList.

If there is only one element, you can do document.getElementsByClassName('nemetale')[0].style.backgroundColor = 'red';

If there is more than one element you will have to loop through the items. I recommend making it a function.

<button onclick="highlight">Nemetale</button>

function highlight() {
    var items = document.getElementsByClassName('nemetale');

    Array.from(items).forEach(function(item) {
        item.style.backgroundColor = 'red';
    });
}

If you are using ES6, you can make it a bit shorter as well:

function highlight() {
    const items = document.getElementsByClassName('nemetale');

    Array.from(items).forEach(item => item.style.backgroundColor = 'red');
}

score -1 · Answer 3 · answered Dec 05 '17 at 16:20

-1

You have a typo: getElementsByClassmame, this isn't a valid JS method.

Use .querySelector instead:

document.querySelector('.nemetale')

https://jsfiddle.net/d5dg0uw4/

answered Dec 05 '17 at 16:20

Alex

2,651
2
25
45

slon · Answer 4 · 2017-12-05T16:37:26.823

-2

Make it like below by adding function:

<button onclick="changeBackgroundColor()">Nemetale</button>

put this into

<script>
  function changeBackgroundColor(){
    document.getElementsByClassName('nemetale')[0].style.backgroundColor = 'red';
  }
</script>

edited Dec 05 '17 at 16:37

answered Dec 05 '17 at 16:19

slon

1,002
1
8
12

Then close the question, don't downvote correct answers. – Alex Dec 05 '17 at 16:33

Button to change color of

4 Answers4