Javascript 使用 bootstrap 4 和 fontawesome 图标来回更改按钮文本

Question

I'm using bootstrap 4 to create a button with a dropdown menu. The functionality I need is that the button when closed contains the word open and a fontawesome icon beside it. When opened it should say close with an icon beside it.

I'm currently trying this

 function toggle() { const btn = document.body.querySelector("#dropdownMenu2"); if (btn.innerText == "Open") { btn.innerHTML = "<i class='fa fa-plus-circle' aria-hidden='true'></i>" + "Open"; } else { btn.innerHTML = "<i class='fa fa-minus-circle' aria-hidden='true'></i>" + "Close"; } }

 .dropdown-toggle { border-radius: 0; border-style: solid; border-color: #9d2235; background-color: #9d2235; color: #fff; padding: 8px 20px; }

 <button class="dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="toggle()"> <i class="fa fa-plus-circle" aria-hidden="true"></i> Actions </button>

The button changes to close on the first click but never changes back to open when clicked again.

Answer 1

instead of trying to alter the dom . Why dont you just add a second button with exact details and then just add same class on both the buttons and use jquery(since bootstrap 4 uses jquery) to hide and display other like following

$('.buttonClass').toggle();