innerHTML javascript dynamic

Question

현재 자바 스크립트 프로젝트에서 innerHTML 함수에 몇 가지 문제가 있습니다. 본질적으로, 나는 그들이 체크되었는지 아닌지에 따라 (동일한 페이지에 표시되는) 숫자를 변경하는 몇 가지 HTML 폼 체크 박스를 가지고있다. 이 아이디어는 IP 주소와 매우 흡사합니다. 결과는 0에서 255 사이의 숫자입니다.

그러나 사용자가 체크 박스를 클릭 할 때마다 동적으로 변경하려면 해당 번호가 필요합니다. 아이디어는이 포럼에 질문을 할 때 사용되는 개념과 닮았습니다. 입력 할 때 아래의 텍스트가 다이나믹하게 변경되어 변경되는 내용을 정확하게 보여줍니다.

내 코드가 제대로 작동하지 않습니다. 제발 도와 주실 수 있나요? 그것은 합계가 아닌 "정의되지 않은"메시지를 계속 제공합니다. 당신의 도움을 주셔서 감사합니다.

자바 스크립트는

function displayOctets01(){ 
var octet01 = new Array(8); 
octet01[0] = document.getElementById('octect0101'); 
octet01[1] = document.getElementById('octect0102'); 
octet01[2] = document.getElementById('octect0103'); 
octet01[3] = document.getElementById('octect0104'); 
octet01[4] = document.getElementById('octect0105'); 
octet01[5] = document.getElementById('octect0106'); 
octet01[6] = document.getElementById('octect0107'); 
octet01[7] = document.getElementById('octect0108'); 
var firstOctect; 

if(octet01[0]==true){ 
firstOctect+=1; 
} 
else if(octet01[1]==true){ 
firstOctect+=2; 
} 
else if(octet01[2]==true){ 
firstOctect+=4; 
} 
else if(octet01[3]==true){ 
firstOctect+=8; 
} 
else if(octet01[4]==true){ 
firstOctect+=16; 
} 
else if(octet01[5]==true){ 
firstOctect+=32; 
} 
else if(octet01[6]==true){ 
firstOctect+=64; 
} 
else if(octet01[7]==true){ 
firstOctect+=128; 
} 

document.getElementById("octets01").innerHTML = firstOctect; 
} 
else if(octet01[7]==true){ 
firstOctect+=128; 
} 

document.getElementById("octets01").innerHTML = firstOctect; 
} 

뭔가 내가 변수를 처리하고 방법에 wron 수 있습니다 용의자.

DEMO :http://jsfiddle.net/3TyV3/

Answer 1

첫번째 문제는 firstOctet 변수가 초기화되지 않는다는 것이다. 기능 시작시이 값을 0으로 설정해야합니다. 또한 프로그램의 목적을 알지 못하면 else if을 사용하고 싶지 않은 것 같습니다. 모든 확인란을 선택해야합니다. 또한 요소를 == true과 비교하면 안되므로 checked 속성을 확인해야합니다. 또한 jsFiddle이 onLoad으로 실행되도록 설정되어 있기 때문에이 함수는 전역 적으로 사용할 수 없습니다. 마지막으로 출력 할 내용은 id "octets01"인 요소가 없습니다. 이 시도 :

function displayOctets01() { 
    var octet01 = [], 
     firstOctect = 0; 

    octet01[0] = document.getElementById('octect0101'); 
    octet01[1] = document.getElementById('octect0102'); 
    octet01[2] = document.getElementById('octect0103'); 
    octet01[3] = document.getElementById('octect0104'); 
    octet01[4] = document.getElementById('octect0105'); 
    octet01[5] = document.getElementById('octect0106'); 
    octet01[6] = document.getElementById('octect0107'); 
    octet01[7] = document.getElementById('octect0108'); 

    if (octet01[0].checked === true) { 
     firstOctect += 1; 
    } 
    if (octet01[1].checked === true) { 
     firstOctect += 2; 
    } 
    if (octet01[2].checked === true) { 
     firstOctect += 4; 
    } 
    if (octet01[3].checked === true) { 
     firstOctect += 8; 
    } 
    if (octet01[4].checked === true) { 
     firstOctect += 16; 
    } 
    if (octet01[5].checked === true) { 
     firstOctect += 32; 
    } 
    if (octet01[6].checked === true) { 
     firstOctect += 64; 
    } 
    if (octet01[7].checked === true) { 
     firstOctect += 128; 
    } 

    document.getElementById("octets01").innerHTML = firstOctect; 
} 

DEMO : 나는 거짓말을하지 않습니다하지만http://jsfiddle.net/3TyV3/2/

, 나는 몇 가지를 재구성 것입니다. 여기에 내가 그것을 할 것입니다 방법은 다음과 같습니다

window.onload = function() { 
    var checkboxes = document.querySelectorAll('[name="featuresOctet01"]'), 
     i; 
    for (i = 0; i < checkboxes.length; i++) { 
     addEvent(checkboxes[i], "click", clickHandler); 
    } 
}; 

function addEvent(element, eventName, callback) { 
    if (element.addEventListener) { 
     element.addEventListener(eventName, callback, false); 
    } else if (element.attachEvent) { 
     element.attachEvent("on" + eventName, callback); 
    } else { 
     element["on" + eventName] = callback; 
    } 
} 

function clickHandler() { 
    var firstOctect = 0, 
     checkboxes = document.querySelectorAll('[name="featuresOctet01"]'), 
     i, cur; 

    for (i = 0; i < checkboxes.length; i++) { 
     cur = checkboxes[i]; 
     if (cur.checked) { 
      firstOctect += Math.pow(2, i); 
     } 
    } 

    document.getElementById("octets01").innerHTML = firstOctect; 
} 

DEMO :http://jsfiddle.net/3TyV3/3/

그것은 자바 스크립트가 아닌 인라인 HTML에서 이벤트를 바인딩하여 눈에 거슬리지 자바 스크립트를 사용합니다. 이전 버전의 IE에는 확인란/라디오 버튼이있어 이상한 동작을하기 때문에 change 대신 click 이벤트를 사용했습니다. addEvent 함수는 이전 IE뿐만 아니라 새 브라우저에서도 이벤트를 바인딩하는 간단한 함수입니다.

이름이 "featuresOctet01"인 모든 요소를 ​​선택하고 각각에 이벤트를 추가합니다. 그런 다음 핸들러에서 각 체크 상자를 반복하고 확인 된 다음 2^i을 기준으로 값을 추가합니다.

참고 :

• addEventListener : https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener
• document.querySelectorAll : https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll
• Math.pow : var에 firstOctect = 0 '과 https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Math/pow