HTML5文档中的简短脚本不起作用 [英] Short script in HTML5 document doesn't work
问题描述
脚本不起作用.我想在单击"nombreDeLista"时使"tiposDeFrutas"与显示属性可见.我还添加了CSS文档. ................................................... ................................................... ................................................... ......................
Script doesn''t work. I want to make "tiposDeFrutas" visible with display attribute when I click over "nombreDeLista". I also add the CSS document. ............................................................................................................................................................................
<pre lang="HTML"><!DOCTYPE html>
<html>
<head>
<title>Pruebas HTML</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel=StyleSheet href="newcss.css" type="text/css" media=screen>
<script>
document.onload = function () {
document.getElementById("nombreDeLista").onclick = function () {
document.getElementsByClassName("tiposDeFrutas").style.display = "block";
};
};
</script>
</head>
<body>
<div id="nombreDeLista">Frutas</div>
<div class="tiposDeFrutas">Pera</div>
<div class="tiposDeFrutas">Limón</div>
</body>
</html>
____________________
.tiposDeFrutas {
display: none;
}
我尝试过的事情:
................................................... ................................................... ................................................... ...................................
What I have tried:
................................................................................................................................................................................
推荐答案
1.使用window.onload
2. getElementsByClassName返回一个数组，因此您需要遍历该数组以获取元素
因此...
1. use window.onload
2. getElementsByClassName returns an array, so you need to loop through that to get the elements
so...
window.onload = function () {
document.getElementById("nombreDeLista").onclick = function () {
var arr = document.getElementsByClassName("tiposDeFrutas");
for (var i = 0; i < arr.length; i++) {
arr[i].style.display = 'block';
}
}
}
这篇关于HTML5文档中的简短脚本不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
