使用 document.getElementById( "id" ).innerHTML 更改按钮的状态

Question

我有一个按钮，一开始会显示某个文本，但当我单击它时，我希望它显示其他内容。

这是html输入：

<label class="button">
<input type="checkbox" id="control" onchange="changeState();">
<span class="button1" style="color: #4CAF50">Pull</span>
</label>

这是我的功能：

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");
}
}

当我使用<button></button>而不是<input>时，它曾经起作用，但我需要将输入用于其他内容。你知道我必须改变什么才能让它发挥作用吗？我对HTML和JavaScript真的很陌生，所以我现在有点一无所知。

Answer 1

输入只是一个复选框。如前所述，没有innerHTML。这是你想要改变的跨度。

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>

Answer 2

这里有一个没有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>

您可能需要更进一步，使用类和classList.toggle()来处理fontcolor=。