Слушатель событий, чтобы изменить кнопку

Question

У меня есть форма с кнопкой отправки и я хочу изменить цвет кнопки при нажатии.

Я пробовал это в HTML:

const myButton = document.getElementById("submitButton");

myButton.addEventListener("submit", function() {
  myButton.style = "background:blue"
})

<div>
  <form id="connexion">
    <input type="text" placeholder="Pseudo" />
    <button id="submitButton" type="submit" value="Go" style="background:yellow"></button>
  </form>
</div>

Не работает Не могли бы вы сказать мне, где проблема?
благодаря

javascript html

-1

droledenom 28 Авг 2017 в 22:24

Answer 1

Измените submit на click или добавьте EventListener в вашу форму. Вот с eventListener на форме:

const myButton = document.getElementById('submitButton');
const myForm = document.getElementById('connexion');

myForm.addEventListener('submit', function(e) {
  e.preventDefault();
  myButton.style = 'background:blue';
})

<div>
  <form id="connexion">
    <input type="text" placeholder="Pseudo" />
    <button id="submitButton" style="background:yellow">Go</button>
  </form>
</div>

1

lumio 28 Авг 2017 в 19:31

Answer 2

Согласно комментариям zzzzBov: у кнопок нет события submit.

Вам необходимо запретить действие формы по умолчанию при отправке формы с event.preventDefault();. И установите стиль background-color с помощью идентификатора кнопки с помощью:

document.getElementById("submitButton").style = "background: blue;";

Вы можете выполнить событие submit с помощью идентификатора формы.

Что-то вроде этого:

const connexion = document.getElementById("connexion");

connexion.addEventListener("submit", function(e) {
  e.preventDefault();
  document.getElementById("submitButton").style = "background: blue;";
});

<form id="connexion">
  <input type="text" placeholder="Pseudo" />
  <button id="submitButton" type="submit" style="background: yellow;">Go</button>
</form>

1

Danny Fardy Jhonston Bermúdez 28 Авг 2017 в 19:49

Answer 3

У кнопок нет события для отправки, попробуйте вместо этого использовать click:

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div>
    <form id="connexion"  >
            <input type="text" placeholder="Pseudo"  />
            <input id="submitButton" type="button" value="Go" style="background:yellow"></button>
    </form>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

И для jquery:

$(document).ready({
 $("#submitButton").click(function(){
      $(this).css({
          "background-color":"blue"
      });
 });
 });

1

Sparks 28 Авг 2017 в 19:59

Слушатель событий, чтобы изменить кнопку

3 ответа

Похожие вопросы

Новые вопросы

javascript