Develop Reference

How can I make 2 functions onclick work in JS?

I try to create a simple traffic light system for a project however once i use the onclick="maakGroen();maakRood();"> the 2nd function does not work....
This is my code
<input type="button" name="Licht" value="Licht" onclick="maakGroen();maakRood();">
<script>
var Licht = document.getElementById('Licht');
function maakRood() {
Licht.src = "stop1.png";
}
function maakGroen() {
Licht.src = "stop2.png";
}

Use setTimeout() to delay the second function so you can see the first function's change.
<input type="button" name="Licht" value="Licht" onclick="maakGroen();setTimeout(maakRood, 1000);">

Try using an event listeners, in the example below, you can replace querySelector with getElementByID; more info on the developer site or you can find tutorials on w3schools
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener.
document.querySelector(".elementname").addEventListener("click", doStuff)
function doStuff() {
maakGroen();
maakRood();
}
If you don't like this, then you can simply make a new function with all the code from maakGroen();maakRood(); pasted into it.

You can create a third function with both functions in it and use a timeout just like #Barmar said.

Are you looking for something like that ?
(your question is really unclear!)
const trafficLights = document.querySelectorAll('.traffic-light')
trafficLights.forEach(Tl => Tl.addEventListener('click', permuteTLcolor ))
function permuteTLcolor()
{
if (this.classList.contains('red')) { this.classList.replace('red','green'); return }
if (this.classList.contains('green')) { this.classList.replace('green','yellow'); return }
if (this.classList.contains('yellow')) { this.classList.replace('yellow','red'); return }
this.classList.add('red')
}
.traffic-light {
display : inline-block;
width : 2.6em;
height : 8em;
border-radius : .7em;
background : #1c1641;
margin : 1em;
padding-top : .3em;
cursor : pointer;
}
.traffic-light:hover {
background : #372c69;
}
span {
display : block;
width : 2em;
height : 2em;
border-radius : 50%;
margin : .4em .3em;
box-sizing : border-box;
border : .2em #97b2cc42 solid;
}
.traffic-light > span:nth-of-type(1) { background: #441111; }
.traffic-light > span:nth-of-type(2) { background: #36360d; }
.traffic-light > span:nth-of-type(3) { background: #0b270b; }
.traffic-light.red > span:nth-of-type(1) { background: #fc1515; border: 0; }
.traffic-light.yellow > span:nth-of-type(2) { background: #f3f314; border: 0; }
.traffic-light.green > span:nth-of-type(3) { background: #28e728; border: 0; }
<div class="traffic-light red">
<span></span><span></span><span></span>
</div>
<div class="traffic-light green">
<span></span><span></span><span></span>
</div>
<div class="traffic-light yellow">
<span></span><span></span><span></span>
</div>
<div class="traffic-light red">
<span></span><span></span><span></span>
</div>

Dark Mode not working during loading time

I'm trying to make a dark mode toggle button which can toggle between dark and light mode on click, User preference is also stored using localStorage. The user should manually press the button to toggle to other mode. If the user's choice is dark mode, Every page will be in dark mode and it doesn't turn to light mode on refreshing. Everything looks fine upto now but the real issue comes with loading time. The load time of a page is nearly 1 second and in that time, Page appears to be in light mode even if user's choice is dark mode. I don't want that to happen. I want loading time section in dark mode if user's choice is dark.
This is my current code:
<script>
const body = document.querySelector('body');
function toggleDark() {
if (body.classList.contains('dark')) {
body.classList.remove('dark');
localStorage.setItem("theme", "light");
} else {
body.classList.add('dark');
localStorage.setItem("theme", "dark");
}
}
if (localStorage.getItem("theme") === "dark") {
body.classList.add('dark');
}
</script>
<style>
body {background-color: #ffffff}
body.dark {background-color: #000000; color: #ffffff}
</style>
<button class="dark-mode" id="btn-id" onclick="toggleDark()"></button>

Another alternative is to load the script in the <head> element, and toggle the class on html element
To do so, you use document.documentElement.classList as that is the HTML element
Then change your CSS to
html.dark body {}
etc .. the class selector on HTML
html body {background-color: #ffffff}
html.dark body {background-color: #000000; color: #ffffff}
<script>
const body = document.querySelector('body');
function toggleDark() {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
//localStorage.setItem("theme", "light");
} else {
document.documentElement.classList.add('dark');
//localStorage.setItem("theme", "dark");
}
}
//if (localStorage.getItem("theme") === "dark") {
document.documentElement.classList.add('dark');
//}
</script>
<button class="dark-mode" id="btn-id" onclick="toggleDark()">DARK</button>
Due to restrictions, localStorage is unavailable on stack overflow - uncomment those lines to see it work
Or - see https://jsfiddle.net/e9zg2p4c/

Store it to backend database. Then when serving HTML content put proper class/style for your elements. This will remove flickering between loading times:
<!DOCTYPE html>
<html>
<head>
<style>
/* Use Less/Sass for better management */
.theme.light {
background-color: #ffffff;
}
.theme.dark {
background-color: #000000; color: #ffffff;
}
</style>
</head>
<body class="theme <?= $user->themeName; ?>">
</body>
</html>

A little more tricky to toggle AND have a default theme
Note the localStorage calls do not work here at SO
working example
In the code below replace
const theme = "dark"; with
localStorage.getItem("theme") || "light"
and uncomment // localStorage.setItem("theme", body.classList.contains("dark") ? "light" : "dark");
on your server
.dark { background-color: black; color: white; }
<!DOCTYPE html>
<html>
<head>
<style>
.theme {
background-color: white;
color: black;
}
</style>
<script>
const theme = "dark"; // localStorage.getItem("theme") || "theme"
if (theme === "dark") {
const st = document.createElement("style");
st.id="darkStyle";
st.innerText = `body.theme { background-color: black; color: white; }`;
document.querySelector("head").appendChild(st);
}
window.addEventListener("load", function() {
document.getElementById("toggleTheme").addEventListener("click", function() {
const body = document.querySelector("body");
const darkStyle = document.getElementById("darkStyle");
if (darkStyle) {
darkStyle.remove(); // remove stylesheet now we know what the user wants
body.classList.remove("theme");
}
const theme = body.classList.contains("theme");
body.classList.toggle('theme',!theme);
body.classList.toggle('dark',theme);
// localStorage.setItem("theme", theme ? "light" : "dark"); // uncomment on your server
});
})
</script>
</head>
<body class="theme">
Here is the body
<button id="toggleTheme" type="button">Toggle theme</button>
</body>
</html>

Given that the only real difference between light and dark is the colours, why not simply create css variables for each colour you are going to use and use javascript to change the values of the variables. This way, once you have defined the classes using the variables in the appropriate places, changing the variable values changes the classes automatically. The choice of "dark" and "light" can be stored in whatever way is available to you - localStorage, cookies or backend etc - and you simply set the appropriate colours to the css variables when the page is being loaded. There's no need for separate definitions for each class and, as a developer, it allows you to quickly test the colour schemes without having to manually change every class one by one.
function changeTheme(t) {
if (t == "dark") {
document.documentElement.style.setProperty("--backgroundcolour", "black");
document.documentElement.style.setProperty("--fontcolour", "white");
} else {
document.documentElement.style.setProperty("--backgroundcolour", "white");
document.documentElement.style.setProperty("--fontcolour", "black");
}
}
:root {
--backgroundcolour:black;
--fontcolour:white;
}
body {
background-color:var(--backgroundcolour);
color:var(--fontcolour);
}
span {
background-color:var(--backgroundcolour);
color:var(--fontcolour);
}
div {
background-color:var(--backgroundcolour);
color:var(--fontcolour);
}
table {
background-color:var(--backgroundcolour);
color:var(--fontcolour);
}
<button onclick="changeTheme('dark');">Use dark theme</button><button onclick="changeTheme('light');">Use light theme</button>
<hr>
<span>Text in a span</span>
<hr>
<div>Text in a div</div>
<hr>
<table>
<tbody>
<tr><td>Text in a table</td></tr>
</tbody>
</table>

If you want to use checkbox, this solution for you.
if you want the value to remain unchanged, use localStorage. If you want a dark mode where you have values ​​disappear when you close a tab or browser, use sessionStorage.
const check = document.getElementById('chk');
check.addEventListener('change', () => {
document.body.classList.toggle('dark');
localStorage.darkMode=!localStorage.darkMode;
});
window.onload=function() {
if(localStorage.darkMode) document.body.classList.toggle('dark');
}
#modeSwitcher{
margin: 5% 50%;
}
#modeSwitcher .checkbox {
opacity: 0;
position: absolute;
}
#modeSwitcher .checkbox:checked + .label .ball{
transform: translateX(35px);
}
#modeSwitcher .checkbox:checked + .label .ball::after{
content: '';
position: absolute;
background-color: #0A0E27;
width: 13px;
height: 13px;
border-radius: 50%;
bottom: 50%;
left: -5%;
transform: translateY(50%);
}
#modeSwitcher .label {
background-color: #0A0E27;
border-radius: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px;
margin: 0;
position: relative;
height: 16px;
width: 50px;
transform: scale(1.5);
}
#modeSwitcher .label .fa-moon{
color:#0A0E27 ;
}
#modeSwitcher .label .ball {
background-color: #FDC503;
border-radius: 50%;
position: absolute;
top: 3px;
left: 3px;
height: 20px;
width: 20px;
transform: translateX(0px);
transition: transform 0.2s linear;
}
body{
background-color: #fff;
}
body.dark{
background-color: black;
}
<div id="modeSwitcher">
<input type="checkbox" class="checkbox" id="chk" />
<label class="label" for="chk">
<i class="fas fa-moon"></i>
<div class="ball"></div>
</label>
</div>

Page load Function (js) is not working when Web page loads

I have been trying to find out how to call my function that is inside a function that is started on page load to set darkmode.
If anyone could help me with this I would be very grateful.
Here is my js file:
(function() {
var darkSwitch = document.getElementById("darkSwitch");
if (darkSwitch) {
initTheme();
darkSwitch.addEventListener("change", function(event) {
resetTheme();
});
function initTheme() {
var darkThemeSelected =
localStorage.getItem("darkSwitch") !== null &&
localStorage.getItem("darkSwitch") === "dark";
darkSwitch.checked = darkThemeSelected;
darkThemeSelected
? document.body.setAttribute("data-theme", "dark")
: document.body.removeAttribute("data-theme");
}
function resetTheme() {
if (darkSwitch.checked) {
document.body.setAttribute("data-theme", "dark");
localStorage.setItem("darkSwitch", "dark");
} else {
document.body.removeAttribute("data-theme");
localStorage.removeItem("darkSwitch");
}
}
}
})();
The js file comes from this GitHub:
https://github.com/coliff/dark-mode-switch

I think you try when the page is load is in dark mode.
here is the solution of your problem.
Here its Documentation :
Here's a link! This code is from Codepen.
HTML:
<script>
// Include this script near the top of your html
var app = document.getElementsByTagName("BODY")[0];
if (localStorage.lightMode == "dark") {
app.setAttribute("data-light-mode", "dark");
}
</script>
<h1>
Dark Mode Toggle
</h1>
<p>Uses localStorage to store and apply the set light mode when page is loaded</p>
<button onclick="toggle_light_mode()">
Toggle Light Mode
</button>
CSS
body {
transition: background-color 0.3s;
text-align: center;
font-family: sans-serif;
padding-top: 3em;
}
h1 {
font-weight: normal;
}
button {
padding: 1em;
font-size: 1em;
background: #000;
color: #fff;
border: none;
cursor: pointer;
transition: .3s;
}
button:hover {
opacity:.5;
}
body[data-light-mode="dark"] {
background-color: #000;
color: #eee;
}
body[data-light-mode="dark"] button {
background-color: #fff;
color: #000;
}
JS
function toggle_light_mode() {
var app = document.getElementsByTagName("BODY")[0];
if (localStorage.lightMode == "dark") {
localStorage.lightMode = "light";
app.setAttribute("data-light-mode", "light");
} else {
localStorage.lightMode = "dark";
app.setAttribute("data-light-mode", "dark");
}
console.log("lightMode = " + localStorage.lightMode);
}

Persistent dark mode while navigating pages with a dark/light mode toggling option

I've been trying to implement persistent dark mode on web pages, as when a user navigates through pages, their choice will be remembered. Also, I added a toggle dark/light mode button, for better user experience. Thus I came up with this code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#002f30">
<style>
body {
padding: 25px;
color: black;
font-size: 25px;
}
.btn {
background: white;
border: 1px solid #10101c;
color: #10101c;
border-radius:0.5rem;
}
a {
text-decoration: none;
color: #006262;
border-bottom: 1px dotted #192841;
font-style: italic;
}
body.dark {
background-color: #10101c;
color: #778899;
}
body.dark .btn {
background: #10101c;
color: #708090;
border: 1px solid #002e43;
border-radius:0.5rem;
}
body.dark a {
text-decoration: none;
color: #778899;
border-bottom: 1px dotted #d5c4a1;
font-style: italic;
}
</style>
</head>
<body>
<h1 style="margin-top: 0">page 1</h1>
<h2 style="margin-top: 0">Toggle Dark/Light Mode</h2>
<p>Click the button to toggle between dark and light mode for this page.</p>
<p>This is a link to a second page click</p>
<button id="mode" class="btn" onclick="toggle()">Toggle dark mode</button>
<script>
function toggle() {
// This bit is for the toggling between dark and light mode
let element = document.body;
element.classList.toggle("dark");
// This part is for toggling the text inside the button
var toggle = document.getElementById("mode");
if (toggle.innerHTML === "Toggle dark mode") {
toggle.innerHTML = "Dark mode it is";
}
else {
toggle.innerHTML = "Toggle dark mode"; }
// This part I copy pasted from one of Kevin Powell's videos on darkmode switch, and maintaining persistence but still couldn't figure out howbit works...
// check for saved 'darkMode' in localStorage
let darkMode = localStorage.getItem('darkMode');
const darkModeToggle = document.querySelector('#mode');
const enableDarkMode = () => {
// 1. Add the class to the body
document.body.classList.add('dark');
// 2. Update darkMode in localStorage
localStorage.setItem('darkMode', 'enabled');
}
const disableDarkMode = () => {
// 1. Remove the class from the body
document.body.classList.remove('dark');
// 2. Update darkMode in localStorage
localStorage.setItem('darkMode', null);
}
// If the user already visited and enabled darkMode
// start things off with it on
if (darkMode === 'enabled') {
enableDarkMode();
}
// When someone clicks the button
darkModeToggle.addEventListener('click', () => {
// get their darkMode setting
darkMode = localStorage.getItem('darkMode');
// if it not current enabled, enable it
if (darkMode !== 'enabled') {
enableDarkMode();
// if it has been enabled, turn it off
} else {
disableDarkMode();
}
});
// This is the solved part I asked earlier, it chages the meta theme color with the dark or light mode change
var meta = document.querySelector("meta[name=theme-color]");
if (meta.getAttribute("content") === "#002f30") {
console.log(meta.getAttribute("content"));
meta.setAttribute("content", "#10101c");
} else {
console.log(meta.getAttribute("content"));
meta.setAttribute("content", "#002f30");
}
}
</script>
</body>
</html>
While running the code, everything works fine except for the persistence part. If dark mode is enabled, and I navigate to a second page of the same html code, it turns back to default light mode. Am I doing the code right?
P.S. I'm a novice/beginner in Javascript

// Using a local variable since stack overflow doesn't allow localstorage operations for security purposes.
let storage = {darkMode: "disabled"}
function userPreferesDarkMode() {
//return localStorage.getItem("darkMode") === "enabled";
return storage.darkMode === "enabled";
}
function setThemePreference(value) {
// localStorage.setItem("darkMode", value || "disabled");
storage.darkMode = value || "disabled";
}
const enableDarkMode = () => {
// 1. Add the class to the body
document.body.classList.add("dark");
};
const disableDarkMode = () => {
// 1. Remove the class from the body
document.body.classList.remove("dark");
};
function setTheme() {
// If the user already visited and enabled darkMode
// start things off with it on
if (userPreferesDarkMode()) {
enableDarkMode();
} else {
disableDarkMode();
}
const appDiv = document.getElementById("app");
appDiv.innerHTML = `<h1>Dark mode: ${userPreferesDarkMode()}</h1>`;
}
function bootstrap() {
const darkModeToggleButton = document.querySelector("#mode");
darkModeToggleButton.addEventListener("click", () => {
if (userPreferesDarkMode()) {
setThemePreference("disabled");
disableDarkMode();
} else {
setThemePreference("enabled");
enableDarkMode();
}
const appDiv = document.getElementById("app");
appDiv.innerHTML = `<h1>Dark mode: ${userPreferesDarkMode()}</h1>`;
});
setTheme();
}
document.addEventListener("DOMContentLoaded", function(event) {
// Your code to run since DOM is loaded and ready
bootstrap()
});
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
<style>
body {
padding: 25px;
color: black;
font-size: 25px;
}
.btn {
background: white;
border: 1px solid #10101c;
color: #10101c;
border-radius:0.5rem;
}
a {
text-decoration: none;
color: #006262;
border-bottom: 1px dotted #192841;
font-style: italic;
}
body.dark {
background-color: #10101c;
color: #778899;
}
body.dark .btn {
background: #10101c;
color: #708090;
border: 1px solid #002e43;
border-radius:0.5rem;
}
body.dark a {
text-decoration: none;
color: #778899;
border-bottom: 1px dotted #d5c4a1;
font-style: italic;
}
</style>
</head>
<body>
<div id="app">hello</div>
<button id="mode" class="btn">Toggle dark mode</button>
</body>
</html>
You have wrapped the checking of stored preference in the toggle method. So when you navigate to the second page, it doesn't read the value from localstorage until toggle method is invoked.
Adding a StackBlitz demo

is there any better way to do this js code?

I am making these panels to be resized to fit screen height as I click 'this' element. I feel like I hard coded those javascript, and I believe there must be better way. But couldn't really sort it out.
when one panel is clicked, its size is going to get bigger, and rest of pannels gonna get smaller
I would very much appreciate any suggestion of it.
I've tried making this function reusable, but then couldn't really come up with better solution as I am a begginer.
const panels = document.querySelectorAll('.panel');
const panelsArr = Array.from(panels);
panelsArr.forEach(panel => panel.addEventListener('click',getCurrentName))
function getCurrentName(element) {
const panel1 = document.querySelector('.panel1');
const panel2 = document.querySelector('.panel2');
const panel3 = document.querySelector('.panel3');
const panel4 = document.querySelector('.panel4');
console.log(this);
if(this) {
this.classList.toggle('active');
if(this === panel1) {
panel2.classList.toggle('inactive');
panel3.classList.toggle('inactive');
panel4.classList.toggle('inactive');
} else if (this === panel2) {
panel1.classList.toggle('inactive');
panel3.classList.toggle('inactive');
panel4.classList.toggle('inactive');
} else if (this === panel3) {
panel1.classList.toggle('inactive');
panel2.classList.toggle('inactive');
panel4.classList.toggle('inactive');
} else if (this === panel4) {
panel1.classList.toggle('inactive');
panel2.classList.toggle('inactive');
panel3.classList.toggle('inactive');
}
}
}
.panel {
background-color: #002712;
box-shadow: inset 0 0 0 .5rem rgba(255,255,255,0.1);
min-height: 22.5vh;
color: #fff;
text-align: center;
font-size: 2rem;
background-size: cover;
background-position: center;
line-height: 8rem;
transition:
min-height .5s linear,
font-size .2s linear .5s,
line-height .2s linear .5s;
}
.panel1 { background-image: url("../images/steake.png"); }
.panel2 { background-image: url("../images/sundayRoast.png"); }
.panel3 { background-image: url("../images/image1(1).png"); }
.panel4 { background-image: url("../images/cannonbury.png"); }
.active {
min-height: 37vh;
line-height: 15rem;
font-size: 2.3rem;
}
.inactive {
min-height: 15vh;
font-size: 1.2rem;
}
<main>
<section class="intro">
<div class="intro-panels">
<section class="panel panel1">
<p>most original,</p>
</section>
<section class="panel panel2">
<p>best beer,</p>
</section>
<section class="panel panel3">
<p>grilled food</p>
</section>
<section class="panel panel4">
<p>Islington</p>
</section>
</div>
</section>
</main>
I expect simplified javascript code to achieve the same goal.
Here's how I've sorted it out by your answer. Thank you for your help guys.
const panels = document.querySelectorAll('.panel');
const panelsArr = Array.from(panels);
panelsArr.forEach(panel => panel.addEventListener('click', getCurrentName))
function getCurrentName(element) {
if(this) {
panelsArr.forEach(panel => panel.classList.toggle('inactive'));
this.classList.toggle('inactive');
this.classList.toggle('active');
}
}

You could mark them all as inactive and re-mark the current one as active.
Array.from(document.querySelectorAll('.panel')).forEach(element => {
element.classList.remove('active');
element.classList.add('inactive')
});
this.classList.remove('inactive');
this.classList.add('active');
You could also filter out this from the array, but it wouldn't change the outcome.

You can toggle inactive class on all class elements but undo it again on the target element:
const panels = document.querySelectorAll('.panel');
const panelsArr = Array.from(panels);
panelsArr.forEach(panel => panel.addEventListener('click',getCurrentName))
function getCurrentName(element) {
console.log(this);
if(this) {
// Toggle inactive on all elements
for (i = 0; i < panels.length; ++i) {
panels[i].classList.toggle('inactive');
}
//But undo for selected element again
this.classList.toggle('inactive');
this.classList.toggle('active');
}
}

Try something like this. Event delegation
document.addEventListener('click', (e) => {
if(e.target.matches('.sizable')) {
document.querySelectorAll('.sizable').forEach(div => {
div.classList.remove('active');
div.classList.add('inactive');
});
e.target.classList.add('active');
}
});
.sizable {
display: inline-block;
border: 1px solid black;
margin: 5px;
}
.inactive {
width: 50px;
height: 50px;
}
.active {
width: 150px;
height: 150px;
}
<div class="sizable">Stuff</div>
<div class="sizable">Stuff</div>
<div class="sizable">Stuff</div>
<div class="sizable">Stuff</div>
<div class="sizable">Stuff</div>
<div class="sizable">Stuff</div>