Javascript 简单数学练习

标签 javascript html

我有这个代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<input onclick="result.value = m1*m2; m1.value = (+m1.value -1);" type="button" id="minus1" value="minus" />
<input onclick="result.value = m1*m2; m1.value = (+m1.value +1);" type="button" id="plus1" value="plus" />
<input type="textbox" id="m1" value="1" />
<br />
<input onclick="result.value = m1*m2; m2.value = (+m2.value -1);" type="button" id="minus2" value="minus" />
<input onclick="result.value = m1*m2; m2.value = (+m2.value +1);" type="button" id="plus2" value="plus" />
<input type="textbox" id="m2" value="1" />
<br />
<br />
Result :<input type="textbox" id="result" />
</body>
</html>

为什么每次更改任何 + 或 - 按钮时我都会得到 NaN 值???

最佳答案

您正在乘以m1*m2。您应该使用:m1.value*m2.value

在某些浏览器中,m1 将返回 id 为 m1 本身的元素。不过,您想要相乘的只是值,因此 m1.value

编辑后的 ​​HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
    </head>
    <body>
        <input onclick="result.value = m1.value*m2.value; m1.value = (+m1.value -1);" type="button" id="minus1" value="minus" />
        <input onclick="result.value = m1.value*m2.value; m1.value = (+m1.value +1);" type="button" id="plus1" value="plus" />
        <input type="textbox" id="m1" value="1" />
        <br />
        <input onclick="result.value = m1.value*m2.value; m2.value = (+m2.value -1);" type="button" id="minus2" value="minus" />
        <input onclick="result.value = m1.value*m2.value; m2.value = (+m2.value +1);" type="button" id="plus2" value="plus" />
        <input type="textbox" id="m2" value="1" />
        <br />
        <br />Result :
        <input type="textbox" id="result" />
    </body>
</html>

如果我可以建议,您应该在 onclick 事件中使用一个函数。事情会更清晰,更容易维护,并且您可以添加更多检查,例如输入的数字是否有效。请参阅下面的示例。

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type="text/javascript">
            function update(inputToChange, changeValue) {
                var parsedValue = parseFloat(inputToChange.value);
                if (isNaN(parsedValue)) {
                   alert(inputToChange.value+' is not a a valid number.');
                }
                else {
                   result.value = m1.value * m2.value;
                   inputToChange.value = parsedValue + changeValue;
                }
            }
        </script>
    </head>
    <body>
       <input onclick="update(m1, -1)" type="button" id="minus1" value="minus" />
       <input onclick="update(m1, 1)" type="button" id="plus1" value="plus" />
       <input type="textbox" id="m1" value="1" />
       <br />
       <input onclick="update(m2, -1)" type="button" id="minus2" value="minus" />
       <input onclick="update(m2, 1)" type="button" id="plus2" value="plus" />
       <input type="textbox" id="m2" value="1" />
       <br />
       <br />Result :
       <input type="textbox" id="result" />
    </body>
</html>

Check demo here .

关于Javascript 简单数学练习,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17318956/

相关文章:

javascript - 为 Polymer 自定义元素使用 native 节点名称?

javascript - 如何在 JavaScript 中实例化一个文件对象?

Javascript 每个 tr 中的最高数字,跳过 3 列

javascript - 如何在 Angular.js 中从不同 View 搜索项目

javascript - document.getElementById ("id").style.display = 'hidden' ;不工作

html - CSS transition 移除 border-radius 属性

javascript - 在 D3.js 中设置 x 轴引用线

css - ionic 复选框内的 HTML 输入

html - 如何使没有边框(渐变背景)的按钮与有边框(轮廓)的按钮大小相同?

javascript - 使用 jQuery 将 "Remove"按钮动态添加到 HTML 表