I have a button that display a certain text at first, but when i click it i would like it to display something else.
Here is the html input:
<label class="button">
<input type="checkbox" id="control" onchange="changeState();">
<span class="button1" style="color: #4CAF50">Pull</span>
</label>
and here is my function:
function changeState() {
if (active == false) {
active = true;
start_timer();
var myStop = "Stop"
document.getElementById("control").innerHTML = myStop.fontcolor("#f00");
} else {
active = false;
var myPull = "Pull"
document.getElementById("control").innerHTML = myPull.fontcolor("#4CAF50");
}
}
When i used <button></button> instead of <input> it used to work but i need to use the input for something else. any idea what i would have to change to get it to work? I'm really new to HTML and JavaScript so I'm sort of clueless right now.
the input is just a checkbox. As mentioned, there's no innerHTML. It's the span you want to change.
let button = document.getElementById('button1')
function changeState() {
let checked = document.getElementById('control').checked
if (checked) {
let myStop = "Stop"
button.innerText = myStop;
button.style.color='red'
}else{
let myPull = "Pull"
button.innerText = myPull;
button.style.color="#4CAF50";
}
}<label class="button">
<input type="checkbox" id="control" onchange="changeState();">
<span id="button1" style="color: #4CAF50">Pull</span>
</label>Here is a solution without the span:
function changeState(e) {
if (e.target.checked) {
e.target.nextElementSibling.style.color = "#f00"
e.target.nextElementSibling.textContent = "Stop"
} else {
e.target.nextElementSibling.style.color = "#4CAF50"
e.target.nextElementSibling.textContent = "Pull"
}
}
document.querySelector("#control").onchange = changeState;<input type="checkbox" id="control" name="control">
<label for="control" class="button" style="color: #4CAF50">
Pull
</label>You may want to go further and use a class and classList.toggle() to handle the fontcolor.