라디오 버튼으로 DIV 제어하려고 합니다.
본문
라디오버튼으로 제품가격 DIV를 제어하고싶은데 3일째 구글링과 잔머리로 조합을해도 계속 막혀서 질문하게 되었습니다.
-스크립트 내용-
function checking(s) {
alert(s)
if(s == '1GB'){
document.getElementByid('f' + s).style.display='';
}else if(s == "2GB"){
document.getElementByid('f' + s).style.display='';
}else if(s=="3GB"){
document.getElementByid('f' + s).style.display='';
}else if(s=="4GB"){
document.getElementByid('f' + s).style.display='';
}else if(s=="5GB"){
document.getElementByid('f' + s).style.display='';
}
}
- 라디오 내용 -
<input id='$val' type='radio' name='od_1' value='$val' onclick='checking(this.value)' data-tab='$val'>
-DIV 내용-
<div id="f1GB" style="display: none;"><?php echo $pricelist[0] ?></div>
<div id="f2GB" style="display: none;"><?php echo $pricelist[1] ?></div>
<div id="f3GB" style="display: none;"><?php echo $pricelist[2] ?></div>
<div id="f4GB" style="display: none;"><?php echo $pricelist[3] ?></div>
<div id="f5GB" style="display: none;"><?php echo $pricelist[4] ?></div>
이렇게 작성하였는데 alert(s)에는 벨류값 1GB를 선택하면 1GB가 정상적으로 출력되는데
IF문은 아예 작동이 안되는데 제가 잘못입력한건가요??
답변 2
Byid 가 아닌 ById 가 되어야 합니다.
// document.getElementByid('f' + s).style.display='';
document.getElementById('f' + s).style.display='';
<script>
function checking(s) {
alert(s)
if(s == '1GB'){
document.getElementById('f' + s).style.display='';
}else if(s == "2GB"){
document.getElementById('f' + s).style.display='';
}else if(s=="3GB"){
document.getElementById('f' + s).style.display='';
}else if(s=="4GB"){
document.getElementById('f' + s).style.display='';
}else if(s=="5GB"){
document.getElementById('f' + s).style.display='';
}
}
</script>
<label><input id='$val' type='radio' name='od_1' value='1GB' onclick='checking(this.value)' data-tab='$val'> 1GB</label>
<label><input id='$val' type='radio' name='od_1' value='2GB' onclick='checking(this.value)' data-tab='$val'> 2GB</label>
<label><input id='$val' type='radio' name='od_1' value='3GB' onclick='checking(this.value)' data-tab='$val'> 3GB</label>
<label><input id='$val' type='radio' name='od_1' value='4GB' onclick='checking(this.value)' data-tab='$val'> 4GB</label>
<label><input id='$val' type='radio' name='od_1' value='5GB' onclick='checking(this.value)' data-tab='$val'> 5GB</label>
<div id="f1GB" style="display: none;">10,000</div>
<div id="f2GB" style="display: none;">20,000</div>
<div id="f3GB" style="display: none;">30,000</div>
<div id="f4GB" style="display: none;">40,000</div>
<div id="f5GB" style="display: none;">50,000</div>
document.getElementByid
->
Document.getElementById