У меня есть форма с кнопкой отправки и я хочу изменить цвет кнопки при нажатии.
Я пробовал это в 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>
Не работает Не могли бы вы сказать мне, где проблема?
благодаря
3 ответа
Измените 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>
Согласно комментариям 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>
У кнопок нет события для отправки, попробуйте вместо этого использовать 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"
});
});
});
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.