Question

我在这里遇到一点麻烦。我正在建立一个计算器，我正在研究它的一般想法，我很困惑为什么我的变量查理不会出现在输出文本框中。最后所有的变量都是正确的（我用警报功能检查了它们），但最后它似乎不会出现！任何帮助，将不胜感激！

<!DOCTYPE html>
<body>
<div id="content">

<form name="calc"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script id="NumberButtons">
  $(document).ready(function(){
   $('#button1').click(function(){
        $('#output').val($(this).val());
    });
   $('#button2').click(function(){
        $('#output').val($(this).val());
    });
   $('#button3').click(function(){
        $('#output').val($(this).val());
    });
   $('#button4').click(function(){
        $('#output').val($(this).val());
    });
   $('#button5').click(function(){
        $('#output').val($(this).val());
    });
   $('#button6').click(function(){
        $('#output').val($(this).val());
    });
   $('#button7').click(function(){
        $('#output').val($(this).val());
    });
   $('#button8').click(function(){
        $('#output').val($(this).val());
    });
   $('#button9').click(function(){
        $('#output').val($(this).val());
    });
   $('#button0').click(function(){
        $('#output').val($(this).val());
    });
   $('#buttonclear').click(function(){
        $('#output').val($(this).val());
    });
  });
</script>
<script id="MathSymbolButtons">
var alpha = 0;
var bravo = 0;
var charlie = 0;

  $(document).ready(function(){
        $('#buttonplus').click(function(){
             var alpha = $("#output").val();
             window.alert(alpha)
             });
         $('#buttonequals').click(function(){
              var bravo = $("#output").val();
              window.alert(bravo)
              var charlie = alpha + bravo;
              $('#output').val($(charlie).val());
              });
  });
</script>
 <table>
    <tr>
         <td>
         <input type="text"   id="output">
        <br>
        </td>
        </tr>
    <tr>
        <td>
        <input type="button" name="one" value = "1" id="button1"> 
        <input type = "button" name = "two" value = "2" id="button2" > 
        <input type = "button" name = "three" value = "3" id="button3"> 
        <input type = "button" name = "four" value = "4"id="button4"> 
        <input type = "button" name = "five" value = "5" id="button5"> 
        <input type = "button" name = "six" value = "6" id="button6"> 
        <input type = "button" name = "seven" value = "7" id="button7"> 
        <input type = "button" name = "eight" value = "8" id="button8"> 
        <input type = "button" name = "nine" value = "9" id="button9"> 
        <input type = "button" name = "zero" value = "0" id="button0"> 
        <input type = "button" name = "add" value = "+" id="buttonplus">
        <input type = "button" name = "evaluate" value = " = "     id="buttonequals"> 
        <br>
        </td>
    </tr>
</table>
</form>
</div>
</body>
</html>

Answer 1

查理不是一个元素，它是一个变量，所以：

$('#output').val(charlie);

或原生：

document.getElementById( 'output' ).value = charlie;

Answer 2

这是您当前的代码：

var alpha = 0;
var bravo = 0;
var charlie = 0;

$('#buttonplus').click(function(){
  var alpha = $("#output").val();
});

$('#buttonequals').click(function(){
  var bravo = $("#output").val();
  var charlie = alpha + bravo;
  $('#output').val($(charlie).val());
});

这些是全局变量：

var alpha = 0;
var bravo = 0;
var charlie = 0;

但是您要在click处理程序中创建新的局部变量：

$('#buttonplus').click(function(){
  var alpha = $("#output").val();
});

删除var以访问全局变量：

$('#buttonplus').click(function(){
  alpha = $("#output").val();
});

<小时/> 此代码将#output的字符串表示分配给alpha：

alpha = $("#output").val();

如果alpha为2且bravo为3，则alpha + bravo为23。

您可以通过添加一个加号来强制转换为数字：

alpha = +$("#output").val();

<小时/> 最后，而不是：

  $('#output').val($(charlie).val());

......这样做：

  $('#output').val(charlie);

更正后的代码：

var alpha = 0;
var bravo = 0;
var charlie = 0;

$('#buttonplus').click(function(){
  alpha = +$("#output").val();
});

$('#buttonequals').click(function(){
  bravo = +$("#output").val();
  charlie = alpha + bravo;
  $('#output').val(charlie);
});

Answer 3

'var'在函数中创建新的局部变量，不会影响到全局变量
你不能添加两个字符串，按字符串* 1
$（'＃output'）。val（charlie）设置值

试试这个：

$('#buttonplus').click(function(){
     alpha = $("#output").val();
     //window.alert(alpha)
     });
 $('#buttonequals').click(function(){
      bravo = $("#output").val();
      //window.alert(bravo)
      charlie = alpha * 1 + bravo * 1;
      $('#output').val(charlie);
      });

Answer 4

有很多问题：

这是一个有效的jsFiddle：http://jsfiddle.net/khsm7s0s/

你两次声明了几个变量。您需要强制将字符串作为数字，以便添加它们。您通过在其上放置一个jQuery包装器将charlie视为DOM元素。

var alpha = 0;
var bravo = 0;
var charlie = 0;

    $(document).ready(function () {
        $('#buttonplus').click(function () {
            alpha = $("#output").val();
        });
        $('#buttonequals').click(function () {
            bravo = $("#output").val();
            charlie = Number(alpha) + Number(bravo);
            $('#output').val(charlie);
        });
    });

Answer 5

首先，$().val()用于提取文档元素（例如文本框）的值，但您的变量charlie已经是一个字符串，所以它没有意义做$(charlie).val()

排在第二位，因为它们是字符串，alpha + bravo将连接它们，所以在这种情况下，2 + 3将是23而不是5，为了正确加总它们必须将它们转换为{{{ 1}}或parseInt(alpha)

在第三位，在javascript中，你的变量是函数作用域，这意味着如果你做

alpha * 1

你的变量alpha只会存在于该函数中，如果你想从外面访问它你需要做什么

$('#buttonplus').click(function(){
  var alpha = $("#output").val();
});

否则alpha将未定义

最后一个注意事项是请不要省略var，以下代码将起作用，但这是一种可怕的做法

var alpha;
$('#buttonplus').click(function(){
    alpha = $("#output").val();
});

在这种情况下，alpha是一个全局变量，如果你的页面由几个文件组成，alpha也将在其他文件中定义，甚至可能与另一个文件中的另一个alpha变量共存！

所以这里是我刚才所说的工作小提琴

http://jsfiddle.net/hxvjhsxd/

为什么我的变量不会出现在使用Jquery的TextBox中？

5 个答案: