Как сделать кнопку, которая будет менять свет каждый раз, когда я нажму на него для светофора?

-3

Мне нужен мой код, чтобы продолжать менять свет. каждый раз, когда я нажимаю кнопку, я хочу, чтобы светофор показывал красный, затем красный и желтый вместе, а затем зеленый, и я хочу, чтобы этот процесс повторялся каждый раз, когда я нажимаю кнопку. Мне нужна помощь для этого. до сих пор у меня есть этот код.Как сделать кнопку, которая будет менять свет каждый раз, когда я нажму на него для светофора?

<!DOCTYPE html> 
<html> 
<head> 
<title>Traffic Light</title> 
</head> 
<body> 

<h1>Traffic Light</h1> 
<p>Click the button for light to change.</p> 

<div 

style="width:100.5px;height:320px;border:3px solid #000;"> 

<button onclick=circle2.style.fill="yellow";><Change Lights 
<button onclick=circle1.style.fill="transparent";><Change Lights 
<button onclick=circle2.style.fill="transparent";><Change Lights 
<button onclick=circle3.style.fill="green";>Change Lights 
</button> 

<svg id="svg1" style="width: 3.5in; height: 1in"> 
<circle id="circle1" r="40" cx="50" cy="50" style="fill: red; stroke: black;  stroke-width: 2"/> 
</svg> 

<svg id="svg2" style="width: 3.5in; height: 1in"> 
<circle id="circle2" r="40" cx="50" cy="50" style="fill: transparent; stroke: black; stroke-width: 2"/> 
</svg> 

<svg id="svg3"style="width: 3.5in; height: 1in"> 
<circle id="circle3" r="40" cx="50" cy="50" style="fill: transparent; stroke: black; stroke-width: 2"/> 
</svg> 

</script> 
</div> 
</body> 
</html>

пожалуйста, вы можете помочь мне найти решение для моей работы спасибо.

источник

2016-05-23 blaire

Вы забыли предъявить JavaScript, хотя вы * сделал * включают закрытие ' 'тег по какой-то причине. Что вы пробовали, и где вы застряли? Что касается «* [помочь вам] найти решение для [вашей] работы *» - нет: * вы * придумаете решение, а затем, когда - или если - у вас есть проблемы, вы можете вернуться и спросить нас об этих конкретные проблемы, показав вашу работу и объяснив проблему, поведение и ожидаемое поведение. –

http://stackoverflow.com/questions/28634993/svg-animation-pattern-traffic-light –

Просто создайте сингл svg и измените заливку круга на клик. – jcubic

Попробуйте это:

var circle = document.getElementById('circle'); 
 
var colors = ['red', 'yellow', 'green']; 
 
var index = 0; 
 
document.getElementById('traffic').onclick = function() { 
 
    index++; 
 
    if (index == colors.length) { 
 
    index = 0; 
 
    } 
 
    circle.style.fill = colors[index]; 
 
};

<button id="traffic">Change Lights</button> 
 

 
<svg id="svg" style="width: 3.5in; height: 1in"> 
 
<circle id="circle" r="40" cx="50" cy="50" style="fill: red; stroke: black;  stroke-width: 2"/> 
 
</svg>

источник

2016-05-23 14:00:48 jcubic

этот код действительно хорош, но мне нужно, чтобы три круга делали это, спасибо за помощь. – blaire

Попробуйте

<p>Click the button for light to change.</p> 
 

 
<div 
 

 
style="width:100.5px;height:420px;border:3px solid #000;"> 
 

 
<button onclick='circle2.style.fill="yellow"'>Change Lights</button> 
 
<button onclick='circle1.style.fill="transparent"'>Change Lights</button> 
 
<button onclick='circle2.style.fill="transparent"'>Change Lights</button> 
 
<button onclick='circle3.style.fill="green"'>Change Lights</button> 
 

 
<svg id="svg1" style="width: 3.5in; height: 1in"> 
 
<circle id="circle1" r="40" cx="50" cy="50" style="fill: red; stroke: black;  stroke-width: 2"/> 
 
</svg> 
 

 
<svg id="svg2" style="width: 3.5in; height: 1in"> 
 
<circle id="circle2" r="40" cx="50" cy="50" style="fill: transparent; stroke: black; stroke-width: 2"/> 
 
</svg> 
 

 
<svg id="svg3"style="width: 3.5in; height: 1in"> 
 
<circle id="circle3" r="40" cx="50" cy="50" style="fill: transparent; stroke: black; stroke-width: 2"/> 
 
</svg> 
 

 
</div>

источник

2016-05-23 14:02:56

спасибо за ответ, но мне нужен этот процесс, чтобы продолжить, и мне нужно сделать это только с одной кнопкой. – blaire

Как сделать кнопку, которая будет менять свет каждый раз, когда я нажму на него для светофора?

ответ

Смежные вопросы