드롭 다운 메뉴 선택은 클래스를 통해 필드를 숨 깁니다

Question

값을 선택하면 필드를 숨기거나 표시합니다. 그 뒤에 PHP 코드가 있기 때문에 클래스를 선택해야합니다.

필드를 숨기고 표시 할 때 패딩을 다시 추가하는 방법이 있는지 궁금합니다.

"document.getElementsByClassName("className");"을 사용해 보았지만 제대로 작동하지 못했습니다.

는 HTML :

<select id="form" onchange="ChangeDropdowns(this.value);"> 
    <option value="hide">hide</option> 
    <option value="show">show</option> 
</select> 
<input type="text" id="testField" class="testField" /> 

자바 스크립트 : 당신은 하나의 요소가 querySelector를 사용하려는 경우 당신은 잘못 querySelectorAll 기능을 사용하는

function ChangeDropdowns(value) { 
    if (value == "show") { 
     document.getElementById('testField').style.display = 'none'; 
    } else if (value == "hide") { 
     document.getElementById('testField').style.display = 'block'; 
    } 
} 

Answer 1

, 그것은 요소의 배열을 반환 이 경우에는 원하는 것처럼 보입니다.

HTML

<input type="text" id="testField" class="testField2"/> 

JS

//Uses class, a period needs to be before the class name, when selecting by class 
document.querySelector(".testField2").style.display='none'; 

//Uses id, a # needs to be before the id name, when selecting by id 
document.querySelector("#testField").style.display='none'; 

당신이 그런

var elements = document.querySelectorAll(".testField"); 
elements[0].style.display='none'; 

귀하의 바이올린으로 액세스 할 수 있도록이, 배열을 반환합니다 querySelectorAll를 사용하여 쿠데타를 일으켰다. 르 오류 : onchange를에

1. 함수 이름은 실제 함수 이름이 onLoad이 너무 함수 않네는 전역 범위에서 선언되고 제작 된 랩, 선택했다

2. 일치 didnt한다.

3. 당신은 ID가 이름 앞에 어떤 기간 또는 #이 이름이 요소 태그 이름