Изменение текста кнопки нажатием на 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

Как указано в mattt, вам необходимо использовать оператор присваивания = вместо оператора равенства === при назначении значений. Кроме того, при использовании getElementById, он будет ждать строку, так что вы хотите использовать getElementById("btnaccept");

Также, чтобы установить текст кнопки элемента я считаю, что вам нужно будет использовать el.innerText = "Accept";

Answer 3

несколько вещей:

• Не называть ваш funtion click, который не будет работать.
• Вы не используете значение на кнопке, вы используете внутренний HTML.
• использовать, если вы хотите манипулировать значением или манипулировать ineerHTML, если хотите наоборот.
• document.getElementById принимает строку в качестве аргумента, так что вы хотите, чтобы написать там document.getElementById('btnaccept');
• Использование = присвоить значение === является сравнение (равное значение или тип)

See working demo

Answer 4

Первое, что вы должны использование click как функция name использование любой другой name. Он будет относиться к ней как MouseEvent docs

=== используется для сравнения, чтобы присвоить значение использования =.

Здесь я использовал clickbutton() вместо click() для названия функции.

HTML

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

Script

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

Demo here

Answer 5

Я реализовал кнопку переключения для colapsible панели следующим образом:

<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>