Working with radio buttons in JavaScript
by danielkwood
HTML
<html>
<head>
<title>Working with radio buttons in JavaScript</title>
<script src="script.js"></script>
</head>
<body onload="load();">
<label>Dark mode<input type="radio" name="mode" value ="dark" id="dark"/></label><br>
<label>Light mode<input type="radio" name="mode" value ="light" id="light" checked/></label><br>
<button id="saveButton">Save</button>
</body>
</html>
JavaScript
function load(){
document.querySelector("#saveButton").addEventListener("click", switchMode);
}
function switchMode(){
if(document.querySelector('#dark').checked == true){
darkMode();
}
else{
lightMode();
}
}
function darkMode(){
document.querySelector("body").style.backgroundColor = "black";
document.querySelector("body").style.color = "white";
}
function lightMode(){
document.querySelector("body").style.backgroundColor = "white";
document.querySelector("body").style.color = "black";
}