click event - onchange

onchange 속성

<form id="myForm">
        <input type="radio" name="select" value="001" onchange="inputChange()">
        <label>선택1</label>
        
        <input type="radio" name="select" value="002" onchange="inputChange()">
        <label>선택2</label>
        
        <input type="radio" name="select" value="003" onchange="inputChange()">
        <label>선택3</label>
        
        <input type="radio" name="select" value="004" onchange="inputChange()">
        <label>선택4</label>
        
        <input type="radio" name="select" value="005" onchange="inputChange()">
        <label>선택5</label>
    </form>

 

1. input의 onchange 속성을 받아 함수를 진행시킨다.

2. 이미지명을 input의 각 value값에 넣어서 반복문으로 innerHTML을 바꿔준다.

function inputChange(){
    let radio=document.querySelectorAll("#myForm > input");

    let radioImg=document.querySelector("#radioImg");
    for(let i=0;i<radio.length;i++){
        if(radio[i].checked==true){
            radioImg.innerHTML="<img width:'150' height='200' src='./../../../Images/" + radio[i].value + ".jpg'>";
        }
    }
}