innerHTML javascript dynamic

Question

我目前在一個小javascript項目中遇到了innerHTML函數的一些問題。基本上，我有一些HTML表單複選框，它們根據是否被選中來更改數字（顯示在同一頁面上）。這個想法非常像一個IP地址。結果是一個介於0和255之間的數字。

但是我想做的事情是，無論何時用戶點擊一個複選框，我都需要該數字動態更改。理念類似於我們在這個論壇上撰寫問題時使用的概念。在你輸入的時候，下面的文字會變化，以顯示出它發生了什麼變化。

我的代碼工作得不好。請問你能幫幫我嗎？它一直給我的信息「未定義」，而不是總和。謝謝你的幫助。

的JavaScript

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/

它通過結合在JavaScript中，而不是內嵌HTML事件使用非侵入式JavaScript。我確實使用了click事件，而不是change，因爲舊版本的IE對於複選框/單選按鈕有奇怪的行爲。 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：https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Math/pow