Javascript 简单数组cart dosen'；不能正确显示_Javascript_Arrays

Javascript 简单数组cart dosen'；不能正确显示

javascript arrays

Javascript 简单数组cart dosen'；不能正确显示,javascript,arrays,Javascript,Arrays,我只有两个项目（RadioBTN）苹果、香蕉，当我使用点击事件功能时，它在我控制台.log（购物车）中正常工作，但是当我试图在一个段落中显示它时，它没有添加新元素，为什么 <body> <input type="radio" name="test" id="appid" /><strong>apple</strong> <br /> <input type="radio" name="test" id="b

我只有两个项目（RadioBTN）苹果、香蕉，当我使用点击事件功能时，它在我控制台.log（购物车）中正常工作，但是当我试图在一个段落中显示它时，它没有添加新元素，为什么

<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>


苹果


香蕉







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（）{
如果（应用程序已选中）{
推车推（“苹果”）；
}
否则，如果（禁止，选中）{
推车推（“香蕉”）；
}
否则{
提醒（'请选择'）；
}
});
display.innerHTML='您的购物车：'+购物车.toString（）；

您应该在事件侦听器中更新innerHTML

add.addEventListener('click', function() {
    display.innerHTML = 'your cart : ' + cart.toString();
})

您应该在事件侦听器中更新innerHTML

add.addEventListener('click', function() {
    display.innerHTML = 'your cart : ' + cart.toString();
})

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=[]；
如果（应用程序已选中）{
推车推（“苹果”）；
}否则，如果（禁止，选中）{
推车推（“香蕉”）；
}否则{
提醒（'请选择'）；
}
display.innerHTML='您的购物车：'+购物车.toString（）；
})；
苹果


香蕉






方法将事件处理程序附加到指定元素。方法将事件处理程序附加到元素，而不覆盖现有事件处理程序
此处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=[]；
如果（应用程序已选中）{
推车推（“苹果”）；
}否则，如果（禁止，选中）{
推车推（“香蕉”）；
}否则{
提醒（'请选择'）；
}
display.innerHTML='您的购物车：'+购物车.toString（）；
})；
苹果


香蕉






移动var cart=[]；
&&&display.innerHTML='your cart:'+cart.toString（）；
handler@Satpal这很有效，谢谢，但为什么呢？根据您当前的实现，代码display.innerHTML…
在页面加载时执行，以后再也不会执行。Movevar cart=[]；
&&&display.innerHTML='您的购物车：'+购物车.toString（）；
事件内部handler@Satpal这很有效，谢谢，但是为什么呢？根据您当前的实现，代码display.innerHTML…
在页面加载时执行，以后再也不会执行了。@Satpal我已经为自己添加了一个解释understanding@Satpal我在自己的理解中添加了一个解释