Question

<script>
function valid() {
    document.getElementById("name").style.borderColor = "#ef0000";
}
</script>

<form method="post" action="">
<input type="text" name="name" id="name">
<input  type="submit" onclick="valid()" value="click">
</form>

为什么这个代码不起作用？我只是红色，边界再次处于初始状态。我请你原谅我们。我知道这是重复的（我甚至在这里找到了至少一个有用的解决方案：http://jsfiddle.net/bcxLz4wh/）我想知道我的代码有什么问题以及为什么它会返回到它的初始状态。

Answer 1

它返回初始状态，因为您单击了提交按钮。它的默认行为是提交刷新页面的form。如果您只想更改border-color，则需要覆盖该默认行为。类似的东西：

function valid(e) {
    document.getElementById("name").style.borderColor = "#ef0000";
    e.preventDefault();
}


<form method="post" action="">
    <input type="text" name="name" id="name">
    <input type="submit" onclick="valid(event)" value="click">
</form>

使用js onclick更改输入类型颜色

1 个答案: