不帶內聯Javascript顯示/隱藏元素

當單選按鈕具有特定值時，我試圖用原始Javascript顯示/隱藏元素。我可以讓它與內嵌Javascript一起工作，但我想嘗試使用addEventListener方法。不帶內聯Javascript顯示/隱藏元素

這裏是我的HTML：

<label for="petType">Type of Pet: </label>Cat<input" class="radio" name="petType" type="radio" id="petType" value="cat">Dog<input class="radio" name="petType" id="petType" type="radio" value="dog">Other<input class="radio" name="petType" id="petType" type="radio" value="other"> 
     <label for="state">Breed:</label> 
     <select id="breed"> 
      <option>Shiba Inus</option> 
      <option>Pembroke Welsh Corgi</option> 
      <option>Boxer</option> 
      <option>English Bulldog</option> 

     </select>

這裏是我用得到它在使用內聯函數運行的JavaScript，與處理器的onchange =「ASDF（THIS.VALUE）」在我的HTML 。

function asdf(x) { 
    var breed = document.getElementById('breed'); 
    if (dog == "dog") { 
    breed.style.display = "inline"; 

    } 
    else { 
    breed.style.display = "none"; 
    } 
}

這是我到目前爲止有：

function asdf(x) { 
    var breed = document.getElementById('breed'); 
    if (dog == "dog") { 
    breed.style.display = "inline"; 

    } 
    else { 
    breed.style.display = "none"; 
    } 
} 

var typeOfPet = getElementsByName('petType'); 

typeOfPet.addEventListener('change', asdf, false);

小提琴：http://jsfiddle.net/ePDx9/

來源

2013-12-16 Nick D

問題1：dog從未定義。我相信你想檢查是否改變的元素的值是狗，所以你應該這樣做，而不是：

if (this.value == "dog") {

問題2：getElementsByName需要調用另一個對象（通常是文件）的方法

var typeOfPet = document.getElementsByName('petType');

問題3：AddEventListener應該有一個小寫字母a。它也不能應用於getElementsByName返回的節點集合。您應該循環遍歷每個元素。

for(var i = typeOfPet.length; i--;) { 
    typeOfPet[i].addEventListener('change', asdf, false); 
}

工作版本：http://jsfiddle.net/nderscore/ePDx9/6/

來源

2013-12-16 04:02:51 nderscore

這一個比上面的更好。謝謝！ –

嘗試：

function asdf(x) { 
    var breed = document.getElementById('breed'); 
    if (this.value === "dog") { //Look for this.value for dog. 
     breed.style.display = "inline"; 

    } else { 
     breed.style.display = "none"; 
    } 
} 

var typeOfPet = document.getElementsByName('petType'); //Get the elements by name 
for (var i = 0, l = typeOfPet.length; i < l; i++) { //Loop through them 
    typeOfPet[i].addEventListener('change', asdf, false); //Bind listener to them each of them. 
}

Demo

getElementsByName不是獨立的方法，它需要應用於文檔或元素。
getElementsByName返回一個節點集合（實時），因此您需要循環它們並對它們中的每一個應用綁定。
addEventListener的外殼和元素上的綁定不正確。
爲了尋找當前無線電的價值只是使用this.value，做的比較

來源

2013-12-16 04:02:15 PSL

這工作！我記得有些地方getElementsByName出於某種原因無法自行工作。爲什麼我們必須循環瀏覽它？ –

@NickD我已經更新了我的答案它應該有助於理解... – PSL

不帶內聯Javascript顯示/隱藏元素

回答

相關問題