更改文本颜色onclick并更改为其他项目

Question

我在另一个问题/答案中找到了这个并对其进行了修改......但它仍然不起作用。 我是一个js-noob，所以..有人可以帮帮我吗？ 这可能很简单......

<script>
    document.getElementById('change').onclick = changeColor;   
    function changeColor() {
        document.body.style.color = "red";
        return false;
    }   
</script>

<div id="myid" onclick="changeColor(this); return false;">Hello Here !!</div><br>
<div id="myid2" onclick="changeColor(this); return false;">Hello There !!</div><br>

我的问题是：当我运行它时，两者都应该是黑色。 当我点击第一个，只有一个应该变成红色。 如果之后我点击第二个，第一个应该是黑色再次只有第二个红色......我该怎么做？ （jquery也会受到欢迎，如果有解决方案......）

谢谢！

Answer 1

这是你的解决方案 。

这不是最好的，但考虑到你复制代码的错误，你可能想查看Wikiversity关于Beginning JavaScript的页面 ，以及他们面临的挑战 。

此外，您复制的代码中的错误列表，以便您可以再次避免这些问题：

1. 第一行脚本获取ID为'change'的元素。 您的HTML中不存在此类ID。
2. document.body不返回可以访问.style.color的有效JavaScript对象。
3. changeColor()不接受任何参数，因此不应该使用changeColor(this)调用它。
4. 不要使用内联DOM。 即，不要在HTML中使用onclick属性。 HTML用于布局，而不是脚本。
5. （由@roselan在下面的评论中添加）使用预定义的CSS样式规则和切换元素的类来获得所需的效果，而不是使用$ .css或JavaScript的原生.style。 （这种做法的一个例子可以在解决方案中找到。）

最重要的是， 布局应该保留在HTML中，用JavaScript编写脚本，在CSS中使用样式。

Answer 2

谢谢埃德温。 我做了一些谷歌搜索和摆弄我找到的东西，它完全符合我的想法。 很抱歉这个混乱..我选择了div，如果我可以让它工作，那么我会为我的li实现..无论如何，解决方案是：

javascript部分：

function switchColors(element)  
{  
links=document.getElementsByTagName("li") ;  
for (var i = 0 ; i < links.length ; i ++)  
links.item(i).style.color = 'black' ;  
element.style.color='orange' ;  
}  

和需要颜色变化的html东西：

<ul>  
<li onclick="switchColors(this);">Link 1</li>  
<li onclick="switchColors(this);">Link 2</li>  
<li onclick="switchColors(this);">Link 3</li>  
</ul>