javascript - 使用带有提交按钮和重置按钮的 JavaScript 计算表单中的两个字段

标签 javascript forms

这里是我编写的代码,没有工作是为了查看如何将我的总和输入结果字段,同时也在查看如何制作一个重置按钮以清除字段中的所有文本。

JSBin .

<html>

<head>
    <script>
        function addition() {
            var x = +document.getElementById('num1').value;
            var y = +document.getElementById('num2').value;
            document.getElementById('result').value = x + y;
            document.result.submit()
        }

        function reset() {}
    </script>
</head>

<body>
    <header>
        <h1>Calculator Using Forms &amp; JavaScript</h1>
    </header>

    <form>
        Number 1:
        <input type="number" id="num1" value="0" autofocus>
        <br> Number 2:
        <input type="number" id="num2" value="0">
        <br> Result:
        <input type="text" id="result" value="0" readonly>
        <br>
    </form>

    <input type="button" onclick="addition()" value="addition">
</body>

</html>

最佳答案

为什么要提交表单?

您可以使用 document.forms。访问表单。

试试这个:

<html>

<head>
    <script>
        function addition() {
            var x = +document.getElementById('num1').value;
            var y = +document.getElementById('num2').value;
            document.getElementById('result').value = x + y;
            document.forms.calculator.submit()
        }

        function reset() {
          document.forms.calculator.reset();
        }
    </script>
</head>

<body>
    <header>
        <h1>Calculator Using Forms &amp; JavaScript</h1>
    </header>

    <form name="calculator">
        Number 1:
        <input type="number" id="num1" value="0" autofocus>
        <br> Number 2:
        <input type="number" id="num2" value="0">
        <br> Result:
        <input type="text" id="result" value="0" readonly>
        <br>
    </form>

    <input type="button" onclick="addition()" value="addition">
    <input type="button" onclick="reset()" value="reset">
</body>

</html>

关于javascript - 使用带有提交按钮和重置按钮的 JavaScript 计算表单中的两个字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36393205/

相关文章:

javascript - 如何让特定数量的字符变色?

javascript - HTML 表单的某些部分未通过 POST 发送

python - request.values/request.form 获取表单 flask 上带有空格字符的值的问题

javascript - [jQuery]使用 .html() 附加 html 后页面刷新

javascript - 传单如何通过坐标添加圆圈?

javascript - 构造失败 'FormData'

javascript - Bacon.js 仅当 prop === true 时才将属性与 .and() 结合起来

php - 使用 Codeigniter 将表单输入中的字符串添加到 URL

php/mysql 动态表单字段没有插入到我的表中

angularjs - 在 AngularJS 中使用 ng-pattern 验证电子邮件