七个圆但只有一个是变色,为什么？

Question

七个圆但只有一个是变色,为什么？

我是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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

chr*_*con 8

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

使用类和循环

归档时间：	6 年，6 月前
查看次数：	100 次
最近记录：	6 年，6 月前