Javascript: изменить текст кнопки после нажатия. event.target не работает - PullRequest
Новая
       1

Javascript: изменить текст кнопки после нажатия. event.target не работает

0 голосов
/ 25 марта 2020

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);
}

Любая помощь оценивается.

Ответы [ 2 ]

2 голосов
/ 25 марта 2020

Просто измените 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>
1 голос
/ 25 марта 2020

Ваше решение может помочь следующее решение: 

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunc()" id="myBtn">Press this Button</button>
<p id="demo"></p>
<script>
function myFunc() {
  var x = document.getElementById("myBtn").textContent;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...