简单阵列推车剂量无法正确显示

我只有两个项目（radiobtns）苹果，香蕉，当我超过点击事件功能时，当我控制台时它工作正常.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>

addEventListener() 方法将事件处理程序附加到指定的元素。addEventListener() 方法将事件处理程序附加到元素，而不会覆盖现有事件处理程序。

这里var add = document.getElementById('addid');这个元素点击事件是通过事件侦听器来控制的。因此，每当发生点击事件add.addEventListener('click', function() {就会触发此方法。因此，无论您期望什么更改，都需要在此函数中定义。

因此，在

事件侦听器函数内移动display.innerHTML = 'your cart : ' + cart.toString();以查看更改。加var cart = [];移动，因为每次有存储更改值的 change 变量需要再次重新初始化，因为它是一个单选按钮可以选择一个值

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>

你应该更新事件侦听器中的 innerHTML

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

相关内容

最新更新

热门标签：