728x90
반응형
<element 중 img 생성 연습하기>
1. createImg()
//1. 이름이 rdobtn인 요소들을 모두 가지고 온다.
//2. 가져온 요소들을 반복문을 통해 하나씩 확인하면서
// 만일 체크되어 있다면 value값을 가지고 온다(변수: radioVal)
//3. radioVal에 저장된 value값을 통해 img태그를 생성해서
// src 경로에 주입한다(경로: img)
//4. 화면에 출력한다.
2. deleteImg() : 삭제버튼을 누르면 사진이 사라지도록 한다.
<body>
<body>
<input type="radio" name="rdobtn" value="siba.jpg"/>그림1<br>
<input type="radio" name="rdobtn" value="siba.jpg"/>그림2<br>
<input type="radio" name="rdobtn" value="siba.jpg"/>그림3<br>
<button onclick="createImg();">이미지 생성</button>
<button onclick="deleteImg();">이미지 삭제</button>
<div id="imgview">
<img alt="" src=""/>
</div>
</body>
<script>
<style type="text/css">
img, #imgview{width:300px; height:300px;}
</style>
<script type="text/javascript">
funtion createImg(){
//1. 이름이 rdobtn인 요소들을 모두 가지고 온다.
var rdobtn = document.getElementByName("rdobtn");
//2. 가져온 요소들을 반복문을 통해 하나씩 확인하면서
// 만일 체크되어 있다면 value값을 가지고 온다(변수: radioVal)
var radioVal = "";
for(var i = 0; i<rdobtn.length; i++){
if(rdobtn[i].checked){
radioVal = rdobtn[i].value;
}
}
//3. radioVal에 저장된 value값을 통해 img태그를 생성해서
// src 경로에 주입한다(경로: img)
var img = document.createElement("img");
img.setAttribute("src", "image/" + radioVal);
//4. 화면에 출력한다.
var div = document.getElementById("imgview");
var child = document.querySelector("#imgview>img");
div.replaceChild(img, child);
}
function deleteImg(){
// 방법 1
document.getElementById("imgview").innerHTML = "<img src=''>";
// 방법 2
var img = document.createElement("img");
var div = document.getElementById("imgview");
var child = document.querySelector("#imgview>img");
div.replaceChild(img, child);
}
</script>728x90
반응형
'Web > JavaScript' 카테고리의 다른 글
| [JS]DOM_태그추가삭제 (0) | 2020.07.30 |
|---|---|
| [JS]DOM_getElement (0) | 2020.07.30 |
| [JS]DOM_element생성 (0) | 2020.07.30 |
| [JS]String (0) | 2020.07.28 |
| [JS]Math (0) | 2020.07.28 |
