Wie mache ich einen Knopf, der das Licht jedes Mal ändert, wenn ich es für eine Ampel drücke?

-3

Ich brauche meinen Code, um die Lichter zu wechseln. Jedes Mal, wenn ich den Knopf drücke, möchte ich, dass die Ampel rot, dann rot und gelb zusammen angezeigt wird, dann nur grün und ich möchte, dass dieser Vorgang jedes Mal wiederholt wird, wenn ich die Taste drücke. Ich brauche Hilfe dafür. Bisher habe ich diesen Code.Wie mache ich einen Knopf, der das Licht jedes Mal ändert, wenn ich es für eine Ampel drücke?

<!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>

können Sie mir bitte helfen, die Lösung für meine Arbeit danke zu finden.

Quelle

2016-05-23 blaire

Sie haben Ihr JavaScript um zu zeigen, obwohl Sie * * hat die Schließung sind ' 'Tag aus irgendeinem Grund. Was hast du versucht und wo bist du stecken geblieben? Wie für "* [hilft Ihnen] finden Sie die Lösung für [Ihre] Arbeit *" - nein: * Sie * kommen mit der Lösung, und dann, wenn - oder wenn - Sie Probleme haben, können Sie zurückkommen und uns danach fragen spezifische Probleme, nachdem Sie Ihre Arbeit gezeigt und das Problem, das Verhalten und das erwartete Verhalten erläutert haben. –

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

Einfach single svg erstellen und Kreisfüllung bei Klick ändern. – jcubic

Versuchen Sie folgendes:

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>

Quelle

2016-05-23 14:00:48 jcubic

dieser Code ist wirklich gut, aber ich brauche drei Kreise tun, dass danke für die Hilfe. – blaire

Versuchen Sie, diese

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

Quelle

2016-05-23 14:02:56

danke für die Antwort, aber ich brauche diesen Prozess, um fortzufahren und ich muss dies mit nur einem Knopf tun. – blaire

Wie mache ich einen Knopf, der das Licht jedes Mal ändert, wenn ich es für eine Ampel drücke?

Antwort

Verwandte Themen