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

标签 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 函数会更改表单第二个输入字段内的数字,但它并没有发生。

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

最佳答案

默认情况下,一个 <button>将提交它的父项 <form>所以你的页面被定向到 action (因为这是空的,很可能页面被 POST 编辑到当前的 URL)。您需要更新您的功能以阻止这种情况发生。您还需要在 onclick 处理程序中执行该函数:在其当前形式中,不会调用任何函数。 onclick="foo"不是一个 - onclick="foo(event)"是。

HTML:

<!-- Pass the event object through to your function -->
<button onclick="dosomething(event)">Click Me</button>

脚本:

function dosomething(e){
     // Stop form submission
    e.preventDefault();
    document.getElementById("number2").value=document.getElementById("number1").value
}

function dosomething(e){
    e.preventDefault();
    document.getElementById("number2").value=document.getElementById("number1").value
}
<form>
<input type="number" id="number1">
<input type="number" id="number2">
<button onclick="dosomething(event)">Click Me</button>
</form>
<script>

</script>

关于javascript - 使用 'getElementById' 更改表单内输入字段的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38223520/

相关文章:

javascript - 为什么我的某些 Angular 在更改时不正确?

javascript - (Javascript) 如何向选择选项添加倒计时器

javascript - 用其他 Array 元素填充每个 null 元素

javascript - Jquery 和 WAI ARIA

javascript - 流程要求对象具有以下属性之一

javascript - Chrome扩展回调函数和并发

javascript - 如何在每个拆分字符串(javascript)中拆分和插入数字?

javascript - jQuery UI 日期选择器 setDate 与 new Date 对比 Date.parse

Javascript 支持 Second Life 的 Web 浏览器

javascript - 使用 Javascript 将 SVG 路径点串在一起