JavaScript 用于更换<div>按下按钮的颜色</div><div id="text_translate"><p>当我的 html 和 JS 代码在同一个文件中时，我有点不确定为什么我的代码似乎不起作用。 当 html 和 JS 分开时，似乎工作正常。 有人可以指出我的错误....我是新手！</p><p> <strong>HTML：</strong></p><pre> &lt;div class="main"&gt; &lt;div class="light"&gt;&lt;/div&gt; &lt;button onclick="chngCol()" id="burn"&gt;Burn!&lt;/button&gt; &lt;/div&gt;</pre><p> <strong>JavaScript：</strong></p><pre> chngCol() { if(document.getElementByClass('light').style.background == "#00ffff") { document.getElementByClass('light').style.background = "#ffff00"; } else if(document.getElementByClass('light').style.background == "ffff00") { document.getElementByClass('light').style.background = "#ff00ff"; } else if(document.getElementByClass('light').style.background == "#ff00ff") { document.getElementByClass('light').style.background = "#00ffff"; } }</pre><p> <strong>CSS：</strong></p><pre> .light{ width: 50px; height: 50px; background-color:#00ffff; }</pre><p> 所有代码都在同一个文档中，带有适当的标签，但是我在第一个 { 调用 chngCol.</p></div>

Question

I'm a little unsure why my code doesn't seem to be working when my html and JS code are within the same file. When the html and JS are separate, seems to be working fine. Can someone point out the error in my ways....I'm a newbie!!

HTML:

<div class="main">
    <div class="light"></div>
    <button onclick="chngCol()" id="burn">Burn!</button>
</div>

JavaScript:

chngCol() {
    if(document.getElementByClass('light').style.background == "#00ffff")
      { 
       document.getElementByClass('light').style.background = "#ffff00"; 
      } 
       else if(document.getElementByClass('light').style.background == "ffff00")
      {
       document.getElementByClass('light').style.background = "#ff00ff"; 
      }
       else if(document.getElementByClass('light').style.background == "#ff00ff")
      { 
       document.getElementByClass('light').style.background = "#00ffff";       
      }
   }

CSS:

    .light{
        width: 50px;
        height: 50px;
        background-color:#00ffff;
    }

All code is in the same document with the appropriate tags and however the error i'm getting in Chrome Console on the first { after calling chngCol.

Answer 1

There are a multitude of issues.

• chngCol() { is not valid JS. Either function chngCol() { OR const chngCol = () =>
• You need document.getElementsByClassName("light")[0] OR better, document.querySelector(".light")
• You cannot read the background color of the element if it is not set in script first.

I think you meant to do this:

 let cnt = 0; const colors = ["#00ffff", "#ffff00", "#ff00ff"]; const chngCol = () => { cnt++; if (cnt >= colors.length) cnt = 0; // wrap document.querySelector('.light').style.background = colors[cnt]; // use the array } document.getElementById("burn").addEventListener("click", chngCol);

 .light { width: 50px; height: 50px; background-color: #00ffff; } #burn { width: 150px; font-weight: 700; }

 <div class="main"> <div class="light"></div> <button id="burn">Burn!</button> </div>

Answer 2

The document.getElementByClass selector is an array selector. In order to select your element you should select the first element of the array. Try this instead:

document.getElementsByClassName('light')[0].style.background