HTML红绿灯

我试图使用HTML和JavaScript，我在记事本写它，并将其转换为HTML文件时，在保存它，我的代码只显示在箱外交通信号灯进行，请大家帮忙HTML红绿灯

<!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-11-23 Harry Britten

您遇到的问题到底是什么？ – Stuart

在标准交通灯的三个圈不显示... –

你的代码看起来不错在这里https://jsfiddle.net/vv16g7xw/ –

-1

你有一个问题，你的HTML语法：

<button onclick=circle2.style.fill="yellow";><Change Lights 
---------------------------------------------^

而且你还关闭了</script>标签（永不打开）。

这里是修复：

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

我真的建议你找一些IDE（或有语法突出显示一些更好的文本编辑器）和不使用记事本为HTML 。

来源

2016-11-23 11:57:15 Dekel

确定但是，你编辑的代码只显示四个按钮，而不是一个单一的按钮和三个圆圈 –

你的原代码有4个按钮...... – Dekel

将欣赏，如果downvoter会评论downvote！ – Dekel

你的代码是无效的 - 我已经纠正了您的按钮你，但你现在需要做的休息：

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

注意的变化！

我也整理多一点的它，删除无效标签等https://jsfiddle.net/xwudu9c8/

你也应该重新标记您的项目，以便他们是有意义的。

来源

2016-11-23 11:57:43 Stuart

感谢您的帮助... –

其余的问题是什么 –

欢呼的队友很大的帮助 –

回答

相关问题