Simple Array cart dosen't правильно отображен

У меня есть только два элемента (radobtns) яблоко, банан, когда я выполняю функцию события click, он работает правильно, когда я console.log (cart), однако, когда я пытаюсь отобразить его в в абзаце он не добавляет новые элементы, почему?Simple Array cart dosen't правильно отображен

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

источник

2017-01-30 Ahmed Muhammad

Move 'вар корзина = [] ; '&&' display.innerHTML = 'ваша корзина:' + cart.toString(); 'внутри обработчика событий – Satpal

@Satpal это сработало спасибо, но почему же? –

В соответствии с вашей текущей реализацией код 'display.innerHTML ...' выполняется при загрузке страницы, никогда после этого. – Satpal

Метод addEventListener() прикрепляет обработчик событий указанного element.The addEventListener() методы присоединяет обработчик событий к элементу без перезаписи существующих обработчиков событий ,

Здесь var add = document.getElementById('addid'); этот элемент события click должен контролироваться через прослушиватель событий. Поэтому всякий раз, когда происходит событие щелчка add.addEventListener('click', function() {, этот метод запускается. Поэтому любые изменения, которые вы ожидаете, должны быть определены внутри этой функции.

Поэтому переместите display.innerHTML = 'your cart : ' + cart.toString(); внутри функции прослушивания событий, чтобы увидеть изменение. Плюс Move 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>

источник

2017-01-30 15:49:21

@Satpal Я добавил объяснение в свое собственное понимание –

Теперь его хороший ответ – Satpal

@Satpal Спасибо, что указали мою ошибку –

Вы должны обновить innerHTML внутри слушателя событий

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

источник

2017-01-30 15:48:14

Simple Array cart dosen't правильно отображен

ответ

Смежные вопросы