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

时间：2019-02-14 10:21:52

标签： 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>

8 个答案:

答案 0 :(得分：8)

一个ID（标识符）必须唯一，document.getElementById（）始终仅捕获第一个。

使用类并循环

答案 1 :(得分：1)

HTML中的元素必须具有唯一的C属性，否则，您的HTML被视为无效。

相反，您应该使用id，这样您就可以遍历所选元素（在这里我使用了class），并将.forEach处理程序应用于每个元素。

注意：既然您正在使用一个类，则需要使用click，这将为您提供HTMLCollection个匹配元素。

请参见下面的工作示例：

getElementsByClassName()
const circles = [...document.getElementsByClassName("circle1")], // use spread syntax to convert collection to array
colors = ['orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

circles.forEach(circle => {
  circle.onclick = function() {
    color = colors.shift();
    colors.push(color);
    circle.style.fill = color;
  }
});

答案 2 :(得分：0)

在onclick函数中，使用此关键字传递元素本身。 在这种情况下它可以工作，但是请记住，为多个元素赋予相同的ID是错误的。它应该是唯一的。 

var circle = document.getElementById("circle1");


colors = ['orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
function a(e)

{
  color = colors.shift();
  colors.push(color);

  e.style.fill = color;
}
<html>
<body>
  <h2> Rainbow Colours</h2>
  <svg height="1000" width="500"> 
    <circle  id="circle1" onclick="a(this)"  cx="50" cy="50" r="40" 
style="fill:red;"/>
    <circle  id ="circle1" onclick="a(this)"  cx="50" cy="150" r="40" 
style="fill:red;"/>
    <circle  id ="circle1" onclick="a(this)"  cx="50" cy="250" r="40"  
style="fill:red;"/>
    <circle  id ="circle1" onclick="a(this)"  cx="50" cy="350" r="40" 
style="fill:red;"/>
    <circle  id ="circle1" onclick="a(this)"  cx="50" cy="450" r="40" 
style="fill:red;"/>
    <circle  id ="circle1" onclick="a(this)"  cx="50" cy="550" r="40" 
style="fill:red;"/>
    <circle  id ="circle1" onclick="a(this)"  cx="50" cy="650" r="40" 
style="fill:red;"/>
    </svg>
</body>

</html>

答案 3 :(得分：0)

使用querySelectorAll('circle')通过元素名称查询所有圈子。

也不要在所有圈子上使用相同的ID，元素ID必须是唯一的。

然后您可以使用forEach遍历您的圈子，并在点击处理程序上附加circle.addEventListener('click', handler)。

使用此技术，您不需要ID或类即可引用您的圈子，还可以在HTML中的每个圈子上删除onclick处理程序：

<circle cx="50" cy="50" r="40" style="fill:red;"/>

这里是一个例子：

const circles = document.querySelectorAll('circle');

const colors = ['orange', 'yellow', 'green', 'blue', 'indigo','violet'];

circles.forEach(circle => {
  circle.addEventListener('click', () => {
    color = colors.shift();
    colors.push(color);
    circle.style.fill = color;
  });
});
<svg height="1000" width="500"> 
  <circle cx="50" cy="50"  r="40" style="fill:red;"/>
  <circle cx="50" cy="150" r="40" style="fill:red;"/>
  <circle cx="50" cy="250" r="40" style="fill:red;"/>
  <circle cx="50" cy="350" r="40" style="fill:red;"/>
  <circle cx="50" cy="450" r="40" style="fill:red;"/>
  <circle cx="50" cy="550" r="40" style="fill:red;"/>
  <circle cx="50" cy="650" r="40" style="fill:red;"/>
</svg>

答案 4 :(得分：0)

您有多个具有相同ID的元素。代替id使用class并向其添加事件侦听器

var circle = document.getElementsByClassName("circle");
let colors = ['orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

[...circle].forEach(function(item, index) {
  item.addEventListener('click', function(e) {
    item.style.fill = colors[index]
  })
})
<h2> Rainbow Colours</h2>
<svg height="1000" width="500"> 
    <circle  id="circle1" class ="circle" cx="50" cy="50" r="40" 
style="fill:red;"/>
    <circle  id ="circle1" class ="circle"cx="50" cy="150" r="40" 
style="fill:red;"/>
    <circle  id ="circle1" class ="circle"  cx="50" cy="250" r="40"  
style="fill:red;"/>
    <circle  id ="circle1" class ="circle"  cx="50" cy="350" r="40" 
style="fill:red;"/>
    <circle  id ="circle1" class ="circle"  cx="50" cy="450" r="40" 
style="fill:red;"/>
    <circle  id ="circle1" class ="circle"  cx="50" cy="550" r="40" 
style="fill:red;"/>
    <circle  id ="circle1" class ="circle"  cx="50" cy="650" r="40" 
style="fill:red;"/>
</svg>

答案 5 :(得分：0)

id属性用于引用单个项目，而Class属性用于引用项目组。

因此将ID更改为Class看起来像这样。-

<svg height="1000" width="500"> 
    <circle  class="circle1" onclick="function()"  cx="50" cy="50" r="40" 
style="fill:red;"/>
    <circle  class ="circle1" onclick="function()"  cx="50" cy="150" r="40" 
style="fill:red;"/>
    <circle  class ="circle1" onclick="function()"  cx="50" cy="250" r="40"  
style="fill:red;"/>
    <circle  class ="circle1" onclick="function()"  cx="50" cy="350" r="40" 
style="fill:red;"/>
    <circle  class ="circle1" onclick="function()"  cx="50" cy="450" r="40" 
style="fill:red;"/>
    <circle  class ="circle1" onclick="function()"  cx="50" cy="550" r="40" 
style="fill:red;"/>
    <circle  class ="circle1" onclick="function()"  cx="50" cy="650" r="40" 
style="fill:red;"/>
    </circle>

    </svg>

，然后使用该类按其类名获得项目组。

var circle = document.getElementsByClassName("circle1");

答案 6 :(得分：0)

您需要处理类而不是修订ID。使用以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>Circles of rainbow colours</title>
</head>

<body>
<h2> Rainbow Colours</h2>
    <svg height="1000" width="500"> 
    <circle  onclick="changecolor(this);"  cx="50" cy="50" r="40" 
style="fill:red;"/>
    <circle  onclick="changecolor(this);"  cx="50" cy="150" r="40" 
style="fill:red;"/>
    <circle  onclick="changecolor(this);"  cx="50" cy="250" r="40"  
style="fill:red;"/>
    <circle  onclick="changecolor(this);"  cx="50" cy="350" r="40" 
style="fill:red;"/>
    <circle  onclick="changecolor(this);" cx="50" cy="450" r="40" 
style="fill:red;"/>
    <circle  onclick="changecolor(this);" cx="50" cy="550" r="40" 
style="fill:red;"/>
    <circle onclick="changecolor(this);" cx="50" cy="650" r="40" 
style="fill:red;"/>
    </circle>

    </svg>


<script>

colors = ['orange', 'yellow', 'green', 'blue', 'indigo','violet'];
function changecolor(e) {
    color = colors.shift();
    colors.push(color);

    e.style.fill = color;
}
 </script>
</body>
</html>

希望它对您有帮助。

答案 7 :(得分：0)

像这样尝试 让圈子= Array.from（document.querySelectorAll（'circle'））;

circles.forEach（（circle）=> { circle.onclick = function（）{color = colors.shift（）; colors.push（color）; circle.style.fill =颜色; } } `

欢呼

相关问题
最新问题