<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>If else else if</title>
<style>
.lightBulb {
height: 200px;
width: 200px;
background-color: grey;
}
img {
border-radius: 180px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="lightBulb" id="bulb">
</div>
<button onclick="onOff()">Av/På</button>
<script>
let on = false;
function onOff() {
if (on != true) {
document.getElementById('bulb').style.backgroundColor = 'yellow';
document.getElementById('bulb').innerHTML = /*HTML*/ `
<img src="https://getacademy.moodlecloud.com/pluginfile.php/5208/mod_label/intro/bulb.png">
`
on = true;
} else {
document.getElementById('bulb').style.backgroundColor = 'grey';
document.getElementById('bulb').innerHTML = 'Lyset er av :-(';
on = false;
}
}
</script>
</body>
</html>