我只有两个项目 (radiobtns) apple,banana ，当我执行点击事件函数时它在我 console.log(cart) 时正常工作，但是当我尝试在段落中显示它时它不会添加新元素，为什么？
<body>
<input type="radio" name="test" id="appid" /><strong>apple</strong>
<br />
<input type="radio" name="test" id="banid" /><strong>banana</strong>
<br />
<p id="addid"><a href="#">Add to cart</a>
</p>
<br />
<p id="dispid"></p>
<script>
var add = document.getElementById('addid');
var app = document.getElementById('appid');
var ban = document.getElementById('banid');
var display = document.getElementById('dispid');
var cart = [];
add.addEventListener('click', function() {
if (app.checked) {
cart.push('apple');
}
else if (ban.checked) {
cart.push('banana');
}
else {
alert('please choose');
}
});
display.innerHTML = 'your cart : ' + cart.toString();
</script>
</body>
最佳答案
addEventListener() 方法将事件处理程序附加到指定的元素。addEventListener() 方法将事件处理程序附加到元素而不覆盖现有的事件处理程序。
这里 var add = document.getElementById('addid'); 这个元素的点击事件是通过事件监听器来控制的。因此，每当发生点击事件时，add.addEventListener('click', function() { 都会触发此方法。因此，无论您希望进行何种更改，都需要在此函数中定义。
因此，将 display.innerHTML = 'your cart : ' + cart.toString(); 移到事件监听器函数中以查看更改。加
移动 var cart = []; 因为每次都有存储更改值的更改变量需要重新初始化，因为它是一个单选按钮，可以选择一个值
var add = document.getElementById('addid');
var app = document.getElementById('appid');
var ban = document.getElementById('banid');
var display = document.getElementById('dispid');
add.addEventListener('click', function() {
var cart = [];
if (app.checked) {
cart.push('apple');
} else if (ban.checked) {
cart.push('banana');
} else {
alert('please choose');
}
display.innerHTML = 'your cart : ' + cart.toString();
});<input type="radio" name="test" id="appid" /><strong>apple</strong>
<br />
<input type="radio" name="test" id="banid" /><strong>banana</strong>
<br />
<p id="addid"><a href="#">Add to cart</a>
</p>
<br />
<p id="dispid"></p>关于javascript - 简单数组购物车无法正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41939941/