아핫뉴스실시간 인기검색어
아핫뉴스 화산 이미지
아하
생활

생활꿀팁

그윽한고니91
그윽한고니91

쇼핑몰 카테고리 javascript 코드 포함 재질문

<script type="text/javascript">

function productChange_top(p) {

var o_outer=["PADDING","COAT","JAKET"];

var t_top=["SHIRT","1/2 T=SHIRT","T-SHIRT","HOODY","KNIT"];

var b_bottom=["DENIM","SLACKS","SHORT PANTS","COTTON PANTS"];

var s_shoes=["SNIKERS","BOOTS","LOAFERS"];

var midoption=document.getElementByID("productmiddle");

if (p.value=="O") var m = o_outer;

else if (p.value=="T") var m = t_top;

else if (p.value=="B") var m = b_bottom;

else if (p.value=="S") var m = s_shoes;

mid_option.options.length=0;

var count=1;

var opt = document.createElement("option");

opt.value="";

mid_option.appendChild(opt);

for (x in m) {

var opt=document.createElement("option");

opt.value=p.value+x;

opt.innerHTML=m[x];

mid_option.appendChild(opt);

}

}

function pnumValue() {

var pval=productChange_top.value;

document.getElementById('pnum').value=pval;

}

</script>

스크립트 부분입니다

<tr>

<td>상품 분류</td>

<td><select name="producttop" id="producttop" class="productselecttop"

onchange="productChange_top(this)" required="required">

<option value="O">OUTER</option>

<option value="T">TOP</option>

<option value="B">BOTTOM</option>

<option value="S">SHOES</option>

<option value="A">ACC</option>

</select>

<select name="pnum" id="product_middle" onchange="pnumValue(this)"

class="productselectmiddle">

</select></td>

</tr>

html 부분입니다 왜 저 옵션들을 누르면 스크립트 부분으로 안 넘어가질까요ㅜㅜ

    55글자 더 채워주세요.
    3개의 답변이 있어요!
    • 탈퇴한 사용자
      탈퇴한 사용자

      안녕하세요.

      수정할 부분이 너무 많네요..;;

      우선 돌아가게끔만 수정했습니다.

      - html

      <table> <tr> <td>상품 분류</td> <td><select name="producttop" id="producttop" class="productselecttop" onchange="productChange_top(this)" required="required"> <option value="O">OUTER</option> <option value="T">TOP</option> <option value="B">BOTTOM</option> <option value="S">SHOES</option> <option value="A">ACC</option> </select> <select name="pnum" id="productmiddle" onchange="pnumValue(this)" class="productselectmiddle"> </select></td> </tr> </table>

      - javascript

      var o_outer=["PADDING","COAT","JAKET"]; var t_top=["SHIRT","1/2 T=SHIRT","T-SHIRT","HOODY","KNIT"]; var b_bottom=["DENIM","SLACKS","SHORT PANTS","COTTON PANTS"]; var s_shoes=["SNIKERS","BOOTS","LOAFERS"]; function productChange_top(p) { var mid_option=document.getElementById("productmiddle"); var m; if (p.value=="O") m = o_outer; else if (p.value=="T") m = t_top; else if (p.value=="B") m = b_bottom; else if (p.value=="S") m = s_shoes; mid_option.options.length=0; var count=1; var opt = document.createElement("option"); opt.value=""; mid_option.appendChild(opt); m.forEach(function(x) { var opt=document.createElement("option"); opt.value=p.value+x; opt.innerHTML=x; mid_option.appendChild(opt); }); } function pnumValue(productmiddle) { var producttop = document.getElementById('producttop'); console.log('producttop :', producttop.value); console.log('productmiddle :', productmiddle.value); }

    • 완강한달팽이11
      완강한달팽이11

      크롬에서 개발자 도구 (Ctrl + Shift + I)로 확인해 보면, 아래와 같은 에러가 발생하고 있습니다.

      // 아래와 같이 수정하였습니다.

      // 왼쪽이 변경 전, 오른쪽이 변경 후 입니다.

      1. mid_option, getElementByID, product_middle, m 에 문제가 있어보입니다.

      아래의 그림처럼 변경 했습니다.

      2. 이쪽은 의도를 잘 몰라서, 주석처리 했습니다. (참고로, 주석을 지우면 에러가 발생합니다)

      3. 두번째 셀렉트 박스에는 초기값을 넣어 두시면 됩니다.

      // 수정한 전체 소스입니다.

      <!DOCTYPE html> <html> <head> <script type="text/javascript"> function productChange_top(p) { var o_outer=["PADDING","COAT","JAKET"]; var t_top=["SHIRT","1/2 T=SHIRT","T-SHIRT","HOODY","KNIT"]; var b_bottom=["DENIM","SLACKS","SHORT PANTS","COTTON PANTS"]; var s_shoes=["SNIKERS","BOOTS","LOAFERS"]; var mid_option=document.getElementById("product_middle"); var m; if (p.value=="O") { m = o_outer; } else if (p.value=="T") { m = t_top; } else if (p.value=="B") { m = b_bottom; } else if (p.value=="S") { m = s_shoes; } mid_option.options.length=0; var count=1; var opt = document.createElement("option"); opt.value=""; mid_option.appendChild(opt); for (x in m) { var opt=document.createElement("option"); opt.value=p.value+x; opt.innerHTML=m[x]; mid_option.appendChild(opt); } } function pnumValue() { //var pval = productChange_top.value; //document.getElementById('pnum').value=pval; } </script> </head> <body> 스크립트 부분입니다 <tr> <td>상품 분류</td> <td> <select name="producttop" id="producttop" class="productselecttop" onchange="productChange_top(this)" required="required"> <option value="O">OUTER</option> <option value="T">TOP</option> <option value="B">BOTTOM</option> <option value="S">SHOES</option> <option value="A">ACC</option> </select> <select name="pnum" id="product_middle" onchange="pnumValue(this)" class="productselectmiddle"> <option value=""></option> <option value="O0">PADDING</option> <option value="O1">COAT</option> <option value="O2">JAKET</option> </select> </td> </tr> </body> </html>

    • 스마트한나팔새143
      스마트한나팔새143

      안녕하세요,

      코드를 확인해보니 오탈자가 있어서 작동이 정상적으로 되지 않는 것으로 보입니다.

      수정한 코드와 동작하지 않았던 이유를 적어드립니다

      <script type="text/javascript"> function productChange_top(p) { var o_outer=["PADDING","COAT","JAKET"]; var t_top=["SHIRT","1/2 T=SHIRT","T-SHIRT","HOODY","KNIT"]; var b_bottom=["DENIM","SLACKS","SHORT PANTS","COTTON PANTS"]; var s_shoes=["SNIKERS","BOOTS","LOAFERS"]; var mid_option=document.getElementById("product_middle"); // var midoption=document.getElementByID("productmiddle"); // 1. midoption => mid_option : 변수명이 아래와 다름 // 2. getElememtByID => getElememtById : 사용하는 함수명이 틀림 // 3. productmiddle => product_middle : ID 명이 html 부분과 다름 if (p.value=="O") var m = o_outer; else if (p.value=="T") var m = t_top; else if (p.value=="B") var m = b_bottom; else if (p.value=="S") var m = s_shoes; mid_option.options.length=0; var count=1; var opt = document.createElement("option"); opt.value=""; mid_option.appendChild(opt); for (x in m) { var opt=document.createElement("option"); opt.value=p.value+x; opt.innerHTML=m[x]; mid_option.appendChild(opt); } } function pnumValue() { var pval=productChange_top.value; document.getElementById('pnum').value=pval; } </script> 스크립트 부분입니다 <tr> <td>상품 분류</td> <td><select name="producttop" id="producttop" class="productselecttop" onchange="productChange_top(this)" required="required"> <option value="O">OUTER</option> <option value="T">TOP</option> <option value="B">BOTTOM</option> <option value="S">SHOES</option> <option value="A">ACC</option> </select> <select name="pnum" id="product_middle" onchange="pnumValue(this)" class="productselectmiddle"> </select></td> </tr>

      감사합니다