Question

我试图在点击时更改div颜色，但它不起作用：

<html>
    <head>
        <script>
            function data(){
                var MyDiv1 = document.getElementById('newdata').innerHTML;
                alert(MyDiv1)   
                if(MyDiv1==1) {
                    document.getElementsById('newdata').style.backgroundColor = "green";
                }
            }
        </script>
    </head>
    <body >
        <div id="newdata" style="background-color: red; width: 100px;height: 50px;">
            1
        </div>
        <a href="#" onclick="data();">Logout</a>
    </body>
</html>

我在哪里错了？

任何帮助将不胜感激

Answer 1

<html>
    <head>
    </head>
    <body >
        <div id="newdata" style="background-color: red; width: 100px;height: 50px;">
            1
        </div>
        <a href="#" onclick="data();">Logout</a>
    </body>
</html>
  <script>
       function data(){

       document.getElementById('newdata').style.backgroundColor = "green";

       }
  </script>

http://jsfiddle.net/n2uk4br1/

1）最后的剧本;

2）元素不是元素

3）调用正确的div名称

4）警报，如果没有目的

Answer 2

应为newdata

 document.getElementById('newdata').style.backgroundColor = "green";

所以你的功能将是

function data(){
                var MyDiv1 = document.getElementById('newdata').innerHTML;
                alert(MyDiv1)   
                if(MyDiv1==1) {
                    document.getElementById('newdata').style.backgroundColor = "green";
                }
            }

Answer 3

您的尝试存在一些问题。以下代码段可以满足您的需求：

＆＃13;

function data(){
  var myDiv = document.getElementById('newdata');
  var content = myDiv.innerHTML;
  if (content.trim() === "1")  {
    myDiv.style.backgroundColor = "green";
  }
}

＆＃13;

<div id="newdata" style="background-color: red; width: 100px;height: 50px;">
  1
</div>
<a href="#" onclick="data();">Logout</a>

＆＃13;

＆＃13; 首先，您必须小心区分<div>元素及其内容。我把这两个变成了单独的变量。我使用.trim()从<div>的内容中删除了任何前导和尾随空格，并使用了严格比较===。

单击事件更改div背景颜色

3 个答案: