출력 값을 기준으로 동일한 이미지의 '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과 자바 스크립트를 function으로 구분하는 것이 좋습니다.

이 기능을 사용하려면 다음 단계를 수행해야합니다.

1. 변수에 입력 값을 가져옵니다.
2. 을 추가로 http://via.placeholder.com/200x150 교체 작업 코드를

   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>

   을 루프 (c 회) 여기

이다 사용하여 이미지를 추가 document.getElementById().value

사용하여 표시 당신의 이미지 경로 .

희망이 있습니다.