Simulation of a traffic lightVertical alignment of elements overlapping in IECSS - Excess space on the rightLeft padding on container when content of the article goes past the foldpermanent 2x3 CSS image galleryCreating a two-column-100% layout with BootstrapRemove space between 2 tables HTML CSS and image removes background imageChanging Menu Bar Font SizeCSS position:fixed is working for the header but not for the footerTextarea too large for page?Invalid css style during zooming in calendar

How is it possible to have an ability score that is less than 3?

How much RAM could one put in a typical 80386 setup?

How old can references or sources in a thesis be?

NMaximize is not converging to a solution

When a company launches a new product do they "come out" with a new product or do they "come up" with a new product?

Which country benefited the most from UN Security Council vetoes?

A newer friend of my brother's gave him a load of baseball cards that are supposedly extremely valuable. Is this a scam?

High voltage LED indicator 40-1000 VDC without additional power supply

Paid for article while in US on F-1 visa?

If human space travel is limited by the G force vulnerability, is there a way to counter G forces?

Modeling an IP Address

What does it mean to describe someone as a butt steak?

Convert two switches to a dual stack, and add outlet - possible here?

Maximum likelihood parameters deviate from posterior distributions

Did Shadowfax go to Valinor?

How much of data wrangling is a data scientist's job?

Why do I get two different answers for this counting problem?

DC-DC converter from low voltage at high current, to high voltage at low current

How to format long polynomial?

A case of the sniffles

Watching something be written to a file live with tail

tikz convert color string to hex value

LaTeX: Why are digits allowed in environments, but forbidden in commands?

Was any UN Security Council vote triple-vetoed?

Simulation of a traffic light

Vertical alignment of elements overlapping in IECSS - Excess space on the rightLeft padding on container when content of the article goes past the foldpermanent 2x3 CSS image galleryCreating a two-column-100% layout with BootstrapRemove space between 2 tables HTML CSS and image removes background imageChanging Menu Bar Font SizeCSS position:fixed is working for the header but not for the footerTextarea too large for page?Invalid css style during zooming in calendar

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

I am trying to create a traffic light but it doesn't seem to be showing up when I open it. I Would like some help please. I think the problem possibly could be in the HTML file.

This is the javascript code

document.getElementById('stopButton').onclick = illuminateRed;

 document.getElementById('goButton').
 onclick = illuminateGreen;

document.getElementById('slowButton').
onclick = illuminateYellow;


function illuminateRed() 
clearLights();
document.getElementById('stopLight').style.backgroundColor = "red";


function illuminateGreen() 
clearLights();
document.getElementById('goLight').style.backgroundColor = "green";


function illuminateYellow() 
clearLights();
document.getElementById('slowLight').style.backgroundColor = "yellow";



function clearLights() 
document.getElementById('stopLight').style.backgroundColor = "black";
document.getElementById('slowLight').style.backgroundColor = "black";
document.getElementById('goLight').style.backgroundColor = "black";

This is the css code below

body 
font-family: sans-serif;
 

#controlPanel 
float: left;
padding-top: 30px;
 

.button 
background-color: gray;
color: white;
border-radius: 10px;
padding: 20px;
text-align: center;
margin: 90px 40px;
cursor: pointer;


 #traffic-light 
height: 550px;
width: 200px;
float: left;
background-color: #333;
border-radius: 40px;
margin: 30px 0;
padding: 20px;


.bulb 
height: 150px;
width: 150px;
background-color: #111;
border-radius: 50%;
margin: 25px auto;
transition: background 500ms;

This is the html code below

 <!DOCTYPE html>

 <html>
 <head>

 <script src="trafficLights.js" type="text/javascript></script"></script>

 <link href="trafficLight.css" type="text/css" rel="stylesheet">

</head>


 </html>

When I open up the file for the html a blank page is just shown. Chrome is my default browser for my computer

edited Mar 21 at 23:02

asked Mar 21 at 22:51

hannah

274

1

Please add your code

– Jack Bashford
Mar 21 at 22:51

Welcome to Stack Overflow! You're going to need to ask a question that can actually be answered with code. See stackoverflow.com/help/mcve for hints on how to do this.

– Jonathan
Mar 21 at 22:56

1

Your html isn't complete - it's missing the elements e.g. stopLight slowLight goLight...

– obscure
Mar 21 at 23:06

what do I need to include?

– hannah
Mar 21 at 23:13

The definition for all of your html elements you're referencing in your JavaScript code - document.getElementById('goButton') for example.

– obscure
Mar 21 at 23:20

add a comment |

I am trying to create a traffic light but it doesn't seem to be showing up when I open it. I Would like some help please. I think the problem possibly could be in the HTML file.

This is the javascript code

document.getElementById('stopButton').onclick = illuminateRed;

 document.getElementById('goButton').
 onclick = illuminateGreen;

document.getElementById('slowButton').
onclick = illuminateYellow;


function illuminateRed() 
clearLights();
document.getElementById('stopLight').style.backgroundColor = "red";


function illuminateGreen() 
clearLights();
document.getElementById('goLight').style.backgroundColor = "green";


function illuminateYellow() 
clearLights();
document.getElementById('slowLight').style.backgroundColor = "yellow";



function clearLights() 
document.getElementById('stopLight').style.backgroundColor = "black";
document.getElementById('slowLight').style.backgroundColor = "black";
document.getElementById('goLight').style.backgroundColor = "black";

This is the css code below

body 
font-family: sans-serif;
 

#controlPanel 
float: left;
padding-top: 30px;
 

.button 
background-color: gray;
color: white;
border-radius: 10px;
padding: 20px;
text-align: center;
margin: 90px 40px;
cursor: pointer;


 #traffic-light 
height: 550px;
width: 200px;
float: left;
background-color: #333;
border-radius: 40px;
margin: 30px 0;
padding: 20px;


.bulb 
height: 150px;
width: 150px;
background-color: #111;
border-radius: 50%;
margin: 25px auto;
transition: background 500ms;

This is the html code below

 <!DOCTYPE html>

 <html>
 <head>

 <script src="trafficLights.js" type="text/javascript></script"></script>

 <link href="trafficLight.css" type="text/css" rel="stylesheet">

</head>


 </html>

When I open up the file for the html a blank page is just shown. Chrome is my default browser for my computer

edited Mar 21 at 23:02

asked Mar 21 at 22:51

hannah

274

1

Please add your code

– Jack Bashford
Mar 21 at 22:51

Welcome to Stack Overflow! You're going to need to ask a question that can actually be answered with code. See stackoverflow.com/help/mcve for hints on how to do this.

– Jonathan
Mar 21 at 22:56

1

Your html isn't complete - it's missing the elements e.g. stopLight slowLight goLight...

– obscure
Mar 21 at 23:06

what do I need to include?

– hannah
Mar 21 at 23:13

The definition for all of your html elements you're referencing in your JavaScript code - document.getElementById('goButton') for example.

– obscure
Mar 21 at 23:20

add a comment |

I am trying to create a traffic light but it doesn't seem to be showing up when I open it. I Would like some help please. I think the problem possibly could be in the HTML file.

This is the javascript code

document.getElementById('stopButton').onclick = illuminateRed;

 document.getElementById('goButton').
 onclick = illuminateGreen;

document.getElementById('slowButton').
onclick = illuminateYellow;


function illuminateRed() 
clearLights();
document.getElementById('stopLight').style.backgroundColor = "red";


function illuminateGreen() 
clearLights();
document.getElementById('goLight').style.backgroundColor = "green";


function illuminateYellow() 
clearLights();
document.getElementById('slowLight').style.backgroundColor = "yellow";



function clearLights() 
document.getElementById('stopLight').style.backgroundColor = "black";
document.getElementById('slowLight').style.backgroundColor = "black";
document.getElementById('goLight').style.backgroundColor = "black";

This is the css code below

body 
font-family: sans-serif;
 

#controlPanel 
float: left;
padding-top: 30px;
 

.button 
background-color: gray;
color: white;
border-radius: 10px;
padding: 20px;
text-align: center;
margin: 90px 40px;
cursor: pointer;


 #traffic-light 
height: 550px;
width: 200px;
float: left;
background-color: #333;
border-radius: 40px;
margin: 30px 0;
padding: 20px;


.bulb 
height: 150px;
width: 150px;
background-color: #111;
border-radius: 50%;
margin: 25px auto;
transition: background 500ms;

This is the html code below

 <!DOCTYPE html>

 <html>
 <head>

 <script src="trafficLights.js" type="text/javascript></script"></script>

 <link href="trafficLight.css" type="text/css" rel="stylesheet">

</head>


 </html>

When I open up the file for the html a blank page is just shown. Chrome is my default browser for my computer

edited Mar 21 at 23:02

asked Mar 21 at 22:51

hannah

274

I am trying to create a traffic light but it doesn't seem to be showing up when I open it. I Would like some help please. I think the problem possibly could be in the HTML file.

This is the javascript code

document.getElementById('stopButton').onclick = illuminateRed;

 document.getElementById('goButton').
 onclick = illuminateGreen;

document.getElementById('slowButton').
onclick = illuminateYellow;


function illuminateRed() 
clearLights();
document.getElementById('stopLight').style.backgroundColor = "red";


function illuminateGreen() 
clearLights();
document.getElementById('goLight').style.backgroundColor = "green";


function illuminateYellow() 
clearLights();
document.getElementById('slowLight').style.backgroundColor = "yellow";



function clearLights() 
document.getElementById('stopLight').style.backgroundColor = "black";
document.getElementById('slowLight').style.backgroundColor = "black";
document.getElementById('goLight').style.backgroundColor = "black";

This is the css code below

body 
font-family: sans-serif;
 

#controlPanel 
float: left;
padding-top: 30px;
 

.button 
background-color: gray;
color: white;
border-radius: 10px;
padding: 20px;
text-align: center;
margin: 90px 40px;
cursor: pointer;


 #traffic-light 
height: 550px;
width: 200px;
float: left;
background-color: #333;
border-radius: 40px;
margin: 30px 0;
padding: 20px;


.bulb 
height: 150px;
width: 150px;
background-color: #111;
border-radius: 50%;
margin: 25px auto;
transition: background 500ms;

This is the html code below

 <!DOCTYPE html>

 <html>
 <head>

 <script src="trafficLights.js" type="text/javascript></script"></script>

 <link href="trafficLight.css" type="text/css" rel="stylesheet">

</head>


 </html>

When I open up the file for the html a blank page is just shown. Chrome is my default browser for my computer

javascript html css

edited Mar 21 at 23:02

asked Mar 21 at 22:51

hannah

274

edited Mar 21 at 23:02

asked Mar 21 at 22:51

hannah

274

edited Mar 21 at 23:02

asked Mar 21 at 22:51

hannah

274

asked Mar 21 at 22:51

hannah

274

asked Mar 21 at 22:51

hannah

274

1

Please add your code

– Jack Bashford
Mar 21 at 22:51

Welcome to Stack Overflow! You're going to need to ask a question that can actually be answered with code. See stackoverflow.com/help/mcve for hints on how to do this.

– Jonathan
Mar 21 at 22:56

1

Your html isn't complete - it's missing the elements e.g. stopLight slowLight goLight...

– obscure
Mar 21 at 23:06

what do I need to include?

– hannah
Mar 21 at 23:13

The definition for all of your html elements you're referencing in your JavaScript code - document.getElementById('goButton') for example.

– obscure
Mar 21 at 23:20

add a comment |

1

Please add your code

– Jack Bashford
Mar 21 at 22:51

Welcome to Stack Overflow! You're going to need to ask a question that can actually be answered with code. See stackoverflow.com/help/mcve for hints on how to do this.

– Jonathan
Mar 21 at 22:56

1

Your html isn't complete - it's missing the elements e.g. stopLight slowLight goLight...

– obscure
Mar 21 at 23:06

what do I need to include?

– hannah
Mar 21 at 23:13

The definition for all of your html elements you're referencing in your JavaScript code - document.getElementById('goButton') for example.

– obscure
Mar 21 at 23:20

Please add your code

– Jack Bashford
Mar 21 at 22:51

Welcome to Stack Overflow! You're going to need to ask a question that can actually be answered with code. See stackoverflow.com/help/mcve for hints on how to do this.

– Jonathan
Mar 21 at 22:56

Your html isn't complete - it's missing the elements e.g. stopLight slowLight goLight...

– obscure
Mar 21 at 23:06

what do I need to include?

– hannah
Mar 21 at 23:13

The definition for all of your html elements you're referencing in your JavaScript code - document.getElementById('goButton') for example.

– obscure
Mar 21 at 23:20

add a comment |

1 Answer
1

active

oldest

votes

I would use a relative container for the background image (the light framing) and a flexbox container to hold the three lights, positioned in the center of that relative box.

I'm using the flex parent to store the state of the light. For example, if the stop button is pressed, the HTML would appear this way:

<div class="lights off stop">
 <div class="light red"></div>
 <div class="light yellow"></div>
 <div class="light green"></div>
</div>

Then, the CSS can "turn on" the active light.

.lights.stop .light.red 
 background-color: red;

enter image description here

Demo

const lightController = document.querySelector(".lights");
const lights = document.querySelectorAll(".change-light");
function clearLights() 
 lightController.className = "lights off";

function handleClick() 
 // Clear lights on any button click
 clearLights();
 
 /* One function handles all the lights by listening for a 
 class name within each button */
 if (this.classList.contains("stop")) 
 lightController.classList.add("stop");
 else if (this.classList.contains("slow")) 
 lightController.classList.add("slow");
 else if (this.classList.contains("go")) 
 lightController.classList.add("go");
 

// Loop through each ligth and bind a click event 
lights.forEach(light => 
 light.addEventListener("click", handleClick);
);

.light-container 
 background-image: url(https://i.postimg.cc/rmDtJD3k/light2.jpg);
 background-repeat: no-repeat;
 background-color: transparent;
 background-size: cover;
 width: 200px;
 height: 235px;
 position: relative;
 margin-bottom: 1em;


.lights 
 position: absolute;
 display: flex;
 flex-direction: column;
 left: 50%;
 transform: translateX(-50%);
 padding-top: 1.7em;


.light 
 border-radius: 50%;
 width: 59px;
 height: 57px;
 transition: 0.5s background-color ease-in-out;
 background-color: #333;


.light:not(:last-child) 
 margin-bottom: 0.85em;


.lights.stop .light.red 
 background-color: red;


.lights.slow .light.yellow 
 background-color: yellow;


.lights.go .light.green 
 background-color: green;


.lights.off .light 
 background-color: #333;


.change-light 
 font-size: 1.2rem;

<div class="light-container">
 <div class="lights">
 <div class="light red"></div>
 <div class="light yellow"></div>
 <div class="light green"></div>
 </div>
</div>
<button class="change-light stop">Stop</button>
<button class="change-light slow">Slow</button>
<button class="change-light go">Go</button>

edited Mar 21 at 23:54

answered Mar 21 at 23:25

Andy Hoffman

10.2k31840

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55290403%2fsimulation-of-a-traffic-light%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

I would use a relative container for the background image (the light framing) and a flexbox container to hold the three lights, positioned in the center of that relative box.

I'm using the flex parent to store the state of the light. For example, if the stop button is pressed, the HTML would appear this way:

<div class="lights off stop">
 <div class="light red"></div>
 <div class="light yellow"></div>
 <div class="light green"></div>
</div>

Then, the CSS can "turn on" the active light.

.lights.stop .light.red 
 background-color: red;

enter image description here

Demo

const lightController = document.querySelector(".lights");
const lights = document.querySelectorAll(".change-light");
function clearLights() 
 lightController.className = "lights off";

function handleClick() 
 // Clear lights on any button click
 clearLights();
 
 /* One function handles all the lights by listening for a 
 class name within each button */
 if (this.classList.contains("stop")) 
 lightController.classList.add("stop");
 else if (this.classList.contains("slow")) 
 lightController.classList.add("slow");
 else if (this.classList.contains("go")) 
 lightController.classList.add("go");
 

// Loop through each ligth and bind a click event 
lights.forEach(light => 
 light.addEventListener("click", handleClick);
);

.light-container 
 background-image: url(https://i.postimg.cc/rmDtJD3k/light2.jpg);
 background-repeat: no-repeat;
 background-color: transparent;
 background-size: cover;
 width: 200px;
 height: 235px;
 position: relative;
 margin-bottom: 1em;


.lights 
 position: absolute;
 display: flex;
 flex-direction: column;
 left: 50%;
 transform: translateX(-50%);
 padding-top: 1.7em;


.light 
 border-radius: 50%;
 width: 59px;
 height: 57px;
 transition: 0.5s background-color ease-in-out;
 background-color: #333;


.light:not(:last-child) 
 margin-bottom: 0.85em;


.lights.stop .light.red 
 background-color: red;


.lights.slow .light.yellow 
 background-color: yellow;


.lights.go .light.green 
 background-color: green;


.lights.off .light 
 background-color: #333;


.change-light 
 font-size: 1.2rem;

<div class="light-container">
 <div class="lights">
 <div class="light red"></div>
 <div class="light yellow"></div>
 <div class="light green"></div>
 </div>
</div>
<button class="change-light stop">Stop</button>
<button class="change-light slow">Slow</button>
<button class="change-light go">Go</button>

edited Mar 21 at 23:54

answered Mar 21 at 23:25

Andy Hoffman

10.2k31840

add a comment |

I would use a relative container for the background image (the light framing) and a flexbox container to hold the three lights, positioned in the center of that relative box.

I'm using the flex parent to store the state of the light. For example, if the stop button is pressed, the HTML would appear this way:

<div class="lights off stop">
 <div class="light red"></div>
 <div class="light yellow"></div>
 <div class="light green"></div>
</div>

Then, the CSS can "turn on" the active light.

.lights.stop .light.red 
 background-color: red;

enter image description here

Demo

const lightController = document.querySelector(".lights");
const lights = document.querySelectorAll(".change-light");
function clearLights() 
 lightController.className = "lights off";

function handleClick() 
 // Clear lights on any button click
 clearLights();
 
 /* One function handles all the lights by listening for a 
 class name within each button */
 if (this.classList.contains("stop")) 
 lightController.classList.add("stop");
 else if (this.classList.contains("slow")) 
 lightController.classList.add("slow");
 else if (this.classList.contains("go")) 
 lightController.classList.add("go");
 

// Loop through each ligth and bind a click event 
lights.forEach(light => 
 light.addEventListener("click", handleClick);
);

.light-container 
 background-image: url(https://i.postimg.cc/rmDtJD3k/light2.jpg);
 background-repeat: no-repeat;
 background-color: transparent;
 background-size: cover;
 width: 200px;
 height: 235px;
 position: relative;
 margin-bottom: 1em;


.lights 
 position: absolute;
 display: flex;
 flex-direction: column;
 left: 50%;
 transform: translateX(-50%);
 padding-top: 1.7em;


.light 
 border-radius: 50%;
 width: 59px;
 height: 57px;
 transition: 0.5s background-color ease-in-out;
 background-color: #333;


.light:not(:last-child) 
 margin-bottom: 0.85em;


.lights.stop .light.red 
 background-color: red;


.lights.slow .light.yellow 
 background-color: yellow;


.lights.go .light.green 
 background-color: green;


.lights.off .light 
 background-color: #333;


.change-light 
 font-size: 1.2rem;

<div class="light-container">
 <div class="lights">
 <div class="light red"></div>
 <div class="light yellow"></div>
 <div class="light green"></div>
 </div>
</div>
<button class="change-light stop">Stop</button>
<button class="change-light slow">Slow</button>
<button class="change-light go">Go</button>

edited Mar 21 at 23:54

answered Mar 21 at 23:25

Andy Hoffman

10.2k31840

add a comment |

I would use a relative container for the background image (the light framing) and a flexbox container to hold the three lights, positioned in the center of that relative box.

I'm using the flex parent to store the state of the light. For example, if the stop button is pressed, the HTML would appear this way:

<div class="lights off stop">
 <div class="light red"></div>
 <div class="light yellow"></div>
 <div class="light green"></div>
</div>

Then, the CSS can "turn on" the active light.

.lights.stop .light.red 
 background-color: red;

enter image description here

Demo

const lightController = document.querySelector(".lights");
const lights = document.querySelectorAll(".change-light");
function clearLights() 
 lightController.className = "lights off";

function handleClick() 
 // Clear lights on any button click
 clearLights();
 
 /* One function handles all the lights by listening for a 
 class name within each button */
 if (this.classList.contains("stop")) 
 lightController.classList.add("stop");
 else if (this.classList.contains("slow")) 
 lightController.classList.add("slow");
 else if (this.classList.contains("go")) 
 lightController.classList.add("go");
 

// Loop through each ligth and bind a click event 
lights.forEach(light => 
 light.addEventListener("click", handleClick);
);

.light-container 
 background-image: url(https://i.postimg.cc/rmDtJD3k/light2.jpg);
 background-repeat: no-repeat;
 background-color: transparent;
 background-size: cover;
 width: 200px;
 height: 235px;
 position: relative;
 margin-bottom: 1em;


.lights 
 position: absolute;
 display: flex;
 flex-direction: column;
 left: 50%;
 transform: translateX(-50%);
 padding-top: 1.7em;


.light 
 border-radius: 50%;
 width: 59px;
 height: 57px;
 transition: 0.5s background-color ease-in-out;
 background-color: #333;


.light:not(:last-child) 
 margin-bottom: 0.85em;


.lights.stop .light.red 
 background-color: red;


.lights.slow .light.yellow 
 background-color: yellow;


.lights.go .light.green 
 background-color: green;


.lights.off .light 
 background-color: #333;


.change-light 
 font-size: 1.2rem;

<div class="light-container">
 <div class="lights">
 <div class="light red"></div>
 <div class="light yellow"></div>
 <div class="light green"></div>
 </div>
</div>
<button class="change-light stop">Stop</button>
<button class="change-light slow">Slow</button>
<button class="change-light go">Go</button>

edited Mar 21 at 23:54

answered Mar 21 at 23:25

Andy Hoffman

10.2k31840

I would use a relative container for the background image (the light framing) and a flexbox container to hold the three lights, positioned in the center of that relative box.

I'm using the flex parent to store the state of the light. For example, if the stop button is pressed, the HTML would appear this way:

<div class="lights off stop">
 <div class="light red"></div>
 <div class="light yellow"></div>
 <div class="light green"></div>
</div>

Then, the CSS can "turn on" the active light.

.lights.stop .light.red 
 background-color: red;

enter image description here

Demo

const lightController = document.querySelector(".lights");
const lights = document.querySelectorAll(".change-light");
function clearLights() 
 lightController.className = "lights off";

function handleClick() 
 // Clear lights on any button click
 clearLights();
 
 /* One function handles all the lights by listening for a 
 class name within each button */
 if (this.classList.contains("stop")) 
 lightController.classList.add("stop");
 else if (this.classList.contains("slow")) 
 lightController.classList.add("slow");
 else if (this.classList.contains("go")) 
 lightController.classList.add("go");
 

// Loop through each ligth and bind a click event 
lights.forEach(light => 
 light.addEventListener("click", handleClick);
);

.light-container 
 background-image: url(https://i.postimg.cc/rmDtJD3k/light2.jpg);
 background-repeat: no-repeat;
 background-color: transparent;
 background-size: cover;
 width: 200px;
 height: 235px;
 position: relative;
 margin-bottom: 1em;


.lights 
 position: absolute;
 display: flex;
 flex-direction: column;
 left: 50%;
 transform: translateX(-50%);
 padding-top: 1.7em;


.light 
 border-radius: 50%;
 width: 59px;
 height: 57px;
 transition: 0.5s background-color ease-in-out;
 background-color: #333;


.light:not(:last-child) 
 margin-bottom: 0.85em;


.lights.stop .light.red 
 background-color: red;


.lights.slow .light.yellow 
 background-color: yellow;


.lights.go .light.green 
 background-color: green;


.lights.off .light 
 background-color: #333;


.change-light 
 font-size: 1.2rem;

<div class="light-container">
 <div class="lights">
 <div class="light red"></div>
 <div class="light yellow"></div>
 <div class="light green"></div>
 </div>
</div>
<button class="change-light stop">Stop</button>
<button class="change-light slow">Slow</button>
<button class="change-light go">Go</button>

const lightController = document.querySelector(".lights");
const lights = document.querySelectorAll(".change-light");
function clearLights() 
 lightController.className = "lights off";

function handleClick() 
 // Clear lights on any button click
 clearLights();
 
 /* One function handles all the lights by listening for a 
 class name within each button */
 if (this.classList.contains("stop")) 
 lightController.classList.add("stop");
 else if (this.classList.contains("slow")) 
 lightController.classList.add("slow");
 else if (this.classList.contains("go")) 
 lightController.classList.add("go");
 

// Loop through each ligth and bind a click event 
lights.forEach(light => 
 light.addEventListener("click", handleClick);
);

.light-container 
 background-image: url(https://i.postimg.cc/rmDtJD3k/light2.jpg);
 background-repeat: no-repeat;
 background-color: transparent;
 background-size: cover;
 width: 200px;
 height: 235px;
 position: relative;
 margin-bottom: 1em;


.lights 
 position: absolute;
 display: flex;
 flex-direction: column;
 left: 50%;
 transform: translateX(-50%);
 padding-top: 1.7em;


.light 
 border-radius: 50%;
 width: 59px;
 height: 57px;
 transition: 0.5s background-color ease-in-out;
 background-color: #333;


.light:not(:last-child) 
 margin-bottom: 0.85em;


.lights.stop .light.red 
 background-color: red;


.lights.slow .light.yellow 
 background-color: yellow;


.lights.go .light.green 
 background-color: green;


.lights.off .light 
 background-color: #333;


.change-light 
 font-size: 1.2rem;

<div class="light-container">
 <div class="lights">
 <div class="light red"></div>
 <div class="light yellow"></div>
 <div class="light green"></div>
 </div>
</div>
<button class="change-light stop">Stop</button>
<button class="change-light slow">Slow</button>
<button class="change-light go">Go</button>

const lightController = document.querySelector(".lights");
const lights = document.querySelectorAll(".change-light");
function clearLights() 
 lightController.className = "lights off";

function handleClick() 
 // Clear lights on any button click
 clearLights();
 
 /* One function handles all the lights by listening for a 
 class name within each button */
 if (this.classList.contains("stop")) 
 lightController.classList.add("stop");
 else if (this.classList.contains("slow")) 
 lightController.classList.add("slow");
 else if (this.classList.contains("go")) 
 lightController.classList.add("go");
 

// Loop through each ligth and bind a click event 
lights.forEach(light => 
 light.addEventListener("click", handleClick);
);

.light-container 
 background-image: url(https://i.postimg.cc/rmDtJD3k/light2.jpg);
 background-repeat: no-repeat;
 background-color: transparent;
 background-size: cover;
 width: 200px;
 height: 235px;
 position: relative;
 margin-bottom: 1em;


.lights 
 position: absolute;
 display: flex;
 flex-direction: column;
 left: 50%;
 transform: translateX(-50%);
 padding-top: 1.7em;


.light 
 border-radius: 50%;
 width: 59px;
 height: 57px;
 transition: 0.5s background-color ease-in-out;
 background-color: #333;


.light:not(:last-child) 
 margin-bottom: 0.85em;


.lights.stop .light.red 
 background-color: red;


.lights.slow .light.yellow 
 background-color: yellow;


.lights.go .light.green 
 background-color: green;


.lights.off .light 
 background-color: #333;


.change-light 
 font-size: 1.2rem;

<div class="light-container">
 <div class="lights">
 <div class="light red"></div>
 <div class="light yellow"></div>
 <div class="light green"></div>
 </div>
</div>
<button class="change-light stop">Stop</button>
<button class="change-light slow">Slow</button>
<button class="change-light go">Go</button>

edited Mar 21 at 23:54

answered Mar 21 at 23:25

Andy Hoffman

10.2k31840

edited Mar 21 at 23:54

answered Mar 21 at 23:25

Andy Hoffman

10.2k31840

answered Mar 21 at 23:25

Andy Hoffman

10.2k31840

answered Mar 21 at 23:25

Andy Hoffman

10.2k31840

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Styjun

1 Answer
1

Demo

Your Answer

Post as a guest

1 Answer
1

1 Answer
1

Demo

Demo

Demo

Demo

Post as a guest

Popular posts from this blog

Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

1 Answer 1

Demo

Your Answer

Sign up or log in

Post as a guest

Post as a guest

1 Answer 1

1 Answer 1

Demo

Demo

Demo

Demo

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

1 Answer
1

1 Answer
1

1 Answer
1