如何改变用户选择其他选项时按钮的onclick值？

Question

刚接触javascript，我需要改变用户选择选项5时按钮的onclick值。默认情况下

我有这样的代码。

function optionCheck(that) {
if (that.value == "op2") {
alert("Note: Thank You. Option 2!");
}
else if (that.value == "op5") {
    document.getElementById("oKay").onclick = "optionFive()";    
}
else {
    document.getElementById("keycheck").style.display = "none";
}
}

HTML:

<select id="selections" onchange="optionCheck(this);">
<option value="op1">
Option 1</option>
<option value="op2">
Option 2</option>
<option value="op3">
Option 3</option>
<option value="op4">
Option 4</option>
<option value="op5">
Option 5</option>
</select>

<div class="col-lg-4">
<button type="button" class="btn btn-success" id="oKay" onclick="startOtherfunc()">Okay</button>
</div>

但我的代码似乎没有工作。

Answer 1

假设有一个函数叫做 optionFive，您可以设置 click 处理者

function optionFive() {
     alert('optionFive function')
};
document.getElementById("oKay").onclick = optionFive;

Answer 2

我想你要找的是.innerHTML属性？这将改变按钮内的文本。例如

function optionCheck(that) {
if (that.value == "op2") {
alert("Note: Thank You. Option 2!");
}
else if (that.value == "op5") {
    document.getElementById("oKay").innerHTML = "new text";    
}
else {
    document.getElementById("keycheck").style.display = "none";
}
}

好吧，我想这个应该可以。我只是用一个事件listner代替onClick. 我不知道为什么它的工作方式，而不是其他方式，如果我是诚实的。

function doSomethingElse(){
  console.log('Doing something else');
  return false;
}
function doSomething(){
  console.log('Doing something');
  return false;
}

function optionCheck(that) {
if (that.value === "op2") {
alert("Note: Thank You. Option 2!");
}
else if (that.value === "op4") {
  document.getElementById("oKay").addEventListener("click", doSomething);

    // document.getElementById("oKay").onClick = doSomething();    
}
else if (that.value === "op5") {
    // document.getElementById("oKay").onClick = doSomethingElse();  
  document.getElementById("oKay").addEventListener("click", doSomethingElse);
}
else {
    document.getElementById("keycheck").style.display = "none";
}
}