当单选按钮具有特定值时,我尝试使用原始 Javascript 显示/隐藏元素。我可以让它与内联 Javascript 一起工作,但我想尝试使用 addEventListener 方法来完成它。
这是我的 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,并在 HTML 中使用处理程序 onchange="asdf(this.value)"。
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);
fiddle :http://jsfiddle.net/ePDx9/
最佳答案
问题#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);
}
关于javascript - 在没有内联 Javascript 的情况下显示/隐藏元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20603223/