Question

我只有两个项目（radiobtns）苹果，香蕉，当我对click事件功能有所帮助时，它在我的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>

Answer 1

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>

Answer 2

您应该更新事件侦听器

中的innerHTML

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

Simple Array推车无法正常显示

2 个答案: