按钮改变颜色

时间:2017-12-05 16:16:32

标签: javascript html css html-table

我正在尝试制作元素的交互式元素周期表。单击按钮时,我需要使用<td>更改classname "nemetale"更多的背景颜色。它不起作用,我不知道我做错了什么。

有按钮

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

有一个<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>
 ...

4 个答案:

答案 0 :(得分:2)

<强> Working fiddle

  

getElementsByClassName():返回具有所有给定类名的所有子元素的类数组对象。

功能.getElementsByClassmame()不存在,您应该使用 .getElementsByClassName()

由于.getElementsByClassName()会返回一个元素列表,您应该使用[0]来返回第一个元素,如:

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>

答案 1 :(得分:0)

两件事:

首先,您调用的函数中存在拼写错误。它应该是getElementsByClassName()

其次,getElementsByClassName()返回NodeList。这与“数组”相似,但这意味着您必须从NodeList中选择每个项目。

如果只有一个元素,你可以这样做 document.getElementsByClassName('nemetale')[0].style.backgroundColor = 'red';

如果有多个元素,则必须遍历这些项目。我建议把它变成一个功能。

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

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

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

如果您使用的是ES6,也可以缩短它:

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

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

答案 2 :(得分:-1)

你有一个拼写错误: getElementsByClassmame ,这不是一个有效的JS方法。

改为使用.querySelector:

document.querySelector('.nemetale')

https://jsfiddle.net/d5dg0uw4/

答案 3 :(得分:-2)

通过添加功能使其如下所示:

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

把它放进

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