根据数组中 JavaScript Object 文字中的值生成 HTML 有序列表元素
Generate HTML Ordered List Elements based on values in a JavaScript Object Literal Within Array
我正在尝试根据 html 中下拉菜单的值，使用 JavaScript 数组技能部分的值生成内容。我不确定执行此操作的最佳方法。我已经很好地生成了标题、描述和图像，但我知道技能部分需要以不同的方式完成才能将其放入有序列表中。下面是我的 HTML 代码。
<html>
<head>
<title>WernickeKevin_Assignment1</title>
<meta charset="utf-8">
</head>
<body>
<select id="infoChange">
<option value="0">Digital Design 1</option>
<option value="1">Interactive Production 1</option>
<option value="2">Motion Graphics 1</option>
<option value="3">Web Programming 1</option>
</select>
<div>
<h1></h1>
<p></p>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<img src="">
</div>
</body>
<script src="js/courses.js"></script>
</html>
这是我的 JavaScript 文件，其中包含我的数组 Objects 和一些其他代码。注意：我正在尝试在有序的 html 列表中的技能部分生成值。
var courses = [
{
name: 'Digital Design 1',
code: '(WEBD 111)',
description: 'This course introduces students to colour theory, typography, layout and visual hierarchy. These principles are presented as part of a universal set of techniques that are applied across design disciplines and reinforced through examples from numerous fields. Students are introduced to the language of design as well as the foundational design process.',
skills: ['Photoshop', 'Illustrator', 'Wireframing'],
image: 'images/image1.jpg'
},
{
name: 'Interactive Production 1',
code: '(WEBD 112)',
description: 'Through a series of case studies, students will be given a high-level overview of all of the component pieces of an interactive project. Each stage of a project is analyzed with an emphasis on design as a problem-solving process. Topics include the role of interactive design, team roles, and project planning.',
skills: ['JavaScript', 'Objects', 'Functions'],
image: 'images/image2.png'
},
{
name: 'Motion Graphics 1',
code: '(WEBD 113)',
description: 'Throughout this course, students are exposed to the discipline of motion graphics on the web. The focus of this course is the creation of animated and dynamic interactive media for web and multimedia applications. Students are taught a variety of techniques that enable the creation of effective motion graphics projects that support the message to be delivered by the completed project, and are appropriate for the medium. Students also learn how to animate objects, create symbols and assemble motion graphics projects for delivery to a variety of media, ranging from mobile devices to home entertainment systems.',
skills: ['CSS Transitions', '-webkit-', 'keyframing'],
image: 'images/image4.png'
},
{
name: 'Web Programming 1',
code: '(WEBD 120)',
description: 'This course provides learners with a fundamental understanding of the concepts that underpin client-side web programming for both desktop and mobile platforms. Through a series of hands-on exercises, students will learn how to design, build and deploy standards-compliant web pages using appropriate technologies and tools.',
skills: ['HTML', 'CSS', 'Semantics'],
image: 'images/image4.png'
}
];
//Grab value of html options in the select tag, and use them as index values for the array
var e = document.getElementById("infoChange");
var index = e.options[e.selectedIndex].value;
document.getElementsByTagName('h1')[0].innerHTML = courses[index].name + ' ' + courses[index].code;
document.getElementsByTagName('p')[0].innerHTML = courses[index].description;
document.getElementsByTagName('img')[0].src = courses[index].image;
从页面和课程的设置来看，每门课程总是三个技能，三个预设 <li> 占位符。因此，您可以简单地将每个 li 元素分配给 skills 数组中的相应技能：
document.getElementsByTagName('li')[0].innerHTML = courses[index].skills[0];
document.getElementsByTagName('li')[1].innerHTML = courses[index].skills[1];
document.getElementsByTagName('li')[2].innerHTML = courses[index].skills[2];
虽然我觉得重复代码很难看。从 0 到 2 的 for 循环可以工作，但其他范围将不对应 HTML 中的三个 <li>。我想到的另一种选择是通过清除 ol 并为每个课程技能插入来更改列表结构，具有
等功能
function insertSkill(skillText) {
var newSkill = document.createElement("li");
var newSkillText = document.createTextNode(skillText);
newSkill.appendChild(newSkillText);
document.getElementsByTagName('ol')[0].appendChild(newSkill);
}
var courses = [
{
name: 'Digital Design 1',
code: '(WEBD 111)',
description: 'This course introduces students to colour theory, typography, layout and visual hierarchy. These principles are presented as part of a universal set of techniques that are applied across design disciplines and reinforced through examples from numerous fields. Students are introduced to the language of design as well as the foundational design process.',
skills: ['Photoshop', 'Illustrator', 'Wireframing'],
image: 'images/image1.jpg'
},
{
name: 'Interactive Production 1',
code: '(WEBD 112)',
description: 'Through a series of case studies, students will be given a high-level overview of all of the component pieces of an interactive project. Each stage of a project is analyzed with an emphasis on design as a problem-solving process. Topics include the role of interactive design, team roles, and project planning.',
skills: ['JavaScript', 'Objects', 'Functions'],
image: 'images/image2.png'
},
{
name: 'Motion Graphics 1',
code: '(WEBD 113)',
description: 'Throughout this course, students are exposed to the discipline of motion graphics on the web. The focus of this course is the creation of animated and dynamic interactive media for web and multimedia applications. Students are taught a variety of techniques that enable the creation of effective motion graphics projects that support the message to be delivered by the completed project, and are appropriate for the medium. Students also learn how to animate objects, create symbols and assemble motion graphics projects for delivery to a variety of media, ranging from mobile devices to home entertainment systems.',
skills: ['CSS Transitions', '-webkit-', 'keyframing'],
image: 'images/image4.png'
},
{
name: 'Web Programming 1',
code: '(WEBD 120)',
description: 'This course provides learners with a fundamental understanding of the concepts that underpin client-side web programming for both desktop and mobile platforms. Through a series of hands-on exercises, students will learn how to design, build and deploy standards-compliant web pages using appropriate technologies and tools.',
skills: ['HTML', 'CSS', 'Semantics'],
image: 'images/image4.png'
}
];
//Grab value of html options in the select tag, and use them as index values for the array
var e = document.getElementById("infoChange");
e.addEventListener("change", updateInfo);
function updateInfo() {
var index = e.options[e.selectedIndex].value;
document.getElementsByTagName('h1')[0].innerHTML = courses[index].name + ' ' + courses[index].code;
document.getElementsByTagName('p')[0].innerHTML = courses[index].description;
document.getElementsByTagName('img')[0].src = courses[index].image;
document.getElementsByTagName('li')[0].innerHTML = courses[index].skills[0];
document.getElementsByTagName('li')[1].innerHTML = courses[index].skills[1];
document.getElementsByTagName('li')[2].innerHTML = courses[index].skills[2];
}
function clearSkills() {
document.getElementsByTagName('ol')[0].innerHTML = "";
}
function insertSkill(skillText) {
var newSkill = document.createElement("li");
var newSkillText = document.createTextNode(skillText);
newSkill.appendChild(newSkillText);
document.getElementsByTagName('ol')[0].appendChild(newSkill);
}
updateInfo();
<html>
<head>
<title>WernickeKevin_Assignment1</title>
<meta charset="utf-8">
</head>
<body>
<select id="infoChange">
<option value="0">Digital Design 1</option>
<option value="1">Interactive Production 1</option>
<option value="2">Motion Graphics 1</option>
<option value="3">Web Programming 1</option>
</select>
<input type="button" onclick="insertSkill('my new skill')" value="Append Skill">
<input type="button" onclick="clearSkills()" value="Clear all Skills">
<div>
<h1></h1>
<p></p>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<img src="">
</div>
</body>
<script src="js/courses.js"></script>
</html>
我正在尝试根据 html 中下拉菜单的值，使用 JavaScript 数组技能部分的值生成内容。我不确定执行此操作的最佳方法。我已经很好地生成了标题、描述和图像，但我知道技能部分需要以不同的方式完成才能将其放入有序列表中。下面是我的 HTML 代码。
<html>
<head>
<title>WernickeKevin_Assignment1</title>
<meta charset="utf-8">
</head>
<body>
<select id="infoChange">
<option value="0">Digital Design 1</option>
<option value="1">Interactive Production 1</option>
<option value="2">Motion Graphics 1</option>
<option value="3">Web Programming 1</option>
</select>
<div>
<h1></h1>
<p></p>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<img src="">
</div>
</body>
<script src="js/courses.js"></script>
</html>
这是我的 JavaScript 文件，其中包含我的数组 Objects 和一些其他代码。注意：我正在尝试在有序的 html 列表中的技能部分生成值。
var courses = [
{
name: 'Digital Design 1',
code: '(WEBD 111)',
description: 'This course introduces students to colour theory, typography, layout and visual hierarchy. These principles are presented as part of a universal set of techniques that are applied across design disciplines and reinforced through examples from numerous fields. Students are introduced to the language of design as well as the foundational design process.',
skills: ['Photoshop', 'Illustrator', 'Wireframing'],
image: 'images/image1.jpg'
},
{
name: 'Interactive Production 1',
code: '(WEBD 112)',
description: 'Through a series of case studies, students will be given a high-level overview of all of the component pieces of an interactive project. Each stage of a project is analyzed with an emphasis on design as a problem-solving process. Topics include the role of interactive design, team roles, and project planning.',
skills: ['JavaScript', 'Objects', 'Functions'],
image: 'images/image2.png'
},
{
name: 'Motion Graphics 1',
code: '(WEBD 113)',
description: 'Throughout this course, students are exposed to the discipline of motion graphics on the web. The focus of this course is the creation of animated and dynamic interactive media for web and multimedia applications. Students are taught a variety of techniques that enable the creation of effective motion graphics projects that support the message to be delivered by the completed project, and are appropriate for the medium. Students also learn how to animate objects, create symbols and assemble motion graphics projects for delivery to a variety of media, ranging from mobile devices to home entertainment systems.',
skills: ['CSS Transitions', '-webkit-', 'keyframing'],
image: 'images/image4.png'
},
{
name: 'Web Programming 1',
code: '(WEBD 120)',
description: 'This course provides learners with a fundamental understanding of the concepts that underpin client-side web programming for both desktop and mobile platforms. Through a series of hands-on exercises, students will learn how to design, build and deploy standards-compliant web pages using appropriate technologies and tools.',
skills: ['HTML', 'CSS', 'Semantics'],
image: 'images/image4.png'
}
];
//Grab value of html options in the select tag, and use them as index values for the array
var e = document.getElementById("infoChange");
var index = e.options[e.selectedIndex].value;
document.getElementsByTagName('h1')[0].innerHTML = courses[index].name + ' ' + courses[index].code;
document.getElementsByTagName('p')[0].innerHTML = courses[index].description;
document.getElementsByTagName('img')[0].src = courses[index].image;
从页面和课程的设置来看，每门课程总是三个技能，三个预设 <li> 占位符。因此，您可以简单地将每个 li 元素分配给 skills 数组中的相应技能：
document.getElementsByTagName('li')[0].innerHTML = courses[index].skills[0];
document.getElementsByTagName('li')[1].innerHTML = courses[index].skills[1];
document.getElementsByTagName('li')[2].innerHTML = courses[index].skills[2];
虽然我觉得重复代码很难看。从 0 到 2 的 for 循环可以工作，但其他范围将不对应 HTML 中的三个 <li>。我想到的另一种选择是通过清除 ol 并为每个课程技能插入来更改列表结构，具有
function insertSkill(skillText) {
var newSkill = document.createElement("li");
var newSkillText = document.createTextNode(skillText);
newSkill.appendChild(newSkillText);
document.getElementsByTagName('ol')[0].appendChild(newSkill);
}
var courses = [
{
name: 'Digital Design 1',
code: '(WEBD 111)',
description: 'This course introduces students to colour theory, typography, layout and visual hierarchy. These principles are presented as part of a universal set of techniques that are applied across design disciplines and reinforced through examples from numerous fields. Students are introduced to the language of design as well as the foundational design process.',
skills: ['Photoshop', 'Illustrator', 'Wireframing'],
image: 'images/image1.jpg'
},
{
name: 'Interactive Production 1',
code: '(WEBD 112)',
description: 'Through a series of case studies, students will be given a high-level overview of all of the component pieces of an interactive project. Each stage of a project is analyzed with an emphasis on design as a problem-solving process. Topics include the role of interactive design, team roles, and project planning.',
skills: ['JavaScript', 'Objects', 'Functions'],
image: 'images/image2.png'
},
{
name: 'Motion Graphics 1',
code: '(WEBD 113)',
description: 'Throughout this course, students are exposed to the discipline of motion graphics on the web. The focus of this course is the creation of animated and dynamic interactive media for web and multimedia applications. Students are taught a variety of techniques that enable the creation of effective motion graphics projects that support the message to be delivered by the completed project, and are appropriate for the medium. Students also learn how to animate objects, create symbols and assemble motion graphics projects for delivery to a variety of media, ranging from mobile devices to home entertainment systems.',
skills: ['CSS Transitions', '-webkit-', 'keyframing'],
image: 'images/image4.png'
},
{
name: 'Web Programming 1',
code: '(WEBD 120)',
description: 'This course provides learners with a fundamental understanding of the concepts that underpin client-side web programming for both desktop and mobile platforms. Through a series of hands-on exercises, students will learn how to design, build and deploy standards-compliant web pages using appropriate technologies and tools.',
skills: ['HTML', 'CSS', 'Semantics'],
image: 'images/image4.png'
}
];
//Grab value of html options in the select tag, and use them as index values for the array
var e = document.getElementById("infoChange");
e.addEventListener("change", updateInfo);
function updateInfo() {
var index = e.options[e.selectedIndex].value;
document.getElementsByTagName('h1')[0].innerHTML = courses[index].name + ' ' + courses[index].code;
document.getElementsByTagName('p')[0].innerHTML = courses[index].description;
document.getElementsByTagName('img')[0].src = courses[index].image;
document.getElementsByTagName('li')[0].innerHTML = courses[index].skills[0];
document.getElementsByTagName('li')[1].innerHTML = courses[index].skills[1];
document.getElementsByTagName('li')[2].innerHTML = courses[index].skills[2];
}
function clearSkills() {
document.getElementsByTagName('ol')[0].innerHTML = "";
}
function insertSkill(skillText) {
var newSkill = document.createElement("li");
var newSkillText = document.createTextNode(skillText);
newSkill.appendChild(newSkillText);
document.getElementsByTagName('ol')[0].appendChild(newSkill);
}
updateInfo();
<html>
<head>
<title>WernickeKevin_Assignment1</title>
<meta charset="utf-8">
</head>
<body>
<select id="infoChange">
<option value="0">Digital Design 1</option>
<option value="1">Interactive Production 1</option>
<option value="2">Motion Graphics 1</option>
<option value="3">Web Programming 1</option>
</select>
<input type="button" onclick="insertSkill('my new skill')" value="Append Skill">
<input type="button" onclick="clearSkills()" value="Clear all Skills">
<div>
<h1></h1>
<p></p>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<img src="">
</div>
</body>
<script src="js/courses.js"></script>
</html>