シンプルなアレイカートが正しく表示されない

私はconsole.log（カート）の時に正しく動作するクリックイベント機能をexceuteすると、リンゴ、バナナの2アイテムしか持っていませんが、新しい要素を追加しない段落、なぜですか？シンプルなアレイカートが正しく表示されない

<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

移動 'VARカート=を[]選択することができ、そのラジオボタン一つの値として再び再初期化する必要があります; && 'display.innerHTML = 'あなたのカート：' + cart.toString（）;'イベントハンドラ内 – Satpal

@Satpalこれはうまくいきましたが、なぜですか？ –

現在の実装では、ページが読み込まれたときに 'display.innerHTML ... 'というコードが実行されます。 – Satpal

内のinnerHTMLを更新する必要があり、既存のイベントハンドラを上書きせずに要素にイベントハンドラをアタッチ。

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

出典

2017-01-30 15:49:21

@Satpal私は自分の理解に説明を追加しました –

これは良い答えです – Satpal

@Satpal私の間違いを指摘してくれてありがとう –

あなたはaddEventListener()メソッドは、指定されたelement.The addEventListener()方法にイベントハンドラをアタッチイベントリスナー

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

出典

2017-01-30 15:48:14

シンプルなアレイカートが正しく表示されない

答えて

関連する問題