선 색을 선택했을 때 선 색상을 변경 하고 싶은데 도저히 어떻게 해야할지 모르겠습니다 도와주세요..ㅜㅜ
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script>
function changeLine(){
var borders=document.getElementById("Form");
var sel=document.getElementById("line");
if(sel[0].selected==true)
borders.style.borderStyle="none";
else if(sel[1].selected==true)
borders.style.borderStyle="solid";
else if(sel[2].selected==true)
borders.style.borderStyle="dotted";
}
sum=0;
function changeWidth(cBox){
var borders=document.getElementById("Form");
var Width=document.getElementById("borderW");
sum=parseInt(cBox.value);
borders.style.borderWidth=sum+"px";
}
</script>
</head>
<body onload="change()">
<h3>도형 서식 폼 만들기</h3><hr>
<form>
<fieldset id=Form>
<legend>도형 서식</legend>
<p>
선종류<select id="line" size="3" onchange="changeLine()">
<option value="none">선없음</option>
<option value="solid">실선</option>
<option value="dotted">점선</option>
</select></p>
<p>
선두께<input type="number" min="0" max="20" step="1" id="borderW" onchange="changeWidth(this)">
선색<input type="color" value="#00BFFF" onchange="document.fieldset.style.borderColor=this.value">
</p>
</fieldset>
</form>
</body>
</html>
어떤 문제를 풀려고 하는지 모르겠습니다.
우선 여러가지 잘못된 코드가 보입니다.
<body onload="change()">에서 처음에 웹 페이지가 로딩될 때 change()함수를 호출하고 있는데
이 웹 페이지에는 change() 함수가 작성되어 있지 않네요.
그리고 선색<input type="color" value="#00BFFF" onchange="document.fieldset.style.borderColor=this.value">
에서 document.fieldset.style.borderColor 부분이 틀렸습니다.
제 상상으로 경계선 색을 바꾸는 것이면 다음과 같은 코드를 원하는 것일 수도 있겠네요.
제가 수정해보았는데, 해보세요.
(그리고 질문을 지우지 말았으면 합니다.)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script>
function changeLine(){
var borders=document.getElementById("Form");
var sel=document.getElementById("line");
if(sel[0].selected==true)
borders.style.borderStyle="none";
else if(sel[1].selected==true)
borders.style.borderStyle="solid";
else if(sel[2].selected==true)
borders.style.borderStyle="dotted";
}
sum=0;
function changeWidth(cBox){
var borders=document.getElementById("Form");
var Width=document.getElementById("borderW");
sum=parseInt(cBox.value);
borders.style.borderWidth=sum+"px";
}
function f(color) {
document.getElementById("Form").style.borderColor = color;
}
</script>
</head>
<body>
<h3>도형 서식 폼 만들기</h3><hr>
<form>
<fieldset id=Form>
<legend>도형 서식</legend>
<p>
선종류<select id="line" size="3" onchange="changeLine()">
<option value="none">선없음</option>
<option value="solid">실선</option>
<option value="dotted">점선</option>
</select></p>
<p>
선두께<input type="number" min="0" max="20" step="1" id="borderW" onchange="changeWidth(this)">
선색<input type="color" value="#00BFFF" onchange="f(this.value)">
</p>
</fieldset>
</form>
</body>
</html>