在javascript中划分用户输入的数据

Question

这里是我给的指令：

包含2个文本框供用户输入2个数字。建议用户在 的第二个文本框中输入0，以便您可以显示除法结果0.建议用户输入字符串以查看结果 。第一个操作是查看 除法结果0.第二个操作是查看在数学运算中使用 文本字符串的结果。按钮 - 调用函数和 显示结果

我的html：

 <form> 
      Enter a number: <input type="number" id="number_box_1"> 
      Enter a number: <input type="text" id="number_box_2"> 
      <input type="button" value="Does Something" id="does_something" onclick="Division()"> 
      <input type="reset"> 
      results: <input type="text" id="math_results"> 
     </form> 

我的javascript：

function Division(){ 
    var number_1 = document.getElementById("number_box_1").value; 
    var number_2 = document.getElementById("number_box_2").value; 
    // textbox where results will be shown 
    var results_shown = document.getElementById("math_results").value; 

    results_shown = number_1/number_2; 
} 

我已经试过几件事情，但还没有得到它的工作。我想我可能需要使用parseint（），但即使在阅读之后，我仍然不确定如何将它写入我的函数，或者如果这是正确的使用。我倒了像我应该使用但不确定的东西。我应该如何使用number_box_2来分隔number_box_1？

Answer 1

您正在存储结果输入的值而不是对其的引用，因此您只是修改了一个变量而不是实际值。

function Division(){ 
 
    var number_1 = document.getElementById("number_box_1").value; 
 
    var number_2 = document.getElementById("number_box_2").value; 
 
    // textbox where results will be shown 
 
    var result = document.getElementById("math_results"); 
 

 
    result.value = number_1/number_2; 
 
}

<form> 
 
    Enter a number: <input type="number" id="number_box_1"> 
 
    Enter a number: <input type="text" id="number_box_2"> 
 
    <input type="button" value="Does Something" id="does_something" onclick="Division()"> 
 
    <input type="reset"> 
 
    results: <input type="text" id="math_results"> 
 
</form>

不过，我会做这样的事情。

var box1 = document.getElementById("number_box_1"); 
 
var box2 = document.getElementById("number_box_2"); 
 
var result = document.getElementById("math_results"); 
 
var form = document.getElementById("form"); 
 

 
form.onsubmit = function(e) { 
 
    e.preventDefault(); // To disallow the form's submission 
 
    result.value = box1.value/box2.value; 
 
}

label { display: block; }

<form id="form"> 
 
    <label>Enter a number: <input type="number" id="number_box_1" required></label> 
 
    <label>Enter a number: <input type="text" id="number_box_2" required></label> 
 
    <label>results: <input type="text" id="math_results" readonly></label> 
 
    <div><input type="reset"> <input type="submit" value="Evaluate"></div> 
 
</form>

Answer 2

你必须把结果放入.value属性。现在你将它分配给results_shown变量。

此外，你必须小心表格，否则它可能会导致页面帖子看起来淘汰结果。

Answer 3

你不能用0或除以串基于未来你必须手动检查什么是results_shown，然后输出到结果输入框的响应有像师的错误。

但我想这是一个起点。

function Division(){ 
 
    var number_1 = document.getElementById("number_box_1").value; 
 
    var number_2 = document.getElementById("number_box_2").value; 
 
    // textbox where results will be shown 
 
    var results_shown; 
 
    try{ 
 
     results_shown = parseInt(number_1)/parseInt(number_2); 
 
    }catch(e){ 
 
     results_shown = e; 
 
    } 
 
    document.getElementById("math_results").value = results_shown; 
 
}

<form> 
 
    Enter a number: <input type="number" id="number_box_1"> 
 
    Enter a number: <input type="text" id="number_box_2"> 
 
    <input type="button" value="Does Something" id="does_something" onclick="Division()"> 
 
    <input type="reset"> 
 
    results: <input type="text" id="math_results"> 
 
</form>

Answer 4

相反的：

var results_shown = document.getElementById("math_results").value; 
results_shown = number_1/number_2; 

你必须使用：

document.getElementById("math_results").value = number_1/number_2; 

Runnable的例子：

function Division(){ 
 
    var number_1 = document.getElementById("number_box_1").value; 
 
    var number_2 = document.getElementById("number_box_2").value; 
 
    // textbox where results will be shown 
 
    document.getElementById("math_results").value = number_1/number_2; 
 
}

<form> 
 
      Enter a number: <input type="number" id="number_box_1"> 
 
      Enter a number: <input type="text" id="number_box_2"> 
 
      <input type="button" value="Does Something" id="does_something" onclick="Division()"> 
 
      <input type="reset"> 
 
      results: <input type="text" id="math_results"> 
 
     </form>