Question

我有一个带有提交按钮的表单，想要在点击时更改按钮的颜色。

我在HTML中试过这个：

＆＃13;

const myButton = document.getElementById("submitButton");

myButton.addEventListener("submit", function() {
  myButton.style = "background:blue"
})

＆＃13;

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

＆＃13;

它不起作用。你能告诉我问题出在哪里吗？感谢

Answer 1

将submit更改为click或将eventListener添加到表单中。这里有表单上的eventListener：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

根据zzzzBov的评论：按钮没有submit事件。

使用event.preventDefault();提交表单时，您需要阻止默认表单操作。并使用按钮ID设置样式background-color：

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

您可以使用表单ID执行submit事件。

这样的事情：

＆＃13;

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

＆＃13;

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

＆＃13;

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

事件监听器更改按钮

3 个答案: