基于数组中JavaScript对象文本中的值生成HTML有序列表元素_Javascript_Arrays_Html_Html Lists_Javascript Objects

基于数组中JavaScript对象文本中的值生成HTML有序列表元素

javascript arrays html

基于数组中JavaScript对象文本中的值生成HTML有序列表元素,javascript,arrays,html,html-lists,javascript-objects,Javascript,Arrays,Html,Html Lists,Javascript Objects,我试图根据html中下拉菜单的值，使用JavaScript数组技能部分的值生成内容。我不确定这样做的最佳方式。我已经生成了标题、描述和图像，但我知道技能部分需要做不同的工作才能将其放入有序列表中。下面是我的HTML代码 <html> <head> <title>WernickeKevin_Assignment1</title> <meta charset="utf-8"> </hea

我试图根据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>

从页面和课程设置的外观来看，每个课程始终有三项技能，以及三个预设的

占位符。因此，您可以简单地将每个

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（含0）的for循环可以工作，但其他范围与HTML中的三个

不对应。我想到的另一种选择是通过清除

ol

并插入每个课程技能来更改列表结构，函数如下

function insertSkill(skillText) {
  var newSkill = document.createElement("li");
  var newSkillText = document.createTextNode(skillText);
  newSkill.appendChild(newSkillText);
  document.getElementsByTagName('ol')[0].appendChild(newSkill);
}

var课程=[
{
名称：“数字设计1”，
代码：‘（WEBD 111）’，
这门课程向学生介绍色彩理论、版面设计、版面设计和视觉层次。这些原则作为一组通用技术的一部分，被应用于设计学科，并通过许多领域的实例加以加强。学生们被介绍到设计语言和基础。设计过程，
技能：[“Photoshop”、“Illustrator”、“线框”]，
图片：“images/image1.jpg”
},
{
名称：“交互式生产1”，
代码：‘（WEBD 112）’，
描述：“通过一系列的案例研究，学生将对互动项目的所有组成部分有一个高层次的概述。项目的每个阶段都将重点分析作为问题解决过程的设计。主题包括互动设计的角色、团队角色和项目规划。”，
技能：['JavaScript'、'对象'、'函数']，
图片：“images/image2.png”
},
{
名称：'Motion Graphics 1'，
代码：‘（WEBD 113）’，
描述：“在本课程中，学生将接触到网络上的运动图形学科。本课程的重点是为网络和多媒体应用程序创建动画和动态交互媒体。学生将学习各种技术，以创建有效的运动图形项目，支持学生们还将学习如何制作对象动画、创建符号和组装运动图形项目，以交付给各种媒体，从移动设备到家庭娱乐系统。”，
技能：['CSS转换'，'-webkit-'，'keyframing']，
图片：“images/image4.png”
},
{
名称：“Web编程1”，
代码：‘（WEBD 120）’，
描述：“本课程让学习者基本了解桌面和移动平台客户端web编程的基础概念。通过一系列实践练习，学生将学习如何使用适当的技术和工具设计、构建和部署符合标准的web页面。”，
技能：['HTML'，'CSS'，'Semantics']，
图片：“images/image4.png”
}
];
//在select标记中获取html选项的值，并将它们用作数组的索引值
var e=document.getElementById（“infoChange”）；
e、 addEventListener（“变更”，更新信息）；
函数updateInfo（）{
var index=e.options[e.selectedIndex]。值；
document.getElementsByTagName（'h1'）[0]。innerHTML=courses[index]。name+''+courses[index]。代码；
document.getElementsByTagName（'p'）[0]。innerHTML=courses[index]。说明；
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]；
}
函数clearSkills（）{
document.getElementsByTagName（'ol'）[0].innerHTML=“”；
}
函数insertSkill（skillText）{
var newSkill=document.createElement（“li”）；
var newSkillText=document.createTextNode（skillText）；
appendChild（newSkillText）；
document.getElementsByTagName（'ol'）[0].appendChild（newSkill）；
}
updateInfo（）

WernickeKevin_分配1
数字设计1
互动制作1
运动图像1
网络编程1




像小胡子这样的模板手对于这样的任务非常方便。不客气！我只是想到了另一种方法：0-2的for循环。选择一种最适合你的方法。
function insertSkill(skillText) {
  var newSkill = document.createElement("li");
  var newSkillText = document.createTextNode(skillText);
  newSkill.appendChild(newSkillText);
  document.getElementsByTagName('ol')[0].appendChild(newSkill);
}