Question

我试图创建一个简单的html页面，它有三个输入变量（A，B，C）。一旦用户提供了这些值，他们将按＆＃34;计算＆＃34;，JavaScript将通过以下等式运行值

--with-openssl

和

((A + B)/2) * 3 = X

答案将显示为(C * 2) = Y值和X值的输出。这是一张图片：

我写过HTML，但我在使用JavaScript方面遇到了困难。请有人帮忙:)非常感谢你提前！

＆＃13;

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Example</title>
  
  
  
  
  
</head>

<body>

<body class="container">
  <div class="row">
    <div class="span6">
    <h1 align="center">Example</h1>
<form class="form-horizontal well w3-center" style="max-width: 850px; width: 100%; margin: 0 auto;">
  
  <div class="control-group">
    <label class="control-label">A</label>
    <div class="controls">
      <input type="text"  name="A" class="ratecalcfield"></input>
    </div>
</div>
                    <div class="control-group">
                        <label class="control-label">B</label>
                        <div class="controls">
                            <input type="text"  name="B" class="ratecalcfield"></input>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">C</label>
                        <div class="controls">
                            <input type="text"   name="C" class="ratecalcfield"></input>
                        </div>
                    </div>



                    <div class="control-group">
                        <label class="control-label">X Value</label>
                        <div class="controls">
                            <input type="text" name="x" class="ratecalcfield"></input>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">Y Value</label>
                        <div class="controls">
                            <input type="text" name="y" class="ratecalcfield"></input>
                        </div>
                    </div>
                    <div class="control-group w3-margin-top">
                        <div class="controls">
                        <input type="button" class="w3-button w3-blue w3-padding-large" style="max-width: 200px; width: 100%;" onclick="cmdCalc_Click()" value="Calculate" name="cmdCalc"></input>
                    </div>
                   
                </div>
            </form>
  
    <script src="js/index.js"></script>

</body>
</html>

＆＃13;

Answer 1

见这里。

我在每个输入中添加了一个唯一的id。之后我通过document.getElementById获得了JavaScript中的元素。每个元素都有一个value属性，用于保存value的{{1}}。在input element事件中，我获得click，A和B的值并计算它们。计算后，我将值设置为C和X。

var a = document.getElementById('A');
var b = document.getElementById('B');
var c = document.getElementById('C');
var x = document.getElementById('X');
var y = document.getElementById('Y');

function cmdCalc_Click(){
   x.value = ((Number.parseInt(a.value) + Number.parseInt(b.value)) / 2) * 3
   y.value = c.value * 2;
}

Answer 2

更正了所有html错误。

强制输入为数字（避免在js中使用不必要的parseInt）。

设置要使用的类。

进行计算。

设置新的x和y值。

<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <title>Example</title>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="span6">
                    <form class="form-horizontal well w3-center" style="max-width: 850px; width: 100%; margin: 0 auto;">
                        <div class="control-group">
                            <label class="control-label">A</label>
                            <div class="controls">
                                <input type="number" id="A" class="ratecalcfield">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">B</label>
                            <div class="controls">
                                <input type="number"  id="B" class="ratecalcfield">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">C</label>
                            <div class="controls">
                                <input type="number" id="C" class="ratecalcfield">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">X Value</label>
                            <div class="controls">
                                <input type="number"  id="x" class="ratecalcfield">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Y Value</label>
                            <div class="controls">
                                <input type="number"  id="y" class="ratecalcfield">
                            </div>
                        </div>
                        <div class="control-group w3-margin-top">
                            <div class="controls">
                                <input type="button" class="w3-button w3-blue w3-padding-large" style="max-width: 200px; width: 100%;" onclick="cmdCalc_Click()" value="Calculate" name="cmdCalc">
                            </div>               
                    </form> 
                </div> 
            </div>   
        </div>
    </body>
    <script>
        function cmdCalc_Click() {
            let x = document.getElementById("x");
            let y = document.getElementById("y");
            const Preset = new whatToDo(x, y);
            const result = Preset.calculate();
            x.value = result.x;
            y.value = result.y;
        }
        class whatToDo {
            constructor(x, y) {
                this.A = (document.getElementById("A").value);
                this.B = (document.getElementById("B").value);
                this.C = (document.getElementById("C").value);
            }
            calculate() {
                return {
                    x: (3 * this.C),
                    y: (((this.A + this.B) / 2) * 2)
                }
            }
        }
    </script>
</body>
</html>

Answer 3

没有必要使用＆＃34; id＆＃34;在变量字段中，只需使用getElementsByName（＆＃39; inputNameHere＆＃39;）[0] .value）通过字段名称获取它们

function cmdCalc_Click(){
        var a = Number.parseInt(document.getElementsByName('A')[0].value);
        var b = Number.parseInt(document.getElementsByName('B')[0].value);
        var c = Number.parseInt(document.getElementsByName('C')[0].value);
        var x = Number.parseInt(document.getElementsByName('X')[0].value);
        var y = Number.parseInt(document.getElementsByName('Y')[0].value);

    e1 = ((a + b)/2) * 3
    if(e1 == x && x != 0){
        alert("Correct " + e1 + " is equal to " + x);
    }

    e2 = (c * 2)
    if(e2 == y && y != 0){
        alert("Correct" + e2 + " is equal to " + y);
    }
}

Answer 4

您可以使用JavaScript eval函数计算任何表达式。

＆＃13;

function cmdCalc_Click() {
    var a = document.querySelector('[name=A]').value;
    var b = document.querySelector('[name=B]').value;
    var c = document.querySelector('[name=C]').value;
    var x = document.querySelector('[name=x]');
    var y = document.querySelector('[name=y]');

    x.value = eval("((" + a + " + " + b + ")/2) * 3");
    y.value = eval("(" + c + " * 2)");
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Example</title>
    </head>

    <body class="container">
        <div class="row">
            <div class="span6">
                <h1 align="center">Example</h1>
                <form class="form-horizontal well w3-center" style="max-width: 850px; width: 100%; margin: 0 auto;">

                    <div class="control-group">
                        <label class="control-label">A</label>
                        <div class="controls">
                            <input type="text" name="A" class="ratecalcfield">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">B</label>
                        <div class="controls">
                            <input type="text" name="B" class="ratecalcfield">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">C</label>
                        <div class="controls">
                            <input type="text" name="C" class="ratecalcfield">
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label">X Value</label>
                        <div class="controls">
                            <input type="text" name="x" class="ratecalcfield">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">Y Value</label>
                        <div class="controls">
                            <input type="text" name="y" class="ratecalcfield">
                        </div>
                    </div>
                    <div class="control-group w3-margin-top">
                        <div class="controls">
                            <input type="button" class="w3-button w3-blue w3-padding-large" style="max-width: 200px; width: 100%;" onclick="cmdCalc_Click()" value="Calculate" name="cmdCalc">
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </body>
</html>

＆＃13;

Answer 5

您的代码的问题在于您没有将A，B，C，X和Y ID添加到每个表单字段，并且您使用innerHTML来设置X和Y的表单值。 X＆amp; Y是文本字段，您应将值设置为

 X.value=(3*C);
 Y.value=((A+B)/2);

Set the ids that you are referencing in javascript to the appropraite text fields like:

<input type="text" id="A" name="A" class="">

等

现在是document.getElementById（“A”）;可以找到id为A的字段并获取其值。

Another problem:

使用值设置文本字段的值而不是innerHTML

还可以使用以下代码修改您的onclick事件，这样您就不会提交for和页面。

 onclick="cmdCal_Click(); return false"

OnClick求解方程

5 个答案: