点击事件时更改div背景颜色

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

您的尝试有两个问题。 以下代码片段可以满足您的需求：

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

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

首先，您必须小心区分<div>元素及其内容。 我已将两者放入单独的变量中。 我已经使用.trim()从<div>的内容中删除了任何前导和尾随空格，还使用了严格的比较=== 。

点击事件时更改div背景颜色

问题描述

3 个解决方案

解决方案1
0 已采纳 2014-09-20 14:26:45

解决方案2
0 2014-09-20 14:29:26

解决方案3
0 2014-09-20 14:31:46

点击事件时更改div背景颜色

问题描述

3 个解决方案

解决方案1 0 已采纳 2014-09-20 14:26:45

解决方案2 0 2014-09-20 14:29:26

解决方案3 0 2014-09-20 14:31:46

解决方案1
0 已采纳 2014-09-20 14:26:45

解决方案2
0 2014-09-20 14:29:26

解决方案3
0 2014-09-20 14:31:46