I'm trying to toggle a value using the slider in html, here is what I've done : html file :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script scr="./scripts.js" type="text/javascript"></script>
</head>
<body style="font-family: Calibri; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 100; line-height: 26.4px;">
<div id="myDIV">Hello</div>
<h2> Testing switch:
<label class="switch">
<input id="status" type="checkbox" checked>
<span class="slider round" ></span>
</h2>
</body>
and here the scripts.js code I'm using :
function myFunction() {
var x = document.getElementById("myDIV");
var isChecked = document.getElementById("status");
if (isChecked.checked ==true) {
x.innerHTML = "Swapped text!";
} else {
x.innerHTML = "Hello";
}
}
I don't get what I'm missing, but moving the slide doesn't change the text! any idea how may I solve this? thanks in advance !
update
the slider is based on w3-schools Example
Aucun commentaire:
Enregistrer un commentaire