Traffic light using javascript - javascript

I want create traffic light controller.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>isiqfor</title>
<link rel="stylesheet" href="style.css">
</head>
<body onload="timer;">
<div id="isiqfor">
<div class="green"></div>
<div class="yellow"></div>
<div class="red"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS code:
#isiqfor{
border: 10px solid black;
padding: 10px 3px;
width: 50px;
}
#isiqfor>div{
width:50px;
height: 50px;
border-radius: 50%;
opacity: .3;
}
.green{
background-color: green;
}
.yellow{
background-color: yellow;
}
.red{
background-color: red;
}
And JS file:
function myFun () {
// body...
var green=document.getElementsByClassName("green")[0];
var red=document.getElementsByClassName("red")[0];
var yellow=document.getElementsByClassName("yellow")[0];
green.style.opacity=1;
setTimeout(function () {
/* body... */
green.style.opacity=.3;
red.style.opacity=.3;
yellow.style.opacity=1;
},5000);
setTimeout(function () {
/* body... */
green.style.opacity=.3;
red.style.opacity=1;
yellow.style.opacity=.3;
},7000);
setTimeout(function () {
/* body... */
green.style.opacity=1;
red.style.opacity=.3;
yellow.style.opacity=.3;
},12000);
}
var timer = setInterval(function () {
/* body... */
myFun()
},13000);
But problem is when page loads it must wait 13 second for beginning traffic light.How can solve this problem? I want when page loads green light has switched.


Have you tried calling myFun straight away after your timer is set? See the call to myFun added to the bottom of the following code:
var timer = setInterval(function () {
/* body... */
myFun()
},13000);
myFun();//Call 'myFun' straight away...


I created a simple traffic light system! Try this one.
I used jquery to simplify the attribute selection.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Traffic Lights</title>
</head>
<body>
<p>Demonstrate traffic lights system</p>
<div id="div1" style="width:80px;height:80px;background-color:white;border: 1px solid #000;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:white;border: 1px solid #000;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:white;border: 1px solid #000;"></div>
</body>
<script>
$(document).ready(function () {
var state = 0;
setInterval(function () {
// state 0 > STOP
// state 1 > READY
// state default > GO
switch (state) {
case 0:
state = 1;
$('#div3').css({ 'background-color': 'white' });
$('#div1').css({ 'background-color': 'red' });
break;
case 1:
state = 3
$('#div1').css({ 'background-color': 'white' });
$('#div2').css({ 'background-color': 'yellow' });
break;
default:
state = 0;
$('#div2').css({ 'background-color': 'white' });
$('#div3').css({ 'background-color': 'green' });
}
}, 2000);
});
</script>
</html>

Related

Why doesn't jQuery function toggleClass() work?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jquery/jquery.js"></script>
<style type="text/css" rel="stylesheet">
#btn {
background: green;
color: #fff;
padding: 15px;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<script>
$(() => {
$("#btn").click(() => {
if ($("#btn").hasClass("green")) {
$("#btn").css("backgroundColor", "red");
}
else if ($("#btn").hasClass("red")) {
$("#btn").css("backgroundColor", "green");
}
});
});
</script>
<button id="btn">Button</button>
</body>
</html>
I want the button to change its color either to red if it's green or to green if it's red. So I use toggleClass() to implement that.
Question: why doesn't it work?

It is almost certainly working but there are no CSS rules for the class "background" in the code you posted. The function is for adding/removing an entry from the class list of an element, not for directly manipulating style object properties.
If you do switch from .toggleClass() to .css(), you'll find that switching a property from one value to another immediately will have no visible effect. The browser will effectively ignore the first update.

Your are change class name using toggle not the rule within the class. But you can iverride it by adding inline style, like:
$("#btn").css("background", "red");
$(() => {
$("#btn").click(function () {
const bgColor = this.style.backgroundColor;
$(this).css("backgroundColor", bgColor === 'green' ? "red" : "green");
});
});
#btn {
color: #fff;
padding: 15px;
font-size: 24px;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn" style="background-color:green;">Button</button>

It is perfectly correct to use the .toggleClass() method...
But the argument is a string of space separated classnames.
And, of course, you have to define those class rules in your style sheet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--script src="../jquery/jquery.js"></script-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css" rel="stylesheet">
#btn {
/*background: green;*/
color: #fff;
padding: 15px;
font-size: 24px;
font-weight: bold;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<script>
$(() => {
$("#btn").click(() => {
$("#btn").toggleClass("red green");
});
});
</script>
<button id="btn" class="green">Button</button>
</body>
</html>

If statement in javascript not responding to array elements

6 boxes are declared as array elements.
I assigned an if statement to alert "correct" if the box matching the RGB color of array[2] is clicked and an else statement to alert "wrong" if it does not match the RGB color that is in array element[2].
Everything seems correct but now any colour I click alerts "wrong" which is not meant to be. Because box 3 which is contained in [2] is meant to alert "correct".
Please help me out as I can figure out why it is not displaying "correct" even when I click on the right box which is assigned to [2].
Please how do I go about
this help?
// toggle button-----------------------------------------------------------------------------------------------------------------------------
var click = document.querySelector('button')
function change () {
document.body.classList.toggle('body')
}
click.addEventListener('click', change)
// grid coloursm------------------------------------------------------------------------------------------------------------------------------
var colors = [
'rgb(255,0,0)',
'rgb(255,255,0)',
'rgb(25,0,255)',
'rgb(25,255,203)',
'rgb(250,0,0)',
'rgb(0,255,100)',
]
// picked color****************************************************
var picked = colors[4]
var colourDisplay = document.getElementById('colorDisplay')
colourDisplay.textContent = picked
// select grids****************************************************
var square = document.querySelectorAll('.square')
// add var colors to var square using array************************
for (var i = 0; i < square.length; i++) {
// add initial listeners to square
square[i].style.background = colors[i]
// add clicked listeners to square
square[i].addEventListener('click', function () {
var clickedColor = this.style.background;
if(clickedColor === picked){
alert('correct');
} else {
alert('wrong');
}
});
}
body{
background: #232323;
}
.body{
background-color: rgb(45, 174, 206);
}
.square{
width: 30%;
background: chocolate;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#con{
max-width: 660px;
margin: 0 auto;
}
h1{
color: cornsilk;
margin: 0 auto;
}
<!DOCTYPE html>
<!-- this game was developed by alabo -->
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Game project</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="game.css" />
</head>
<body>
<h1> colour <span id="colorDisplay">RGB</span> color game</h1>
<div id="con">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<button>click me</button>
</body>
<script src="game.js"></script>
</html>

Well i found the issue in about 30 seconds by adding a console.log in the click event like this:
square[i].addEventListener('click', function () {
var clickedColor = this.style.background;
console.log(clickedColor + ' VS ' + picked);
if(clickedColor === picked){
alert('correct');
} else {
alert('wrong');
}
});
The result when clicking on the fourth box was rgb(250, 0, 0) VS rgb(250,0,0).
So the problem is that the result of this.style.background; is rgb(250, 0, 0) while your array has the color defined as rgb(250,0,0), notice the spacing. So simply fixing your colors array spacing will fix your issue.
And here is the working example:
// toggle button-----------------------------------------------------------------------------------------------------------------------------
var click = document.querySelector('button');
function change () {
document.body.classList.toggle('body');
}
click.addEventListener('click', change);
// grid coloursm------------------------------------------------------------------------------------------------------------------------------
var colors = [
'rgb(255, 0, 0)',
'rgb(255, 255, 0)',
'rgb(25, 0, 255)',
'rgb(25, 255, 203)',
'rgb(250, 0, 0)',
'rgb(0, 255, 100)',
];
// picked color****************************************************
var picked = colors[4];
var colourDisplay = document.getElementById('colorDisplay');
colourDisplay.textContent = picked;
// select grids****************************************************
var square = document.querySelectorAll('.square');
// add var colors to var square using array************************
for (var i = 0; i < square.length; i++) {
// add initial listeners to square
square[i].style.background = colors[i] ;
// add clicked listeners to square
square[i].addEventListener('click', function () {
var clickedColor = this.style.background;
if(clickedColor === picked){
alert('correct');
} else {
alert('wrong');
}
});
}
body{
background: #232323;
}
.body{
background-color: rgb(45, 174, 206);
}
.square{
width: 30%;
background: chocolate;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#con{
max-width: 660px;
margin: 0 auto;
}
h1{
color: cornsilk;
margin: 0 auto;
}
<!-- this game was developed by alabo -->
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Game project</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="game.css" />
</head>
<body>
<h1> colour <span id="colorDisplay">RGB</span> color game</h1>
<div id="con">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<button>click me</button>
</body>
<script src="game.js"></script>
</html>

The Problem is easy to determine if you use some console.log().
You will see that this.style.background contains more information and not only the background-color.
To solve this problem I've changed it to this.style.backgroundColor but that doesn't completly fix it. You have to remove the spacebars. I did that by using this.style.backgroundColor.split(" ").join("")
// toggle button-----------------------------------------------------------------------------------------------------------------------------
var click = document.querySelector('button')
function change () {
document.body.classList.toggle('body')
}
click.addEventListener('click', change)
// grid coloursm------------------------------------------------------------------------------------------------------------------------------
var colors = [
'rgb(255,0,0)',
'rgb(255,255,0)',
'rgb(25,0,255)',
'rgb(25,255,203)',
'rgb(250,0,0)',
'rgb(0,255,100)',
]
// picked color****************************************************
var picked = colors[4]
var colourDisplay = document.getElementById('colorDisplay')
colourDisplay.textContent = picked
// select grids****************************************************
var square = document.querySelectorAll('.square')
// add var colors to var square using array************************
for (var i = 0; i < square.length; i++) {
// add initial listeners to square
square[i].style.background = colors[i]
// add clicked listeners to square
square[i].addEventListener('click', function () {
var clickedColor = this.style.backgroundColor.split(" ").join("");
if(clickedColor == picked){
alert('correct');
} else {
alert('wrong');
}
});
}
body{
background: #232323;
}
.body{
background-color: rgb(45, 174, 206);
}
.square{
width: 30%;
background: chocolate;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#con{
max-width: 660px;
margin: 0 auto;
}
h1{
color: cornsilk;
margin: 0 auto;
}
<!DOCTYPE html>
<!-- this game was developed by alabo -->
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Game project</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="game.css" />
</head>
<body>
<h1> colour <span id="colorDisplay">RGB</span> color game</h1>
<div id="con">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<button>click me</button>
</body>
<script src="game.js"></script>
</html>

You have problems in your spacing of rbg(255,0,0). If you console.log(this.style.background) you'll notice that the value is rgb(255, 0, 0) with spaces after the ,. I've also changed one of the values in colors[] from rbg(250, 0, 0) to rbg(255, 0, 0) since I think it's a typo.
// toggle button-----------------------------------------------------------------------------------------------------------------------------
var click = document.querySelector('button')
function change () {
document.body.classList.toggle('body')
}
click.addEventListener('click', change)
// grid coloursm------------------------------------------------------------------------------------------------------------------------------
var colors = [
'rgb(255, 0, 0)',
'rgb(255, 255, 0)',
'rgb(25, 0, 255)',
'rgb(25, 255, 203)',
'rgb(255, 0, 0)',
'rgb(0, 255, 100)',
]
// picked color****************************************************
var picked = colors[4]
var colourDisplay = document.getElementById('colorDisplay')
colourDisplay.textContent = picked
// select grids****************************************************
var square = document.querySelectorAll('.square')
// add var colors to var square using array************************
for (var i = 0; i < square.length; i++) {
// add initial listeners to square
square[i].style.background = colors[i]
// add clicked listeners to square
square[i].addEventListener('click', function () {
var clickedColor = this.style.background;
// console.log("Background: " + this.style.background);
// console.log("Picked: " + picked);
if(clickedColor === picked){
alert('correct');
} else {
alert('wrong');
}
});
}
body{
background: #232323;
}
.body{
background-color: rgb(45, 174, 206);
}
.square{
width: 30%;
background: chocolate;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#con{
max-width: 660px;
margin: 0 auto;
}
h1{
color: cornsilk;
margin: 0 auto;
}
<!DOCTYPE html>
<!-- this game was developed by alabo -->
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Game project</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="game.css" />
</head>
<body>
<h1> colour <span id="colorDisplay">RGB</span> color game</h1>
<div id="con">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<button>click me</button>
</body>
<script src="game.js"></script>
</html>

The two variables do not have same string. The picked color is a RGB without space between digits and clicked color has a string with space. Javascript compares with each and every character. That's why it is failing.
Clicked color: "rgb(250, 0, 0)"
Picked : "rgb(250,0,0)".
Check this fiddle. I have modified your code.
https://fiddle.jshell.net/c3rmLjgj/

One of Multiple Scripts in HTML Sheet Not Working

I am trying to have multiple scripts run in my html sheet, and it seems to not be working. All the other scripts work except for the script for the blinking function. I don't see what the problem is. Can you find the issue with my code? Thanks in advance!
Here is my code below:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: coral;
color: white;
}
.text2{
color: white;
width: 100px;
float: right;
padding-top: 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").on('click',function(){
$("p").hide();
$(".text2").hide()
$('body').css("background", "black");
});
});
</script>
<script>
//blink
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
</script>
</head>
<body>
<p>This is a paragraph.</p>
</div>
<div class="text2">
-- : --
</div>
<button class="btn1">online</button>
</body>
</html>

The second script must be inside a JQuery function.
$(document).ready(function(){
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
});

The second script's contents should be in the document ready handler otherwise the code attempts to locate and work with the .text2 element before that element has been parsed into memory.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: coral;
color: white;
}
.text2{
color: white;
width: 100px;
float: right;
padding-top: 10px;
}
</style>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").on('click',function(){
$("p").hide();
$(".text2").hide()
$('body').css("background", "black");
});
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
} else {
element.show();
}
shown = !shown;
}
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<div class="text2">-- : --</div>
<button class="btn1">online</button>
</body>
</html>

material refresh click event not working

i use this plugin material-refresh to refresh page it's working fine but when the page is scrolled at the top "TOP = 0" click wont fire and when i scroll it down by 1px it's work normally here an image enplane the problem better
Here the test code
var opts_stream = {
nav: '.page_header',
scrollEl: '.page_content',
onBegin: function() {
console.log("start");
},
onEnd: function() {
console.log("Done");
}
};
mRefresh(opts_stream);
.page_header {
width: 100%;
height: 100px;
background-color: red;
text-align: center;
}
.page_content {
width: 100%;
height: 1200px;
background-color: rgb(190, 190, 190);
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>sdasd</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://github.com/lightningtgc/material-refresh/blob/master/src/css/material-refresh.styl">
<script src="https://raw.githubusercontent.com/lightningtgc/material-refresh/master/src/js/main.js"></script>
</head>
<body>
<div class="page_header">
Header
</div>
<div class="page_content">
<button type="button" name="button" onclick="alert('test');">Test Button</button>
</div>
</body>
</html>
NOTE : You need to run browser in mobile mood from chrome console to get this plugin to run

in line 304 in touchEnd function in material-refresh.js remove e.preventDefault();
:)

How to handle onclick event of a button?

In the below code,
<!DOCTYPE html>
<html>
<head>
<title>Button events</title>
<meta charset="UTF-8">
<style type="text/css">
button{
background-color: #00FFFF;
border: 2px solid orange;
border-radius: 10px;
width: 60px;
height: 30px;
color:white;
}
</style>
</head>
<body>
<script type="text/javascript">
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.background-color = "#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.background-color="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
</script>
<button type="button" name="LikeUnlike">Like</button>
</body>
</html>
error is thrown at line document.body.lastElementChild.style.background-color = "#FF9966";. Error is Invalid left-hand side in assignment.
How do I resolve this error?
Note: yet to learn JQuery

First of all you need to use element.style.backgroundColor instead of element.style.background-color.
Here is a list of the JS equivalent of CSS attributes.
Your second problem is that your script executed before the <button> is loaded, thus making the script the current lastElementChildof body.
You can solve this by wrapping your script in window.onload:
(Also, selecting your button with document.body.lastElementChild is bound to give you errors since you most likely at some point will add something after the button)
<!DOCTYPE html>
<html>
<head>
<title>Button events</title>
<meta charset="UTF-8">
<style type="text/css">
button {
background-color: #00FFFF;
border: 2px solid orange;
border-radius: 10px;
width: 60px;
height: 30px;
color: white;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var likeButton = document.getElementById("like-button");
likeButton.onclick = changeColor;
function changeColor() {
if (likeButton.innerHTML == "Like") {
likeButton.style.backgroundColor = "#FF9966";
likeButton.innerHTML = "Unlike";
} else {
likeButton.style.backgroundColor = "#00FFFF";
likeButton.innerHTML = "Like";
}
}
}
</script>
<button type="button" name="LikeUnlike" id="like-button">Like</button>
</body>
</html>

background-color is not a valid JavaScript identifier. For setting it with DOM style object, it should be backgroundColor in camel case.
More info on DOM style object at http://www.w3schools.com/jsref/dom_obj_style.asp

Check out my demo
JS
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.backgroundColor = "#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.backgroundColor ="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}

I think you should use document.body.lastElementChild.style["background-color"] to set color for element

not background-color but backgroundColor . Try this and see if works
document.body.lastElementChild.style.backgroundColor = "#FF9966";
the total code:
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.backgroundColor = "#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.backgroundColor ="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}

You use this code. It is working fine.
<!DOCTYPE html>
<html>
<head>
<title>Button events</title>
<meta charset="UTF-8">
<style type="text/css">
button{
background-color: #00FFFF;
border: 2px solid orange;
border-radius: 10px;
width: 60px;
height: 30px;
color:white;
}
</style>
</head>
<body>
<script type="text/javascript">
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.backgroundColor =
"#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.backgroundColor="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
</script>
<button type="button" name="LikeUnlike" onclick="changeColor
()">Like</button>
</body>
</html>

You can use Jquery for assign or remove a css class, to add color to your button, with this code:
<script>
$(function() {
$('button').on('click', function() {
$(this).toggleClass('other-color');
});
});
</script>
the toggleClass function is to add and remove a css class,
"othercolor" is your class css with the styles to your button.
Include jquery with this script before </body> and before the code above:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
$('button').on('click', function() {
$(this).toggleClass('other-color');
});
});
</script>
I hope it helps you.

Categories