老师检查一下，还有别的方法吗
来源：4-3 编程练习
慕九州8176055
2019-12-10 14:47:43
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
请选择菜单：
<select id="menu">
<option>请选择</option>
<option value="fruit" class="btn">水果</option>
<option value="cake" class="btn">蛋糕</option>
<option value="nuts" class="btn">坚果</option>
</select>
</p>
<p>该系列有：<span></span></p>
<script>
// 此处写代码
var menu=document.querySelector('#menu');
var spans=document.getElementsByTagName('span');
menu.onclick=function(){
switch(this.value){
case'fruit':spans[0].innerHTML = '香蕉，西瓜，桃'
break;
case'cake':spans[0].innerHTML = '慕斯，巧克力蛋糕，榴莲蛋糕'
break;
case'nuts':spans[0].innerHTML = '巴旦木，开心果，杏仁'
break;
default:spans[0].innerHTML = '';
}
};
// 方法二
// 内容展示区列表
let arrayList =
[
"",
"苹果，鸭梨，香蕉，龙眼，荔枝，香橙，西瓜",
"慕斯，奶酪，重油，黑森林，戚风",
"巴旦木，碧根果，开心果，夏威夷果，杏仁，榛子",
"乒乓球，羽毛球，跑步，游泳，篮球，足球",
"蒙牛，伊利，光明，燕糖，三元，香满楼",
];
// 获取<select> DOM元素
let eleMenu = document.getElementById("menu");
// 获取<option> DOM元素的类数组及其长度
let eleOptions = eleMenu.getElementsByTagName("option");
const LEN = eleOptions.length;
// 创建数组optionValues，用于存储<option>标签的value值
let optionValues = [];
for (let i = 0; i <= LEN - 1; ++i)
{
optionValues[i] = eleOptions[i].value;
}
// 获取内容展示区
let eleContent = document.querySelector(".content");
// 对menu进行click事件绑定
eleMenu.addEventListener("click", function(event)
{
for (key in optionValues)
{
if (event.target.value === optionValues[key])
{
eleContent.innerText = arrayList[key];
}
}
});
</script>
</body>
</html>
1回答
-
好帮手慕夭夭
2019-12-10
同学你好，解答如下：
1.第二种方法有问题，可以按F12查看报错，如下：
点击后面文件名可定位到有错误的代码，根据报错说不能设置innerText这个属性，猜测前面的eleContent不是一个dom对象，所以无法使用。
检查获取dom元素的代码，在html中，不存在类名为content的元素
要如下添加：
2.还可以使用if判断，如下
不过题目要求使用switch循环，建议同学使用你的第一种方式即可。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题