使用JavaScript将数值插入文本框

时间:2016-09-28 12:29:43

标签: javascript forms textbox

我已经完成了学校的任务,我必须使用JS做一个基本的计算器,但是我无法将结果返回到文本框中。这是我的代码:

    <form>
        <input type="textbox" id="val1"> Primo valore
        <br><br>
        <input type="textbox" id="val2"> Secondo valore
        <br><br>


        <script>      
            function getFloatValue(x) {
                var xf = parseFloat(x.value)
                return xf
            }
        </script>

        <script>
            var a = document.getElementById("val1")
            var b = document.getElementById("val2")


            var af = getFloatValue(a)
            var bf = getFloatValue(b)


           function calculate(a,b,op) {
                var r              
                switch (op.value) {
                    case '+': return a+b
                    case '-': return a-b
                    case '/': return a/b
                    case '*': return a*b
                }
            }
        </script>



        <input type="button" value="+" onclick="document.getElementById('result').value = calculate(af, bf, '+')">
        <input type="button" value="-" onclick="document.getElementById('result').value = calculate(af, bf, '-')">
        <input type="button" value="/" onclick="document.getElementById('result').value = calculate(af, bf, '/')">
        <input type="button" value="*" onclick="document.getElementById('result').value = calculate(af, bf, '*')">


        <br><br>
        <input type="textbox" id="result" value=''> Risultato
        <br><br>
        <input type="reset" name="reset" value="Resetta tutto">
    </form>

我做了很多尝试,但其中没有一个有效:\

提前谢谢你:D

2 个答案:

答案 0 :(得分:1)

  • 而不是传递variables,传递元素ID属性,以便我们可以使用id
  • 访问元素
  • op.value没有意义,因为您传递的是硬编码的string标志

function getFloatValue(x) {
  return parseFloat(x.value);
}


function calculate(a, b, op) {
  var a = document.getElementById(a);
  var b = document.getElementById(b);
  a = getFloatValue(a);
  b = getFloatValue(b);
  var r
  switch (op) {
    case '+':
      return a + b
    case '-':
      return a - b
    case '/':
      return a / b
    case '*':
      return a * b
  }
}
<form>
  <input type="textbox" id="val1">Primo valore
  <br>
  <br>
  <input type="textbox" id="val2">Secondo valore
  <br>
  <br>

  <input type="button" value="+" onclick="document.getElementById('result').value = calculate('val1', 'val2', '+')">
  <input type="button" value="-" onclick="document.getElementById('result').value = calculate('val1', 'val2', '-')">
  <input type="button" value="/" onclick="document.getElementById('result').value = calculate('val1', 'val2', '/')">
  <input type="button" value="*" onclick="document.getElementById('result').value = calculate('val1', 'val2', '*')">


  <br>
  <br>
  <input type="textbox" id="result" value=''>Risultato
  <br>
  <br>
  <input type="reset" name="reset" value="Resetta tutto">
</form>

答案 1 :(得分:-2)

function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}