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

感謝您的幫助... –

其餘的問題是什麼 –

歡呼的隊友很大的幫助 –

回答

相關問題