单击更改Bootstrap的折叠按钮的值

Question

我已经搜索了论坛，已经搜索了Google并阅读了所有文章，但是我似乎仍然无法正确理解。我想做的是更改单击时按钮的值。也就是说，如果显示了内容，那么我想将按钮的值更改为“隐藏”。如果内容是隐藏的，则按钮应显示其默认值“ check”。

我的代码：

<table> 
<tr> 
<td>One two</td>
<td><input type="text" id="input"></td>
<td>four five</td>
<td class="button"><button class="my-btn" type="button" 
data-toggle="collapse" data-target="#collapseAnswer" aria-expanded="false" 
aria-controls="collapseAnswer" onclick="checkInput()">
CHECK
</button></td>
<td id="collapseAnswer">
<span id="message"></span>             
</td>
</tr>
</table>

function checkInput()
{
var a=document.getElementById("input");
if ((a.value=="three")||(a.value=="three"))
{
document.getElementById("message").innerHTML="Correct!";
}
else
{
document.getElementById("message").innerHTML="Wrong";
}
}

这是我的小提琴的链接：

但是现在看来它在这里不起作用...尽管在我的文件中它显示了innerHTML并再次单击也将其隐藏了。如果要显示innerHTML，我想更改按钮的值。

当innerHTML应该消失时，是否还可以加快动画的播放速度？这会花费太多时间，并且某些用户可能希望再次单击该按钮，因为隐藏内容需要一些时间。

非常感谢您。

Answer 1

在此处https://jsfiddle.net/xrtmpy4f/

检查更新的JSFiddle

基本上，您需要使用innerText属性来更改按钮的文本

function checkInput() {
  var a=document.getElementById("input");
  var checkbtn = document.getElementById("check-btn");

  if (checkbtn.innerText.trim() === 'CHECK') {
    checkbtn.innerText = 'HIDE';
      if ((a.value=="three")||(a.value=="three")) {
    document.getElementById("message").innerHTML="Correct!";
    } else {
    document.getElementById("message").innerHTML="Wrong";
   }
   return;
  }

  if (checkbtn.innerText.trim() === 'HIDE') {
    checkbtn.innerText = 'CHECK';
    document.getElementById("message").innerHTML = '';
    return;
  }

}

Answer 2

function checkInput() {
  var text = document.getElementById("check-btn");
  text.innerText === 'CHECK' ? (text.innerText = 'HIDE') : (text.innerText = 'CHECK');
var a=document.getElementById("input");
if ((a.value=="three")||(a.value=="three"))
{
document.getElementById("message").innerHTML="Correct!";
}
else
{
document.getElementById("message").innerHTML="Wrong";
}
}

Answer 3

ConfigMap

Answer 4

您可以将其添加到闭包中，这样它就不会被其他变量覆盖。

(function() {
    var elem = document.getElementById("input");
    elem.onkeydown =  function (e) {
        if (e.keyCode === 13) {  //checks whether the pressed key is "Enter"
           checkInput();
        }
    }
})();