IE에서이 JavaScript 코드가 작동하지 않는 이유는 무엇입니까?

Question

IE10에서이 기능이 작동하지 않는 이유는 무엇입니까? Chrome, Firefox, Opera 및 Safari에서 잘 작동합니다.

HTML :

<form action="#"> 
    <label for="NoOfRooms">Select number of rooms required</label> 
    <select id="NoOfRooms" onchange="showHide()"> 
     <option value="1" selected="selected">1 room</option> 
     <option value="2">2 rooms</option> 
     <option value="3">3 rooms</option> 
    </select> 
    <br /> 
    <label id="Room1TypeLabel" for="Room1Type" class="inline">Room 1:</label> 
    <select id="Room1Type"> 
     <option value="1" selected="selected">Single</option> 
     <option value="2">Double</option> 
     <option value="3">Triple</option> 
    </select> 
    <br /> 
    <label id="Room2TypeLabel" for="Room2Type" class="hidden">Room 2:</label> 
    <select id="Room2Type" class="hidden"> 
     <option value="1">Single</option> 
     <option value="2" selected="selected">Double</option> 
     <option value="3">Triple</option> 
    </select> 
    <br /> 
    <label id="Room3TypeLabel" for="Room1Type" class="hidden">Room 3:</label> 
    <select id="Room3Type" class="hidden"> 
     <option value="1">Single</option> 
     <option value="2">Double</option> 
     <option value="3" selected="selected">Triple</option> 
    </select> 
</form> 

자바 스크립트 :

function showHide() { 
    "use strict"; 
    var NoOfRooms = document.getElementById("NoOfRooms"); 
    var NoOfRoomsValue = NoOfRooms.options[NoOfRooms.selectedIndex].value; 
    if (NoOfRoomsValue == 2) { 
     Room2Type.style.display = "inline"; 
     Room3Type.style.display = "none"; 
     Room2TypeLabel.style.display = "inline"; 
     Room3TypeLabel.style.display = "none"; 
    } else if (NoOfRoomsValue == 3) { 
     Room2Type.style.display = "inline"; 
     Room3Type.style.display = "inline"; 
     Room2TypeLabel.style.display = "inline"; 
     Room3TypeLabel.style.display = "inline"; 
    } else if (NoOfRoomsValue == 1) { 
     Room2Type.style.display = "none"; 
     Room3Type.style.display = "none"; 
     Room2TypeLabel.style.display = "none"; 
     Room3TypeLabel.style.display = "none"; 
    } else alert("Error. Please try again."); 
} 

CSS :

.hidden { 
      display: none; 
     } 

Fiddle.

Answer 1

전체 스크립트를 포함했는지는 모르겠지만 어쨌든 Firefox에서는 작동하지 않습니다.

각 라벨/입력을 전환 할 필요가 없도록 div의 입력란을 줄 바꿈하는 것이 좋습니다. 당신은 라이브러리를 사용하여 직접 이벤트를 할당함으로써 HTML에서 onchange = 속성을 유지할 수 있습니다. 이는 브라우저 간 호환에 도움이됩니다.

는 좀 JQuery와에 던졌다 (당신은 단지 JS의 단일 비트를하고 있다면 과잉 수 있습니다,하지만 난 당신이 의심) 그것은 잘 작동 : 그것은 몇 가지 정리를 필요로

하지만 난 그것을 던졌다 함께 : 루프 또는 오른쪽으로 필드를 보여주는보다 동적 인 방법을 사용하여

$(function(){ 

    $('#NoOfRooms').change(function(){ 
     if($(this).val() == 1){ 
      $('#room1').show(); 
      $('#room2, #room3').hide(); 
     } 
     else if($(this).val() == 2){ 
      $('#room1,#room2').show(); 
      $('#room3').hide(); 
     } 
     else if($(this).val() == 3){ 
      $('div').show(); 
     } 
    }).trigger('change'); 
}); 

http://jsfiddle.net/uQVMF/4/

는 개 이상의 객실 필드를 사용하여 특히, 가장 좋습니다.

Answer 2

좋아 여기 직장에서의 문제 때문에 몇 :

JSFiddle 자동으로 JQuery와의 onLoad 함수의 코드를 래핑 때문에 바이올린이 작동하지 않는 첫 번째. JSFiddle의 왼쪽 사이드 바에서 "onLoad"를 "No Wrap"로 전환하면이 문제가 해결되고 Chrome 및 Firefox에서 작동하는 코드가 생성됩니다.

두 번째 IE는 onchange가 필요합니다.

마지막으로 당신은 당신이 선택했던 같은 식으로 Room2Type, Room3Type, Room2TypeLabel 등 변수를 정의해야합니다

document.getElementById("Room2Type").style 

그러나 위의 모든 코드가 '년후 왜 이해 단지, 그래서 정말 일하고있어. 당신은 정말로 @BotskoNet이 앞으로 쓴 글의 라인을 따라 뭔가를 사용해야 만합니다.