更改输入类型颜色wth js onclick

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>