getElementsByClassName不起作用
getElementsByClassName is not working
本文关键字:不起作用 getElementsByClassName 更新时间:2023-09-26
我是JavaScript的初学者,有人能帮我的脚本出了什么问题吗。我正在努力了解亚洲的所有国家,这些国家以字母表"b"开头。下面是我的html文档。以下文档显示了警报框中以字母"b"开头的所有亚洲国家。
<!DOCTYPE html>
<html>
<head>
<title>Get Element By class name</title>
</head>
<body>
<p id="countriesInAsia">
<h1>Countries in Asia</h1>
<ol class = "a">
<li>India</li>
<li>Indonesia</li>
<li>Iran</li>
<li>Iraq</li>
<li>Israel</li>
</ol>
<ol class = "b">
<li>Bahrain</li>
<li>Bangladesh</li>
<li>Bhutan</li>
<li>Brunei</li>
</ol>
</p>
<p id="countriesInEurope">
<h1>Countries in Europe</h1>
<ol class = "a">
<li>Albania</li>
<li>Andorra</li>
<li>Armenia</li>
<li>Austria</li>
<li>Azerbaijan</li>
</ol>
<ol class = "b">
<li>Belarus</li>
<li>Belgium</li>
<li>Bosnia and Herzegovina</li>
<li>Bulgaria</li>
</ol>
</p>
<script>
var countriesInAsia = document.getElementById("countriesInAsia");
var countries = countriesInAsia.getElementsByClassName("b");
var message = "Countries in Asia starts with alphabet b are : ";
for(var i = 0; i < countries.length; i++){
message = message + countries[i].textContent;
}
alert(message);
</script>
</body>
</html>
p标签不能包含ol,因此需要将p更改为div:
<!DOCTYPE html>
<html>
<head>
<title>Get Element By class name</title>
</head>
<body>
<div id="countriesInAsia">
<h1>Countries in Asia</h1>
<ol class = "a">
<li>India</li>
<li>Indonesia</li>
<li>Iran</li>
<li>Iraq</li>
<li>Israel</li>
</ol>
<ol class = "b">
<li>Bahrain</li>
<li>Bangladesh</li>
<li>Bhutan</li>
<li>Brunei</li>
</ol>
</div>
<div id="countriesInEurope">
<h1>Countries in Europe</h1>
<ol class = "a">
<li>Albania</li>
<li>Andorra</li>
<li>Armenia</li>
<li>Austria</li>
<li>Azerbaijan</li>
</ol>
<ol class = "b">
<li>Belarus</li>
<li>Belgium</li>
<li>Bosnia and Herzegovina</li>
<li>Bulgaria</li>
</ol>
</div>
<script>
var countriesInAsia = document.getElementById("countriesInAsia");
var countries = countriesInAsia.getElementsByClassName("b");
var message = "Countries in Asia starts with alphabet b are : ";
for(var i = 0; i < countries.length; i++){
message = message + countries[i].textContent;
}
alert(message);
</script>
</body>
</html>
试试这个,它对我有用!
//var countriesInAsia = document.getElementById("countriesInAsia");
var countries = document.getElementsByClassName("a");
迭代并选择元素的子级
使用文档
使用<div>
而不是<p>
最终代码:
<!DOCTYPE html>
<html>
<head>
<title>Get Element By class name</title>
</head>
<body>
<div id="countriesInAsia">
<h1>Countries in Asia</h1>
<ol class = "a">
<li>India</li>
<li>Indonesia</li>
<li>Iran</li>
<li>Iraq</li>
<li>Israel</li>
</ol>
<ol class = "b">
<li>Bahrain</li>
<li>Bangladesh</li>
<li>Bhutan</li>
<li>Brunei</li>
</ol>
</div>
<div id="countriesInEurope">
<h1>Countries in Europe</h1>
<ol class = "a">
<li>Albania</li>
<li>Andorra</li>
<li>Armenia</li>
<li>Austria</li>
<li>Azerbaijan</li>
</ol>
<ol class = "b">
<li>Belarus</li>
<li>Belgium</li>
<li>Bosnia and Herzegovina</li>
<li>Bulgaria</li>
</ol>
</div>
<script>
var countriesInAsia = document.getElementById("countriesInAsia");
var countries = countriesInAsia.getElementsByClassName("b");
var message = "Countries in Asia starts with alphabet b are : ";
for(var i = 0; i < countries.length; i++){
message = message + countries[i].textContent;
}
alert(message);
</script>
</body>
</html>
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 监视函数从服务返回不起作用,但作用域函数起作用
- 幻灯片滚动javascript不起作用
- 简单的javascript在Shopify中不起作用
- Recaptcha在IE7和IE8中不起作用
- Ember Data DS.Model's set函数不起作用
- JsFiddle上的鼠标事件不起作用
- 我的AngularJS表达式没有'不起作用
- 点击按钮输入不起作用
- 面向对象的Javascript代码在IE7中不起作用
- 分部隐藏在jquery中不起作用
- 在phonegap应用程序内部重定向不起作用
- Array.length似乎不起作用;console.log则显示其他情况
- $ionicplatform内的$scope不;不起作用
- 我的javascript for循环不起作用
- Meteor-添加用户自定义字段的方法不起作用
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- Textarea必需的attribut在javascript中不起作用
- 为什么javascript:void(0)在Firefox中不起作用
- 退出全屏不起作用