使用' getElementById'更改表单内输入字段的值

时间:2016-07-06 12:02:28

标签: javascript

<html>
<head>
</head>
<body>
<form>
<input type="number" id="number1">
<input type="number" id="number2">
<button onclick="dosomething">Click Me</button>
</form>
<script>
function dosomething(){
document.getElementById("number2").value=document.getElementById("number1").value
}
</script>
</body>
</html>

JS函数会改变表单第二个输入字段内的数字,但它不会发生。

我可以知道出了什么问题吗?谢谢!

2 个答案:

答案 0 :(得分:2)

默认情况下,<button>会提交它的父<form>,因此您的网页会定向到action(因为这是空的,页面可能会{{1}转到当前的URL)。您需要更新您的功能以阻止这种情况发生。您还需要在onclick处理程序中执行该函数:在其当前形式中,不会调用任何函数。 POST不是{ - 1}}。

HTML:

onclick="foo"

脚本:

onclick="foo(event)"

&#13;
&#13;
<!-- Pass the event object through to your function -->
<button onclick="dosomething(event)">Click Me</button>
&#13;
function dosomething(e){
     // Stop form submission
    e.preventDefault();
    document.getElementById("number2").value=document.getElementById("number1").value
}
&#13;
&#13;
&#13;

答案 1 :(得分:1)

用以下行替换您的按钮

<button onclick="dosomething()">Click Me</button>