제가 원하는 색깔로 변경했을 때 사진의 모서리색상을 바꿀려 했는데 적용이 되지않습니다.
제가 선택한 색으로 바뀌게 할려면 무엇을 추가해야 하는지 궁금합니다.
<!DOCTYPE html>
<html>
<head><title>연습</title>
<script>
function change(obj){
var color = document.getElementById("colorInput").value;
document.body.style.borderColor= color;
}
</script>
</head>
<body>
<h3>연습</h3>
<hr>
<form>
<input type="color" id="colorInput"
onchange="change(this)">
<img style="border: 20px solid blue" src="park/mango.jpg" onchange="bgchange(this)"
width="640" height="360">
</form>
</body>
</html>
3가지 문제에 대해 알려드립니다.
1. <img style="border: 20px solid blue" src="park/mango.jpg" onchange="bgchange(this)" 에서
onchange() 는 무슨 용도로 하였나요?
--> 필요없는 것 같으니 지우는 것이 좋겠습니다.
2. function change(obj){
var color = document.getElementById("colorInput").value;
document.body.style.borderColor= color;
}
이 함수의 의미에 대해서 잘 알고 있어야 문제를 풀 수 있습니다.
--> 이 함수의 매개변수로 사용한 obj를 함수에서 전혀 이용하고 있지 않습니다. obj가 바로 document.getElementById("colorInput")가 리턴하는 객체와 동일합니다.
그러므로 이 함수는 다음과 같이 고쳐야 합니다.
function change(obj){
var color = obj.value;
document.body.style.borderColor= color;
}
그리고 이 함수 내에 document.body.style.borderColor= color; 는 혹시 무슨 뜻으로 사용하였나요?
이것은 body 태그, 그러니까 웹 페이지 전체의 테두리 색을 color로 지정하겠다는 뜻입니다. 이 문제와 아무 상관없는 코드입니다. 이 코드로 지워야 합니다.
3. document.getElementById("colorInput") 에서 getElementById() 함수의 의미를 잘 알고 사용해야 합니다.
document.getElementById("colorInput")의 의미는 id=colorInput라는 속성을 가진 태그를 찾아 리턴해달라는 코드입니다. 이 책의 358페이지를 등을 공부하면 분명해질것니다.
이제 이 질문의 각 부분을 분석하였습니다.
그러면 이제 답을 찾아가 봅시다.
코드를 다음과 같이 고쳐야 합니다.
1. <img> 태그에 "id=myimg" 속성을 넣고,
2. 함수 change()에서 id=myimg인 태그를 찾고 그 DOM 객체의 스타일에서 외곽선의 색을 바꾸는 코드를 삽입해야 합니다.
document.getElementById("myimg").style.borderColor= color;
결과적으로 질문한 분이 원하는 것은 다음 코드입니다.
<!DOCTYPE html>
<html>
<head><title>연습</title>
<script>
function change(obj){
var color = obj.value;
document.getElementById("myimg").style.borderColor= color;
}
</script>
</head>
<body>
<h3>연습</h3>
<hr>
<form>
<input type="color" id="colorInput"
onchange="change(this)">
<img id="myimg" style="border: 20px solid blue" src="park/mango.jpg"
width="640" height="360">
</form>
</body>
</html>
* Q&A에 올린 질문과 저의 답을 지우지 말아 주시기 바랍니다.