出力値に基づいて同じイメージの「x」番号を追加するにはどうすればよいですか？

Question

私は入力と出力の値に基づいて同じイメージを何回も挿入できるようにすることについて、非常に新しくコーディングしています。現在の基本的な追加のコードは次のとおりです。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 
    <input type="number" id="a" value="1"> + 
    <input type="number" id="b" value="0"> = 
    <output name="x" for="a b"></output> 
</form> 

ここで、私が得た出力値に対応する数の画像を追加できます。これどうやってするの？また、答えが明白であれば、申し訳ありません。私はこれに非常に新しいです。

Answer 1

良い例として、HTMLとJavaScriptをfunctionで区切ってください。

この手順では、この手順を実行する必要があります。

1. 変数に入力値を取得します。
2. 作業コード

   var update =() => { 
    
       let a = parseInt(document.getElementById('a').value); 
    
       let b = parseInt(document.getElementById('b').value); 
    
       let c = isNaN(a + b) ? 0 : (a + b); 
    
       document.getElementById('x').value = c; 
    
   
    
       document.getElementById('images').innerHTML = ''; 
    
       for (let i = 0; i < c; i++) { 
    
       document.getElementById('images').innerHTML += '<img src="http://via.placeholder.com/200x150">'; 
    
       } 
    
   }

   <form oninput="update();"> 
    
       <input type="number" id="a" value="1"> + 
    
       <input type="number" id="b" value="0"> = 
    
       <output id="x" for="a b"></output> 
    
   </form> 
    
   
    
   <div id='images'></div>

   がでhttp://via.placeholder.com/200x150を交換している。ここ

ループを使用して（c回）画像を追加document.getElementById().value

を使用して、ディスプレイを追加します。あなたのイメージパス。

希望します。