通过单击JavaScript更改按钮文本

Question

我在JSP页面中使用以下代码。这是我通过JavaScript中的按钮单击更改按钮文本的功能。

    <script>
    function click(){
        var el=document.getElementById(btnaccept);
        if(el.value=="Accept"){
           el.value==="Accepted"; 
        }else{
            el.value==="Accept";
        }
    } 
 </script>

这是我的按钮;

<button type="button" class="btn btn-default btn-sm" id="btnaccept"  onclick="click()">
                <span class="glyphicon glyphicon-ok" aria-hidden="true" name="accept"></span> Accept
      </button>

单击“接受”按钮时，此代码无法正常工作。 我在这做了什么错误？

Answer 1

试试这个代码

<script>
      function click1() {
        var el = document.getElementById('btnaccept');
        //alert(el.innerHTML);
        if (el.textContent == "Accept") {
          el.textContent = "Accepted";
        } else {
          el.textContent = "Accept";
        }
      }
    </script>

将onclick事件更改为click1()

Answer 2

一些东西：

• 不要将您的功能click命名为无效。
• 您没有在按钮上使用值，而是使用内部HTML。
• 如果你想要操纵值，请使用，或者如果你想要反过来操纵ineerHTML。
• document.getElementById将string作为参数，因此你想在那里写document.getElementById('btnaccept');
• 使用=来赋值===是比较（等值或类型）

看工作演示

Answer 3

首先应该使用click作为函数名称使用任何其他名称。 它会将其视为mouseevent 文档

===用于比较分配值use = 。

这里我使用clickbutton()而不是click()作为函数名。

HTML

<button type="button" class="btn btn-default btn-sm" id="btnaccept"  onclick="clickbutton()">

脚本

function clickbutton() {
   var el = document.getElementById('btnaccept');
   if (el.value == "Accept") {
     el.value = "Accepted";
   } else {
     el.value = "Accept";
   }
 }

在这里演示

Answer 4

正如mattt所说，在分配值时，您需要使用赋值运算符=而不是等于运算符=== 。 另外，当使用getElementById ，它会期望一个字符串，所以你想使用getElementById("btnaccept");

同样，要设置按钮元素的文本，我相信你需要使用el.innerText = "Accept";

Answer 5

我通过以下方式为可压缩面板实现了一个切换按钮：

<button type="button" class="btn btn-default" onclick="changeIcon(this)">
<span class="glyphicon glyphicon-triangle-bottom"></span>
</button>

<script>
function changeIcon(button) {

    if(button.firstElementChild.getAttribute("class") == "glyphicon glyphicon-triangle-bottom")
    {
        button.firstElementChild.setAttribute("class", "glyphicon glyphicon-triangle-top");
    }
    else
    {
        button.firstElementChild.setAttribute("class", "glyphicon glyphicon-triangle-bottom");
    }
}
</script>