时间戳

首页 > 解决方案 > 七个圆圈，但只有一个在改变颜色，为什么？

javascript - 七个圆圈，但只有一个在改变颜色，为什么？

问题描述

我是 javascript 的新手，我有一个任务是创建七个圆圈，这些圆圈应该在鼠标点击时改变颜色。第一个圆圈正在改变颜色，但其他六个只是保持红色，尽管我在点击时调用了相同的方法？？我不能在我的答案中使用 JQuery，只能使用 javascritpt。任何帮助深表感谢！

我的直觉是尝试创建一个 for 循环，但这对我不起作用..

<!DOCTYPE html>
    <html>
    <head>
    	<title>Circles of rainbow colours</title>
    	
    
    	
    </head>
    
    <body>
    <h2> Rainbow Colours</h2>
    	<svg height="1000" width="500"> 
    	<circle  id="circle1" onclick="function()"  cx="50" cy="50" r="40" 
    style="fill:red;"/>
    	<circle  id ="circle1" onclick="function()"  cx="50" cy="150" r="40" 
    style="fill:red;"/>
    	<circle  id ="circle1" onclick="function()"  cx="50" cy="250" r="40"  
    style="fill:red;"/>
    	<circle  id ="circle1" onclick="function()"  cx="50" cy="350" r="40" 
    style="fill:red;"/>
    	<circle  id ="circle1" onclick="function()"  cx="50" cy="450" r="40" 
    style="fill:red;"/>
    	<circle  id ="circle1" onclick="function()"  cx="50" cy="550" r="40" 
    style="fill:red;"/>
    	<circle  id ="circle1" onclick="function()"  cx="50" cy="650" r="40" 
    style="fill:red;"/>
    	</circle>
    	
    	</svg>
    
    
    <script>
    	
       var circle = document.getElementById("circle1");
    
       
    	colors = ['orange', 'yellow', 'green', 'blue', 'indigo','violet'];
    	
    	circle.onclick = function () 
    	
    	
    	{
    		color = colors.shift();
    		colors.push(color);
    	
    		circle.style.fill = color;
    	}
    	
    	
     </script>
    
    
    </body>
    
    </html>

标签： javascript

解决方案

id（标识符）必须是唯一的，document.getElementById() 总是只捕获第一个。

使用类和循环

推荐阅读