Javascript 如何显示和存储按钮值？

非常新的编码在这里，道歉的基本问题。正在尝试完成odin项目的build-a-calculator挑战（）

并且在点击后努力让数字出现。另外，如何将值存储在变量或数组中，以便在以后的计算中使用

以下是我的JS摘录：

$(".numbers").on("click", function() {

$+(this).text()

    ;});

和我的HTML（注意，我使用的是JSFIDLE，因此缺少HTML开始和结束标记等：

 <script src="jquery-1.11.3.min.js"></script>

 <div class="numbers">
 <button type="button">0</button>

<button type="button">1</button>

<button type="button">2</button>

<button type="button">3</button>

<button type="button">4</button>

<button type="button">5</button>

<button type="button">6</button>

<button type="button">7</button>

<button type="button">8</button>

<button type="button">9</button>

 </div>

 <div class = "operators">
 <button type="button">+</button>
 <button type="button">-</button>
 <button type="button">*</button>
 <button type="button">/</button>
 <button type="button">=</button>
 <button type="button">clear</button>
 </div>

0
1.
2.
3.
4.
5.
6.
7.
8.
9
+
-
*
/
=
清楚的

我不确定您想如何显示您的号码。您使用的是文本区吗

为了存储值，在函数内部执行以下操作

var num=$+（this）.text（）

---

除此之外，您还需要更加具体。

要将按钮的值存储在变量中，您可以这样做

$('button').on('click', function(){
    var i = $(this).text();
    console.log(i); // print the value of i in the console
});

一旦你有了这个值，你就需要能够把每个点击的按钮的值按顺序放在计算器的“显示”上，就像这样

HTML

希望这能帮你找到正确的方向。

下面演示了如何做你想做的事

// array is defined outside the click handler
var clickedArray = [];

$('button').on('click',function() {
    // get the button that was clicked
    var buttonClicked = $(this).html();
    console.log(buttonClicked);

    // store it as the last element in the array
    clickedArray.push(buttonClicked);
    console.log(clickedArray);

    // and output it to the screen
    $('.js-calc-out').append(buttonClicked);
});

注意事项：

该数组是在单击事件处理程序外部定义的，因此可以在每次触发单击事件时使用该数组，而无需重置。该数组将一直存在，直到页面刷新或有意取消设置，并且您可以根据需要访问该数组

html（）

push（）

函数用于将最近单击的元素附加到第1点中提到的数组末尾

.js calc out

是一个HTML元素，我们将最近一次单击添加到该元素，这意味着将输出单击序列

console.log

声明将一些内容输出到inspector中，这将帮助您查看流程的发展

---

注：这是一个简化的解决方案，考虑到您当前在学习曲线上的位置；理想情况下，您希望使用对象将数据和功能封装在javascript中，并将其排除在全局名称空间之外。

如果您使用的是JSFIDLE，并且您已经在那里设置了一个解决问题的演示，那么最好使用lin感谢Craig（和其他回答的人）！非常有帮助，特别感谢您的快速回答。最后一个问题，因为我的#按钮（0-9）需要做的事情与我的操作员按钮（+、-）不同，我希望参考on.click（）函数指向一个包罗万象的包装div，比如我的div class=numbers。但是当我使用你的方法$（“.numbers”）而不是按钮时，它不起作用？没问题！要回答你的问题，请使用

$（“.numbers”）.find（'button'）。on（'click'）

将一个单击处理程序附加到

div.numbers

内部的所有

按钮上
$('button').on('click', function(){
    var i = $(this).text();
    var display = $('.display');

    display.text( display.text() + i );
});

// array is defined outside the click handler
var clickedArray = [];

$('button').on('click',function() {
    // get the button that was clicked
    var buttonClicked = $(this).html();
    console.log(buttonClicked);

    // store it as the last element in the array
    clickedArray.push(buttonClicked);
    console.log(clickedArray);

    // and output it to the screen
    $('.js-calc-out').append(buttonClicked);
});