3 Javascript中的“数学”文本框

3 text box Math in Javascript

本文关键字：文本 数学 Javascript 中的      更新时间：2024-02-25

嗨，我是Javascript中的NewBee。这是我的第二周

下面是一个包含三个输入字段的表单的代码。
字段之间的关系为：

  • 第二个字段是第一个字段值的两倍
  • 第三个字段是第一个字段的平方

我已经完成了上述操作，但无法完成以下操作：
如果用户在第二个或第三个字段中输入值，脚本应该在其他字段中计算适当的值
如果我在第一个字段中输入值，则当前代码运行良好ONLY。

我希望我能很好地解释，换句话说：我如何在最后一个文本框中输入say 144，而其他两个文本框分别显示12和24。或者如果我输入24，第一个和第三个文本框显示12和144。

谢谢Vipul

<html>
    <head>
        <script>
            window.onload = init;
            function init() {
                var button = document.getElementById("usrButton");
                button.onclick = save;
                onkeyup = doMath;
                function doMath(){
                    var base = document.getElementById("base").value;
                    var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value = (base*2); 
                    var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;
                }
            }
        </script>
    </head>
    <body>
        <form>
            <input type="text" name="base" id="base" onkeyup= "doMath()">
            <br><br>
            <input type="text" name="baseNumber_timesTwo" id="baseNumber_timesTwo" onkeyup= doMath()>
            <br><br>
            <input type="text" name="baseNumber_square" id="baseNumber_square" onkeyup= doMath()> <br><br>
        </form>
    </body>
</html>

看看下面的代码：

<html>
<head>
    <script>
        window.onload = init;
        var init = function(){
            var button = document.getElementById("usrButton");
            button.onclick = save;
            onkeyup = doMath;
        }
        var doMathbase = function(){
            console.log('here');
            var base = document.getElementById("base").value;
            var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value = (base*2); 
            var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;
        }
         var doMathBase2Time = function(){
            var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value; 
            var base = document.getElementById("base").value = (baseNumber_timesTwo/2);
            var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;
        }
    </script>
</head>
<body>
    <form>
        <input type="text" name="base" id="base" onkeyup= "doMathbase()">
        <br><br>
        <input type="text" name="baseNumber_timesTwo" id="baseNumber_timesTwo" onkeyup= "doMathBase2Time()">
        <br><br>
        <input type="text" name="baseNumber_square" id="baseNumber_square" onkeyup= "doMathBaseSquare()">
        <br><br>
    </form>
</body>

您需要将另一个函数绑定到第二个和第三个字段。我做到了第二。现在，如果您在第二个字段中输入一个数字，它将返回"基数"数字和基数的平方。

尝试为第三个：）

这应该符合您的需求：

Fiddle

//declaring those earlier saves you to get those by ID every
//time you call "doMath()" or something else
var base = document.getElementById("base");
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo"); 
var baseNumber_square = document.getElementById("baseNumber_square");
function clearUp() {
    base.value = ""; 
    baseNumber_timesTwo.value = "";
    baseNumber_square.value = "";
}
function doMath() {
    //check which of the fields was filled
    if(baseNumber_timesTwo.value){
        base.value = baseNumber_timesTwo.value / 2;
    }
    if(baseNumber_square.value){
        base.value = Math.sqrt(baseNumber_square.value);
    }
    
    //fill other fields according to that
    baseNumber_timesTwo.value = (base.value*2); 
    baseNumber_square.value = (base.value*base.value) ;
    
}

如您所见：如果您确保在求值时只给定一个值，则无需编写多个算术函数（这是通过cleanUp（）实现的方法）

然而，这个解决方案仍然存在一些缺陷！由于您是js初学者，我建议您阅读代码，并将这些问题的可能解决方案作为一个小练习：-）

-您不能在任何字段中输入2位（或更多）数字，为什么不呢？为了允许这样的数字作为输入，你必须更改什么
-为什么在cleanUp函数中将值设置为"而不是"0"更好（在这种情况下！）？当您尝试使用"0"而不是"时，为什么代码会中断
-为什么doMath（）只检查最后两个字段（baseNumber_timesTwo和baseNumber_square）中的值，而忽略"base"字段？

问候，Tim

相关文章：