Harry Britten Harry Britten - 13 days ago 5
HTML Question

HTML Traffic light

I am trying to make traffic lights using html and JavaScript, I am writing it in notepad and converting it to a html file when in save it, my code only shows the outside box, please help

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

Answer

You have a problem with your html syntax:

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

And you also closed a </script> tag (that never opened).

Here is the fix:

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

I really advise you to find some IDE (or some better text-editor with syntax-highlighting) and not use notepad for html.