Javascript:单击后更改按钮文本。 event.target 不起作用

Question

JSFiddle:https://jsfiddle.net/5k38svc9/1/

我有一个按钮。单击时，表单将附加到文档中。效果很好。但是我还需要按钮来更改其文本，但无法实现:

<div class = "video-row">


    <div class="video-buttons">
    <div class="add-button green-button light-button">Add comedian to favourites</div>

  <form style="display:none" id = "the-form" action="/login" method="post">
         <h2 class="form-title">Login</h2>
         <input class="form-input" type="text" placeholder="username" name="username">
         <button class = "login light-button" type="submit">Send</button>
 </form>
</div>

var addForm = function() {
    var element = document.getElementById("the-form");
    element.style.display = "block";
    var button = $(event.target);
    button.innerHTML = "Hide form";
}


var elements = document.getElementsByClassName("add-button");
 for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', addForm, false);
}

感谢任何帮助。

Answer 1

只需将 addForm 更改为:

var addForm = function(event) {
    var element = document.getElementById("the-form");
    element.style.display = "block";
    var button = event.target;
    button.innerText = "Hide form";
}

基本上在代码片段中你没有 jQuery，所以你不能使用它，而且你也没有将事件对象传递给事件处理程序 addForm，最后我使用了 .innerText( ) 而不是 innerHTML()，因为您仅替换文本。

这是一个工作片段:

var addForm = function(event) {
    var element = document.getElementById("the-form");
    element.style.display = "block";
    var button = event.target;
    button.innerText = "Hide form";
}


var elements = document.getElementsByClassName("add-button");
 for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', addForm, false);
}

.video-row  {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

}

.video-buttons  {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.light-button {
   padding: 10px;
  background-color: green;
  border-radius: 25px;
  cursor:pointer;
}

<div class = "video-row">
    

    <div class="video-buttons">
    <div class="add-button green-button light-button">Add comedian to favourites</div>

  <form style="display:none" id = "the-form" action="/login" method="post">
         <h2 class="form-title">Login</h2>
         <input class="form-input" type="text" placeholder="username" name="username">
         <button class = "login light-button" type="submit">Send</button>
 </form>
</div>