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

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

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

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

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

您可能希望包含清除或重置值的方法。

Answer 3

您需要创建一个超出＆＃34; selectNum＆＃34;范围的变量。并使用闭包让函数修改它。

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

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

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();
});

UPDATE：删除了控制台警报，并将其替换为输入框以显示结果。 JSFiddle

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

4 个答案: