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

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不会返回整个文本，它会分析文本，并返回输出。

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>