Question

如何将多个元素存储到数字var？

中

这是我的代码：

<div class="row1">
    <div class="number" id="number7"><br>
    <a href="" onclick="calculate(event)"><span>7</span></a></div>
    <div class="number" id="number4"><br>
    <a href="" onclick="calculate(event)"><span>4</span></a></div>
    <div class="number" id="number1"><br>
    <a href="" onclick="calculate(event)"><span>1</span></a></div>
    <div class="number" id="number0"><br>
    <a href="" onclick="calculate(event)"><span>0</span></a></div> 
</div>

<script>
function calculate(event){
    event.preventDefault();
    var number = event.target.innerText;
    var total = document.getElementById('result');
    total.innerHTML=number;} 
</script>

示例：如果我单击“7”3次，则数字var应该包含3“7”。

Answer 1

这是你要找的吗？

function calculate(event){
    event.preventDefault();
    var number = event.target.innerText;
    var total = document.getElementById('result');
    total.innerHTML+=number;
}

a,div{
  margin:0
}

<div class="row1">
    <div class="number" id="number7">
    <a href="" onclick="calculate(event)"><span>7</span></a></div>
    <div class="number" id="number4">
    <a href="" onclick="calculate(event)"><span>4</span></a></div>
    <div class="number" id="number1">
    <a href="" onclick="calculate(event)"><span>1</span></a></div>
    <div class="number" id="number0">
    <a href="" onclick="calculate(event)"><span>0</span></a></div> 
</div>
<p id='result'></p>

这会将字符附加到结果元素的innerHTML。

Answer 2

function calculate(event){
    event.preventDefault();
    var number = event.target.innerText;
    var total = document.getElementById('result');
    //total.innerHTML+=number;
    total.textContent+=number;
}

<div class="row1">
    <div class="number" id="number7"><br>
    <a href="" onclick="calculate(event)"><span>7</span></a></div>
    <div class="number" id="number4"><br>
    <a href="" onclick="calculate(event)"><span>4</span></a></div>
    <div class="number" id="number1"><br>
    <a href="" onclick="calculate(event)"><span>1</span></a></div>
    <div class="number" id="number0"><br>
    <a href="" onclick="calculate(event)"><span>0</span></a></div> 
    <br/>
    Result: <div id="result"></div>
</div>

编辑 ：使用innerHTML，而不是textContent，就好像所选文字包含一些HTML标记或符号一样innerHTML 1}}不会返回整个文本，它将解析文本并返回输出。

Answer 3

我建议采用略微不同的方法，使其更具可扩展性。在下面的示例中，您可以添加任意数量的元素，以增加总数，具体取决于所单击的锚元素的值（innerText）。

<div class="row1">
    <div class="number">
        <a href="" class="increase-number">1</a>
    </div>
    <div class="number">
        <a href="" class="increase-number">3</a>
    </div>
</div>
<span id="total"></span>

<script>
document.addEventListener('DOMContentLoaded', function(e) {
    var total_increasers = document.getElementsByClassName('increase-number'); // All the anchor elements that can be clicked to increase the total.
    var total_counter = document.getElementById('total'); // The total counter element.

    Array.from(total_increasers).forEach(function(element) {
        element.addEventListener('click', function(e) {
            e.preventDefault();

            var amount = parseInt(this.innerText); // The clicked number value as int.
            var current_total = parseInt(total_counter.innerText) || 0; // The current total as int.
            var new_total = current_total + amount; // The new total.

            total_counter.innerText = new_total;
        });
    });
});
</script>

如何将多个元素存储到js中的var中？

3 个答案: