Been working on a home automation dashboard and I need some help. How do I get the image to change when the button is toggled ON and OFF. I have a sun svg for on and moon svg for off.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<!-- Add font from Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<!-- Link CSS style sheet to html document -->
<link rel="stylesheet" href="style.css">
<!-- Link JavaScript file to html document -->
<script src="mqttws31.js"></script>
<script src="dashboard.js"></script>
</head>
<body>
<div class="header">
<h1>Home Automation Dashboard</h1>
</div>
<hr>
<div id="messages"></div>
<div id="status"></div>
<hr>
<ul class="dashboard">
<ol class="b">
<li class="dashboard_item kitchen">
<img src="./moon.svg" width="40px" height="40px" alt="">
<h4>Kitchen</h4>
<p id="kitchen-light">OFF</p>
<button id="kitchen-btn">Toggle</button>
</li>
<ol class="b">
<li class="dashboard_item frontdoor" >
<img src="./door-closed.svg" width="40px" height="40px" alt="">
<h4>Front Door</h4>
<p>CLOSED</p>
</li>
</ul>
</body>
</html>
<!-- variable in js -->
var KitchenState = true;
var el = document.getElementById("kitchen-btn");
el.addEventListener('click', function() {
document.getElementById("kitchen-light").innerHTML = KitchenState ? "ON" : "OFF";
KitchenState = !KitchenState;
});
Been trying examples online with no luck so far.
Give some id attribute to the image and then change it in the same way like you are changing the innerHTML. For image you just need to change the src accordingly.
<script>
var KitchenState = true;
var el = document.getElementById("kitchen-btn");
el.addEventListener('click', function() {
document.getElementById("kitchen-light").innerHTML = KitchenState ? "ON" : "OFF";
document.getElementById('toggle-img').src = KitchenState ? './sun.svg' : './moon.svg'
KitchenState = !KitchenState;
});
</script>
<img src="./moon.svg" width="40px" id="toggle-img" height="40px" alt="">
use .setAttribute or .src
add id kitchen-icon to tag <img> icon
and try code:
var KitchenState = true;
var el = document.getElementById("kitchen-btn");
el.addEventListener('click', function() {
document.getElementById("kitchen-light").innerHTML = KitchenState ? "ON" : "OFF";
document.getElementById('kitchen-icon').src = KitchenState ? './moon.svg' : './sun.svg'
KitchenState = !KitchenState;
})
From the point of view of your question, I think you need the following code
let btnAll = document.getElementByTagName('button')
let conAll = document.getElementByClassName('content')
let btnAllLen = btnAll.length
//Create a callback function for the click event of each button
for (let i = 0; i < btnAllLen; i++) {
!(function(n) { // Register click events
btnAll[n].addEventListener('click', function() {
for (let j = 0; j < btnAlllen; j++) {
btn[j].className = ""
conAll[j].style.display = "none"
}
this.className = "active"
conAll[n].style.display = "block"
})
})(i)
}
.main {
text-align: center;
}
button:focus {
outline: none;
}
nav {
margin-top: 30px;
box-sizing: border-box;
}
button {
background: white;
border: none;
height: 36px;
line-height: 36px;
width: 80px;
text-align: center;
border: 1px solid lightgray;
border-radius: 4px;
cursor: pointer;
}
nav>button:not(:first-child) {
margin-left: 15px;
}
.active {
background: black;
color: white;
}
.content {
margin-top: 40px;
}
.content>p {
display: none;
}
<div class="main">
<nav>
<button class="active">content 1</button>
<button>content 2</button>
<button>content 3</button>
<button>content 4</button>
</nav>
<div class="content">
<p style="display: block;">content1</p>
<p>content2</p>
<p>content3</p>
<p>content4</p>
</div>
</div>
Ok so it does add, but not right
So my vars think that they are text but I want just the nums, so I can add them together.
How do I do this?
a fiddle to see whats so wrong
<html>
<head>
<title>Nose Clicker</title>
<style>
body{
background-image:url("https://i.pinimg.com/originals/66/27/70/6627703d20110ad2e8877fab5fc102b9.jpg");
}
#root-SuperGloabalVar1{
color: red;
font-size: 150px;
padding: 0px;
}
#var-wrapper{
opacity: 0%;
}
</style>
</head>
<body>
<div id = 'var-wrapper'>
<h1 class = 'vars' id = 'perclick'>
<---here is the first addend--->
1
</h1>
</div>
<---here the second one--->
<h1 id = 'root-SuperGloabalVar1'>0</h1>
<img onclick = '
<---get number 1--->
var v = getElementById("root-SuperGloabalVar1");
<---get number 2--->
var a = getElementById("perclick");
<---adding--->
var w = v.innerHTML+=a.innerHTML;
<---replacing and then it shows "01"--->
v.innerHTML(parrseint(a.innerHTML + v));
'
src = 'https://www.pngitem.com/pimgs/m/155-1559954_cartoon-nose-images-cartoon-nose- image-png-transparent.png'>
</body>
</html>
I didn't completely understand your question can you explain it a bit more and detailed but if you want to parse text into number then use
var x = a.innerHTML;
Number(x)
Edit:
And a proper way to use number increment and display it is like this:
(you don't need to save your integer in an element you can use a javascript variable)
let clicks = 0;
function countClicks() {
clicks++;
const display = document.getElementById("display");
display.innerHTML = clicks;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div style="background: red; width: 100px; height: 100px;" onclick="countClicks();">
</div>
<div style="font-size: 30px;" id="display">0</div>
</body>
</html>
Example to use in onclick callback:
<body>
<script>var clicks = 0;</script>
<div style="background: red; width: 100px; height: 100px;"
onclick=
"
clicks++;
const display = document.getElementById('display');
display.innerHTML = clicks;
">
</div>
<div style="font-size: 30px;" id="display">0</div>
</body>
if( localStorage.getItem("color") == "black" ) {
var classlist = document.getElementById("body").classList;
clasList.add("bdark");
classList = document.getElementById("theader").classList;
classList.add("hdark");
classList = document.getElementById("sh").classList;
classList.add("shh");
var hs = document.getElementById("hs").classList;
document.getElementById("hs").style.display = "block";
}
function myFunction() {
var classlist = document.getElementById("body").classList;
clasList.toggle("bdark");
classList = document.getElementById("theader").classList;
classList.toggle("hdark");
classList = document.getElementById("sh").classList;
classList.toggle("shh");
var hs = document.getElementById("hs");
if (hs.style.display === "block") {
hs.style.display = "none";
} else {
hs.style.display = "block";
}
var color;
if(localStorage.getItem("color") == "black") {
color = "black";
localStorage.setItem("color",color)
}
.bdark {
background-color: #333;
color: white;
}
.hdark {
background-color: black;
color: white;
}
.shh {
display: none;
}
.hs {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body id="body" class="light">
<p id="theader">Click the "Try it" button to toggle between adding and removing the "mystyle" class name of the DIV element:</p>
<button id="button" onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
<div id="aaas">
<div id="sh" class="sh">☾</div>
<div id="hs" class="hs">☀</div>
</div>
</body>
</html>
i want this code to onclick toggle class and when i refresh the page those toggled class remain same as they were before reloading the page with localstorage. so can someone check what's wrong with this code. help me with something similar/alternative to this one. thanks for reading this.
Details:-
i want this code to work as (onclick class change + saved with cokies/localstorage/or anything) so whenever i refresh or reopen the page it would be same class as it was when i left. or some alternative code that works same.
There are variable spelling mistakes in your code (declared as classlist and used as clasList)
missed closed brackets for the if condition in myFunction.
updated logic for storing color value.
I updated the above changes in your code.
I have added code here also you can check output in it.
Updated code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body id="body" class="light">
<p id="theader">Click the "Try it" button to toggle between adding and removing the "mystyle" class name of the DIV element:</p>
<button id="button" onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
<div id="aaas">
<div id="sh" class="sh">☾</div>
<div id="hs" class="hs">☀</div>
</div>
</body>
</html>
.bdark {
background-color: #333;
color: white;
}
.hdark {
background-color: black;
color: white;
}
.shh {
display: none;
}
.hs {
display: none;
}
if (localStorage.getItem("color") === "black") {
var classlist = document.getElementById("body").classList;
classlist.add("bdark");
classlist = document.getElementById("theader").classList;
classlist.add("hdark");
classlist = document.getElementById("sh").classList;
classlist.add("shh");
document.getElementById("hs").style.display = "block";
}
function myFunction() {
var classlist = document.getElementById("body").classList;
classlist.toggle("bdark");
classlist = document.getElementById("theader").classList;
classlist.toggle("hdark");
classlist = document.getElementById("sh").classList;
classlist.toggle("shh");
var hs = document.getElementById("hs");
if (hs.style.display === "block") {
hs.style.display = "none";
} else {
hs.style.display = "block";
}
if (localStorage.getItem("color") === "black") {
localStorage.setItem("color", "white");
} else {
localStorage.setItem("color", "black");
}
}
So little bit stuck here, I have several buttons that I want to do separate actions. For example of someone clicks the colour green it changes the paragraph text colour to green, I accomplished the first one but I can't seem to work others, what's the correct way to do it?
//JS:
function myFunction() {
var p = document.getElementById("paragraph"); // get the paragraph
document.getElementById("paragraph").style.color = "green";
var p = document.getElementById("paragraph"); // get the paragraph
document.getElementById("Bluecolour").style.color = "blue";
}
<!doctype html>
<html lang="en">
<head>
<title> Change Paratext </title>
<meta charset="utf-8">
<script src="task2.js"></script>
<style>
#paragraph {
padding: 10px;
margin-bottom: 10px;
background-color: silver;
border: 1px dashed black;
width: 90%; /* you can adjust this on Firefox if needed */
height: 200px;
overflow: hidden;
margin-top: 10px;
}
</style>
</head>
<body>
<h1> Ali Rizwan </h1>
<p id="paragraph"> Box changes text based on what colour is clicked <br>
<!-- add your buttons here. All buttons should be in one paragraph -->
</p>
<p id="buttons">
<button type="button" onclick="myFunction()" id="GreenColour">Green</button><!-- Changes text to Green -->
<button type="button" onclick="myFunction()" id="Bluecolour">Blue</button><!-- Changes text to Blue -->
<button type="button" onclick="myFunction()" id="Mono">Mono</button> <!-- Changes text to Mono -->
<button type="button" onclick="myFunction()" id="Sans Serif">Sans Serif</button> <!-- Changes text to Sans Serif -->
<button type="button" onclick="myFunction()" id="Serif">Serif</button> <!-- Changes text to Serif -->
<button type="button" onclick="myFunction()" id="SizeAdd">Size++</button> <!-- This button increases size by 1 every time its clicked -->
<button type="button"onclick="myFunction()" id="SizeMinus">Size--</button> <!-- This button decreases size by 1 every time its clicked -->
</p>
</div>
</body>
</html>
Your myFunction() doesn't know what it need to do when it has been called.
Try this entry level code, simply declare few function to change the text color:
function blue() {
var p = document.getElementById("paragraph"); // get the paragraph
p.style.color= 'blue'
}
function green() {
var p = document.getElementById("paragraph"); // get the paragraph
p.style.color= 'green'
}
function mono(){
var p = document.getElementById("paragraph"); // get the paragraph
p.style.fontFamily = "monospace"
}
<!doctype html>
<html lang="en">
<head>
<title> Change Paratext </title>
<meta charset="utf-8">
<script src="task2.js"></script>
<style>
#paragraph {
padding: 10px;
margin-bottom: 10px;
background-color: silver;
border: 1px dashed black;
width: 90%; /* you can adjust this on Firefox if needed */
height: 100px;
overflow: hidden;
margin-top: 10px;
}
</style>
</head>
<body>
<h1> Ali Rizwan </h1>
<p id="paragraph"> Box changes text based on what colour is clicked <br>
<!-- add your buttons here. All buttons should be in one paragraph -->
</p>
<p id="buttons">
<button type="button" onclick="green()">Green</button><!-- Changes text to Green -->
<button type="button" onclick="blue()">Blue</button><!-- Changes text to Blue -->
<button type="button" onclick="mono()">Mono</button><!-- Changes text to monospace-->
</p>
</div>
</body>
</html>
There are different ways to do that,
name distinct function name for distinct button id and set the background according to that
call the same function but this time inside the function pass a parameter of button ID
button type="button" onclick="myFunction(this.id)" id="GreenColour">Green
and the function is:
function myFunction(id) {
if(id=="GreenColour")
document.getElementById("paragraph").style.color="green"; // get the paragraph
//document.getElementById("paragraph").style.color = "green";
else if(id=="BlueColour")
document.getElementById("paragraph").style.color=blue; // get the paragraph
//document.getElementById("Bluecolour").style.color = "blue";
}
You could separate the logic into different functions and pass values as arguments to them:
const paragraph = document.getElementById("paragraph");
let fontSize = 1;
function setStyle(style, value) {
paragraph.style[style] = value;
}
function incrementSize(value) {
fontSize += value
paragraph.style.fontSize = `${fontSize}em` ;
}
<!doctype html>
<html lang="en">
<head>
<title> Change Paratext </title>
<meta charset="utf-8">
<script src="task2.js"></script>
<style>
#paragraph {
padding: 10px;
margin-bottom: 10px;
background-color: silver;
border: 1px dashed black;
width: 90%; /* you can adjust this on Firefox if needed */
height: 200px;
overflow: hidden;
margin-top: 10px;
}
</style>
</head>
<body>
<h1> Ali Rizwan </h1>
<p id="paragraph"> Box changes text based on what colour is clicked <br>
<!-- add your buttons here. All buttons should be in one paragraph -->
</p>
<p id="buttons">
<button type="button" onclick="setStyle('color', 'green')" id="GreenColour">Green</button><!-- Changes text to Green -->
<button type="button" onclick="setStyle('color', 'blue')" id="Bluecolour">Blue</button><!-- Changes text to Blue -->
<button type="button" onclick="setStyle('font-family', 'monospace')" id="Mono">Mono</button> <!-- Changes text to Mono -->
<button type="button" onclick="setStyle('font-family', 'sans-serif')" id="Sans Serif">Sans Serif</button> <!-- Changes text to Sans Serif -->
<button type="button" onclick="setStyle('font-family', 'serif')" id="Serif">Serif</button> <!-- Changes text to Serif -->
<button type="button" onclick="incrementSize(+0.1)" id="SizeAdd">Size++</button> <!-- This button increases size by 1 every time its clicked -->
<button type="button"onclick="incrementSize(-0.1)" id="SizeMinus">Size--</button> <!-- This button decreases size by 1 every time its clicked -->
</p>
</div>
</body>
</html>
Updated code using SWITCH case
//JS:
function myFunction(btnColor) {
var p = document.getElementById("paragraph"); // get the paragraph
switch(btnColor){
case 'green':
document.getElementById("paragraph").style.color = "green";
break;
case 'blue':
document.getElementById("paragraph").style.color = "blue";
break;
case 'mono':
document.getElementById("paragraph").style.color = "mono";
break;
case 'sansserif':
document.getElementById("paragraph").style.fontFamily = "Sans Serif";
break;
case 'serif':
document.getElementById("paragraph").style.fontFamily = "serif";
break;
case 'sizeadd':
var el = document.getElementById('paragraph');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style);
el.style.fontSize = (fontSize + 1) + 'px';
document.getElementById("paragraph").style.fontSize = "serif";
break;
case 'sizeminus':
var el = document.getElementById('paragraph');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style);
el.style.fontSize = (fontSize - 1) + 'px';
break;
}
}
#paragraph {
padding: 10px;
margin-bottom: 10px;
background-color: silver;
border: 1px dashed black;
width: 90%; /* you can adjust this on Firefox if needed */
height: 20px;
overflow: hidden;
margin-top: 10px;
}
<!doctype html>
<html lang="en">
<body>
<h1> Ali Rizwan </h1>
<p id="paragraph"> Box changes text based on what colour is clicked <br>
<!-- add your buttons here. All buttons should be in one paragraph -->
</p>
<p id="buttons">
<button type="button" onclick="myFunction('green')" id="GreenColour">Green</button><!-- Changes text to Green -->
<button type="button" onclick="myFunction('blue')" id="Bluecolour">Blue</button><!-- Changes text to Blue -->
<button type="button" onclick="myFunction('mono')" id="Mono">Mono</button> <!-- Changes text to Mono -->
<button type="button" onclick="myFunction('sansserif')" id="Sans Serif">Sans Serif</button> <!-- Changes text to Sans Serif -->
<button type="button" onclick="myFunction('serif')" id="Serif">Serif</button> <!-- Changes text to Serif -->
<button type="button" onclick="myFunction('sizeadd')" id="SizeAdd">Size++</button> <!-- This button increases size by 1 every time its clicked -->
<button type="button"onclick="myFunction('sizeminus')" id="SizeMinus">Size--</button> <!-- This button decreases size by 1 every time its clicked -->
</p>
</div>
</body>
</html>
the easiest way is to create function with parameter like myFunction(name, value)
var fontSize = 12;
function myFunction(name, value) {
var p = document.getElementById("paragraph");
if (value == 'SizeAdd') {
fontSize += 2;
value = fontSize + 'px';
}
if (value == 'SizeMinus') {
fontSize -= 2;
value = fontSize + 'px';
}
p.style[name] = value;
}
<p id="paragraph"> Box changes text based on what colour is clicked <br>
<!-- add your buttons here. All buttons should be in one paragraph -->
</p>
<p id="buttons">
<button type="button" onclick="myFunction('color', 'green')">Green</button>
<button type="button" onclick="myFunction('color', 'blue')">Blue</button>
<button type="button" onclick="myFunction('fontFamily', 'Mono')">Mono</button>
<button type="button" onclick="myFunction('fontFamily', 'Sans-Serif')">Sans Serif</button>
<button type="button" onclick="myFunction('fontFamily', 'Serif')">Serif</button>
<button type="button" onclick="myFunction('fontSize', 'SizeAdd')">Size++</button>
<button type="button" onclick="myFunction('fontSize', 'SizeMinus')">Size--</button>
</p>
First of all, for caching reasons, it's best to use external CSS and JavaScript. Just make sure you change your CSS and JavaScript file names every time you update the code when you go live. Also, it's a best practice to separate your HTML, CSS, and JavaScript.
Here is some code showing you how to change colors. It should be easy to see that you can just change the paraColor argument, following the design pattern below, to get the results you seek.
//<![CDATA[
/* js/external.js */
var doc, bod, htm, M, I, S, Q, paraColor; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body; htm = doc.documentElement;
M = function(tag){
return doc.createElement(tag);
}
I = function(id){
return doc.getElementById(id);
}
S = function(selector, within){
var w = within || doc;
return w.querySelector(selector);
}
Q = function(selector, within){
var w = within || doc;
return w.querySelectorAll(selector);
}
var para = I('paragraph'), pS = para.style;
paraColor = function(color){
pS.color = color;
}
I('greenColor').addEventListener('click', function(){
paraColor('green');
});
I('blueColor').addEventListener('click', function(){
paraColor('blue');
});
}); // load end
//]]>
/* css/external.css */
html,body{
padding:0; margin:0;
}
.main{
width:980px; margin:0 auto;
}
#paragraph{
height:100px; background-color:silver; padding:10px; border:1px dashed black;
margin:10px 0; overflow:hidden;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Paratext</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script src='js/external.js'></script>
</head>
<body>
<div class='main'>
<h1>Ali Rizwan</h1>
<p id='paragraph'>Box changes text based on what color is clicked</p>
<p id='buttons'>
<input type='button' id='greenColor' value='Green' />
<input type='button' id='blueColor' value='Blue' />
</p>
</div>
</body>
</html>
Here is the full version of all buttons working, you can use switch case so you can use the same code for multiple buttons. I have used switch case
function myFunction(actionType,actionValue,currentButton) {
var increaseDecreaseFactor = 5;
switch (actionType) {
case 'color':
document.getElementById("paragraph").style.color = actionValue;
currentButton.style.color = actionValue;
break;
case 'increaseFont':
txt = document.getElementById("paragraph");
style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
currentSize = parseFloat(style);
txt.style.fontSize = (currentSize + increaseDecreaseFactor) + 'px';
break;
case 'decreaseFont':
txt = document.getElementById("paragraph");
style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
currentSize = parseFloat(style);
txt.style.fontSize = (currentSize - increaseDecreaseFactor) + 'px';
break;
case 'changeFont':
document.getElementById("paragraph").style.fontFamily = actionValue;
break;
default:
break;
}
}
#paragraph {
padding: 10px;
margin-bottom: 10px;
background-color: silver;
border: 1px dashed black;
width: 90%; /* you can adjust this on Firefox if needed */
height: 200px;
overflow: hidden;
margin-top: 10px;
}
<h1> Ali Rizwan </h1>
<p id="paragraph"> Box changes text based on what colour is clicked <br>
<!-- add your buttons here. All buttons should be in one paragraph -->
</p>
<p id="buttons">
<button type="button" onclick="myFunction('color','green',this)" id="GreenColour">Green</button><!-- Changes text to Green -->
<button type="button" onclick="myFunction('color','blue',this)" id="Bluecolour">Blue</button><!-- Changes text to Blue -->
<button type="button" onclick="myFunction('increaseFont','size++',this)" id="SizeAdd">Size++</button> <!-- This button increases size by 1 every time its clicked -->
<button type="button"onclick="myFunction('decreaseFont','size--',this)" id="SizeMinus">Size--</button> <!-- This button decreases size by 1 every time its clicked -->
<button type="button" onclick="myFunction('changeFont','monospace',this)" id="Mono">Mono</button> <!-- Changes text to Mono -->
<button type="button" onclick="myFunction('changeFont','Sans-Serif',this)" id="Sans Serif">Sans Serif</button> <!-- Changes text to Sans Serif -->
<button type="button" onclick="myFunction('changeFont','Serif',this)" id="Serif">Serif</button> <!-- Changes text to Serif -->
</p>
</div>
First add below link in your head section.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You can do above things by this way :
$("button").click(function() {
var Id = $(this).attr('id');
if(Id == 'GreenColour'){
$("#"+Id).css('color','green');
}elseif(Id == 'Bluecolour'){
$("#"+Id).css('color','blue');
}elseif(...){
.....
}else(...){
.....
}
});
and so on. You can perform your different operation based on its ids in if else.
You can do it like this
<button type="button" onclick="myFunction()" id="GreenColour" c_name="green">Green</button><!-- Changes text to Green -->
<button type="button" onclick="myFunction()" id="Bluecolour" c_name="blue">Blue</button><!-- Changes text to Blue -->
function myFunction(evn) {
var color = event.currentTarget.getAttribute('c_name');
document.getElementById("paragraph").style.color = color;
event.currentTarget.style.color = color;
}
set the color name in div as attribute and read that attribute in calling function and use it.
So with your help and others that see this I learned this, essentially the button onclick name can be used in JS to change the text colour, define the button id, create a variable and then default JS to change the colour of paragraph.
HTML:
<!doctype html>
<html lang="en">
<head>
<title> Change Paratext </title>
<meta charset="utf-8">
<script src="task2.js"></script>
<style>
#paragraph {
padding: 10px;
margin-bottom: 10px;
background-color: silver;
border: 1px dashed black;
width: 90%; /* you can adjust this on Firefox if needed */
height: 100px;
overflow: hidden;
margin-top: 10px;
}
</style>
</head>
<body>
<h1> Ali Rizwan </h1>
<p id="paragraph"> Box changes text based on what colour is clicked <br>
<!-- add your buttons here. All buttons should be in one paragraph -->
</p>
<p id="buttons">
<button type="button" onclick="green()">Green</button><!-- Changes text to Green -->
<button type="button" onclick="blue()">Blue</button><!-- Changes text to Blue -->
<button type="button" onclick="mono()">Mono</button><!-- Changes text to monospace-->
<button type="button" onclick="sansserif()">Sans Serif</button><!-- Changes text to Sans Serif-->
<button type="button" onclick="serif()">Serif</button><!-- Changes text to Serif-->
</p>
</div>
</body>
</html>
JS:
function blue() {
var p = document.getElementById("paragraph"); // get the paragraph
p.style.color= 'blue'
}
function green() {
var p = document.getElementById("paragraph"); // get the paragraph
p.style.color= 'green'
}
function mono(){
var p = document.getElementById("paragraph"); // get the paragraph
p.style.fontFamily = 'monospace'
}
function sansserif(){
var p = document.getElementById("paragraph"); // get the paragraph
p.style.fontFamily = 'sans-serif'
}
function serif(){
var p = document.getElementById("paragraph"); // get the paragraph
p.style.fontFamily = 'serif'
}
I'm trying to build "hit the image" game where few images are displayed on page while "covered" and one image (which image is changing) is "open".
My idea was to start a while loop on user choice that will create a random id (each card has an id) and send it to another function. That part works fine I think.
Function number 2 should "flip" the cards for 1 second and then cover them again.
In the console I can see that the "flip" class is being added but not removed, but on the page all of the cards are "covered".
I think the problem is that the first function is sending random numbers too fast while the flip function has a timeout set. Can anyone confirm it?
Any ideas on how to solve?
The code is:
Please don't mind the ugly button
var currentCard;
var audioWin = new Audio('sound/win.mp3');
var idNum="a"
//gets string id and removes "flipped" class from it
function flip(idNum){
console.log("in flip");
currentCard=document.getElementById(idNum);
currentCard.classList.add('flipped');
setTimeout(function () {
currentCard.classList.remove('flipped');
}, 1000)
}
//plays sounds if users hits img while card is "open"
function ifClicked(currentCard){
if(currentCard.classList.contains('flipped')){
audioWin.play();
}
else{
//put another short sound
}
}
//creates random nums in range 1-4
function randCard(){
while(true){
var secretNum=Math.floor((Math.random()*4)+1);
idNum=secretNum.toString();
console.log(idNum);
flip(idNum);
//document.getElementById(idNum);
}
}
.card{
background-color: pink;
height: 165px;
width: 165px;
float: left;
margin: 5px;
}
.card img {
position: absolute;
}
.flipped .back {
display: none;
}
.button{
width: 60px;
height: 60px;
background-color: green;
float: left;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My App</title>
<link rel="stylesheet" href="t.css" />
</head>
<body>
<div id="container">
<div id ="1" class="card" onclick="ifClicked(this);">
<img src="img/cards/1.png">
<img class="back" src="img/cards/back.png">
</div>
<div id="2"class="card" onclick="ifClicked(this);">
<img src="img/cards/2.png">
<img class="back" src="img/cards/back.png">
</div>
<div id="3" class="card" onclick="ifClicked(this);">
<img src="img/cards/3.png">
<img class="back" src="img/cards/back.png">
</div>
<div id="4" class="card" onclick="ifClicked(this);">
<img src="img/cards/4.png">
<img class="back" src="img/cards/back.png">
</div>
</div>
<div class="button" onclick="randCard();">here</div>
</body>
<script src="j.js"></script>
</html>
yeah, I think you are on to it, I would remove the loop from this function:
function randCard(){
var secretNum=Math.floor((Math.random()*4)+1);
idNum=secretNum.toString();
console.log(idNum);
flip(idNum);
}
Then call randCard() again once the shown card times out and is turned back over:
function flip(idNum){
console.log("in flip");
currentCard=document.getElementById(idNum);
currentCard.classList.add('flipped');
setTimeout(function () {
currentCard.classList.remove('flipped');
randCard();
}, 1000)
}
And then once the DOM loads, call randCard() to start the cycle:
//PLace this right after your global variable declarations
document.addEventListener("DOMContentLoaded", function(){
//Initial call of randCard()
randCard();
}