제목에서 알 수 있듯이이 행동에 대한 용의자를 찾을 수없는 것 같습니다.
내 스크립트는 다음과 같습니다.
function myFunction() {
var marriedInputs = document.getElementById("marriedInputs");
var status = document.getElementById("maritalStatusList").value;
if (status == "Married") {
var breaks = marriedInputs.getElementsByTagName("BR");
for (var i = 0; i < breaks.length; i++) {
marriedInputs.removeChild(breaks[i]);
}
var spouseLabel = document.createElement("LABEL");
spouseLabel.setAttribute("id", "spouseLabelID");
spouseLabel.for = document.getElementById("spouseLname");
var spouseLabelText = document.createTextNode("SPOUSE: ");
spouseLabel.appendChild(spouseLabelText);
var spouseLnameInput = document.createElement("INPUT");
spouseLnameInput.setAttribute("id","spouseLname");
spouseLnameInput.setAttribute("type","text");
spouseLnameInput.setAttribute("name","spouseLastName");
spouseLnameInput.setAttribute("placeholder","Last Name");
var spouseFnameInput = document.createElement("INPUT");
spouseFnameInput.setAttribute("id","spouseFname");
spouseFnameInput.setAttribute("type","text");
spouseLnameInput.setAttribute("name","spouseFirstName");
spouseFnameInput.setAttribute("placeholder","First Name");
var spouseMnameInput = document.createElement("INPUT");
spouseMnameInput.setAttribute("id","spouseMname");
spouseMnameInput.setAttribute("type","text");
spouseLnameInput.setAttribute("name","spouseMiddleName");
spouseMnameInput.setAttribute("placeholder","Middle Name");
var childrenNumInput = document.createElement("INPUT");
childrenNumInput.setAttribute("id","childrenNum");
childrenNumInput.setAttribute("type","text");
childrenNumInput.setAttribute("name","numOfChildren");
childrenNumInput.setAttribute("placeholder","Number of Children");
childrenNumInput.setAttribute("onkeypress","return isNumberKey(event)");
var contactNumInput = document.createElement("INPUT");
contactNumInput.setAttribute("id","contactNum");
contactNumInput.setAttribute("type","text");
contactNumInput.setAttribute("name","spouseContactNo");
contactNumInput.setAttribute("placeholder","Contact Number");
contactNumInput.setAttribute("onkeypress","return isNumberKey(event)");
var addressInput = document.createElement("INPUT");
addressInput.setAttribute("id","address");
addressInput.setAttribute("type","text");
addressInput.setAttribute("name","spouseAddress");
addressInput.setAttribute("placeholder","Address");
marriedInputs.appendChild(spouseLabel);
marriedInputs.appendChild(document.createElement("BR"));
marriedInputs.appendChild(spouseLnameInput);
marriedInputs.appendChild(document.createElement("BR"));
marriedInputs.appendChild(spouseFnameInput);
marriedInputs.appendChild(document.createElement("BR"));
marriedInputs.appendChild(spouseMnameInput);
marriedInputs.appendChild(document.createElement("BR"));
marriedInputs.appendChild(childrenNumInput);
marriedInputs.appendChild(document.createElement("BR"));
marriedInputs.appendChild(contactNumInput);
marriedInputs.appendChild(document.createElement("BR"));
marriedInputs.appendChild(addressInput);
marriedInputs.appendChild(document.createElement("BR"));
document.getElementById("spouseLname").required = true;
document.getElementById("spouseFname").required = true;
document.getElementById("spouseMname").required = true;
document.getElementById("childrenNum").required = true;
document.getElementById("contactNum").required = true;
document.getElementById("address").required = true;
} else {
if (document.body.contains(document.getElementById("spouseLname"))) {
var breaks = marriedInputs.getElementsByTagName("BR");
for (var i = 0; i < breaks.length; i++) {
marriedInputs.removeChild(breaks[i]);
}
marriedInputs.removeChild(document.getElementById("spouseLabelID"));
marriedInputs.removeChild(document.getElementById("spouseLname"));
marriedInputs.removeChild(document.getElementById("spouseFname"));
marriedInputs.removeChild(document.getElementById("spouseMname"));
marriedInputs.removeChild(document.getElementById("childrenNum"));
marriedInputs.removeChild(document.getElementById("contactNum"));
marriedInputs.removeChild(document.getElementById("address"));
}
}
}
누구든지 문제를 정확히 지적 할 수 있습니까? 나는 실제로 js 사람이 아니며 선택 요소의 일부 변경을 위해 이것을 필요로했습니다.
이 스크립트의 더 깨끗한 버전을 작성하는 데 도움이되는 모든 팁을 감사드립니다. 건배!!
HTML을 잊어 버렸습니다.
Marital Status:
<select id="maritalStatusList" onchange="myFunction()">
<option value="Single">Single
<option value="Married">Married
<option value="Divorced">Divorced
<option value="Widowed">Widowed
</select>
<div id="marriedInputs">
</div>
를 가져오고 br제거하는 데 몇 가지 문제가 있습니다. 나는 그것을 querySelector로 바꾸려고 시도했지만 잘 작동했습니다.
function removeBRs() {
var breaks = document.querySelectorAll('#marriedInputs br')
for (var i = 0; i < breaks.length; i++) {
marriedInputs.removeChild(breaks[i]);
}
}
JSFiddle .
또한 부수적으로 많은 중복 코드가 있습니다. 공통 논리를 사용하여 더 작은 함수로 내보내십시오. 또한 married컨테이너 내부의 case에 대한 모든 필드를 래핑 div하고이 div를 main에 추가 할 수 있습니다 #marriedInputs. 이렇게하면 쉽게 제거 할 수 있습니다.
다음은 업데이트 된 JSFiddle 입니다. 그래도 wrapper div대신 사용 하는 것이 좋습니다 br. 또한 사용을 제거 removeBRs하고 삭제했습니다.
도움이 되었기를 바랍니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다