如何添加相同参数中的字符串

Question

我想将两个字符串加在一起，这样如果单击 7 和 8，该函数会将 outputbox 的内部 HTML 设置为 78。但是，使用此当前功能，它仅显示最近选择的号码。我怎样才能让它显示每个已选择的数字？

function selectNum(num)
{
    num = num + num // What goes here?
    document.getElementById("outputbox").innerHTML = num;
}

<button onclick = "selectNum('7')">7</button>
<button onclick = "selectNum('8')">8</button>
<button onclick = "selectNum('9')">9</button>
<button onclick = "selectNum('4')">4</button>
<button onclick = "selectNum('5')">5</button>
<button onclick = "selectNum('6')">6</button>
<button onclick = "selectNum('1')">1</button>
<button onclick = "selectNum('2')">2</button>
<button onclick = "selectNum('3')">3</button>

Answer 1

尝试：

var number = '';
function selectNum(num) {
    number += num;
    document.getElementById("outputbox").innerHTML = number;
}

Answer 2

你需要在"selectNum"范围之外创建一个变量，并使用闭包让函数修改它。

var myString = "";
function selectNum(num) {
    myString += num;

    document.getElementById("outputbox").innerHTML = myString;
}

Answer 3

简单的答案是将数字连接到元素的当前值：

function selectNum(num) {
  document.getElementById("outputbox").innerHTML += num;
}

但是，更健壮的方法是将值单独存储并写入文档。可以通过使用立即调用的函数表达式并将值保存在闭包中来避免使用全局变量：

var selectNum = (function() {
  var value = '';
  return function (num) {
    value += num;
    document.getElementById("outputbox").innerHTML = value;
  };
}());

您可能想要包括一种清除或重置值的方法。

Answer 4

一种更简洁的方法，避免使用内联 javascript，同时使用事件侦听器和重置按钮。 JSFiddle

HTML:

<div>
    <button class="sumBtn">1</button>
    <button class="sumBtn">2</button>
    <button class="sumBtn">3</button>
    <button class="sumBtn">4</button>
    <button class="sumBtn">5</button>
    <button class="sumBtn">6</button>
    <button class="sumBtn">7</button>
    <button class="sumBtn">8</button>
    <button class="sumBtn">9</button>
    <button id="resetBtn">Reset</button>
</div>

Javascript:

var sumButtons = document.getElementsByClassName('sumBtn');
var resetBtn = document.getElementById('resetBtn');
var total = "";

function reset() {
    total = '';
    // alert(total);
}

function addNums(num) {
    total += num;
    // alert(total);
}

for (var i = 0; i < sumButtons.length; i++) {
    sumButtons[i].addEventListener('click', function () {
        addNums(this.textContent);
    });
}

resetBtn.addEventListener('click', function () {
    reset();
});

更新： 删除了控制台警报并用输入框替换它以显示结果。 JSFiddle

如何添加相同参数中的字符串

how to add strings that are in the same parameter

html

javascript

string

parameters