OnClick解決方程

我試圖創建一個簡單的html頁面，它有三個輸入變量（A，B，C）。一旦用戶已經提供了這些值，他們將按下「計算」，以及JavaScript將通過下面的等式運行值OnClick解決方程

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

和

(C * 2) = Y

的答案將顯示爲X值和輸出Y價值。這裏是一個形象：

我寫的HTML，但我在使用JavaScript的難度。有人可以幫忙:)非常感謝你提前！

<!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>

function cmdCalc_Click() { 
 
      calculate(); 
 
    } 
 

 
    function calculate() { 
 
     A = parseInt(document.getElementById("A").value); 
 
     B = parseInt(document.getElementById("B").value); 
 
     C = parseInt(document.getElementById("C").value); 
 
     
 
     x = document.getElementById("x"); 
 
     y = document.getElementById("y"); 
 
     
 
    x.innerHTML = (3 * C); 
 
    y.innerHTML = (((A + B)/2) * 2)); 
 
    }

來源

2017-06-17 Joe

你有什麼問題？我看不到任何JS代碼。也許這是問題... – Tamar

我剛剛添加了我的JavaScript嘗試，它似乎並沒有工作 – Joe

在這裏看到。

我爲每個輸入附加了一個獨特的id。之後，我通過document.getElementById獲得了JavaScript中的元素。每個元素都有一個value屬性，其中包含input element的value。在click事件中，我得到A，B和C的值並計算它們。計算後，我將這些值設置爲X和Y。

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; 
 
}

<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 id="A" type="text" name="A" class="ratecalcfield"> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="control-group"> 
 
     <label class="control-label">B</label> 
 
     <div class="controls"> 
 
     <input id="B" type="text" name="B" class="ratecalcfield"> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="control-group"> 
 
     <label class="control-label">C</label> 
 
     <div class="controls"> 
 
      <input id="C" type="text" name="C" class="ratecalcfield"> 
 
     </div> 
 
    </div> 
 

 
    <div class="control-group"> 
 
     <label class="control-label">X Value</label> 
 
     <div class="controls"> 
 
      <input id="X" type="text" name="x" class="ratecalcfield"> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="control-group"> 
 
     <label class="control-label">Y Value</label> 
 
     <div class="controls"> 
 
      <input id="Y" 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>

來源

2017-06-17 20:51:37

所有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>

來源

2017-06-17 21:27:33 cpugourou

這是沒有必要使用「ID」的變量字段，只用getElementsByName（ 'inputNameHere'）[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); 
    } 
}

來源

2017-06-17 21:30:35

您可以使用讓他們通過字段名JavaScript eval函數來計算任何表達式。

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)"); 
 
}

<!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>

來源

2017-06-17 21:44:59 Muhammad

與您的代碼的問題是，你沒有添加A，B，C，X和Y的ID給每個窗體字段，並且您正在使用innerHTML來設置X形式價值和Y. X & 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事件，所以你不會有提交和加載頁面。

onclick="cmdCal_Click(); return false"

來源

2017-06-17 21:50:29

OnClick解決方程

回答

相關問題