简单阵列&；Javascript中的循环？

我对Javascript非常陌生，不知道如何满足以下请求（在注释中）。如果有人能让我走上正确的道路，我将不胜感激。谢谢正如您将看到的，我已经进行了尝试，代码中有注释，我需要弄清楚如何创建所请求的内容

          <h2>Three</h2>
          <button id="button-three">Output Colors</button>
          <ul id="color-list"></ul>
          <script>
          var mycolorlist = ['green','yellow','blue','red','brown','purple','pink']
          var colorlist = document.getElementById("color-list");
          var newLi = document.createElement("li");
          var copy = document.createTextNode(mycolorlist )
          newLi.appendChild (copy)
          /*
          1. Create an array with the seven colors of the rainbow
          2. Loop through the array and append an "li" for each color to the "color-list" ul
          */
          </script>



      <h2>Font Sizer</h2>
      <p id="to-style">This is my paragraph of stuff.</p><br>
      <input type="text" id="font-size" placeholder="Enter a font size"><button id="font-button">Make it so</button>
      <script>
      var imgchange = document.getElementById("kitten");
      var updatefont = document.getElementById("font-button");
      updatefont.addEventListener("click", myFunction);
      function myFunction(){
        document.getElementById("to-style").style.fontSize = "document.getElementById("font-size").value";
      }
      /*
      1. Get a font-size value from the text box and use it to change the font-size of "to-style"
      */
      </script>

      <h2>Element Counter</h2>
      <input type="text" id="element-type" placeholder="Which element?"><br>
      <button id="count">Count the Elements</button>
      <input type="text" id="element-count" placeholder="Results here" readonly="true">
      <script>
      /*
      1. Get the user input for an element, id, class, or query and display how many exist on the page in the Results box
      (use queryselectorall)
      */
      </script>

  <h2>Five</h2>
  <label>Input 1: <input type="text" id="input1"></label><br>
  <label>Input 2: <input type="text" id="input2"></label><br>
  <button id="button-compare">Compare</button>
  <script>
  var buttoncompare = document.getElementById("button-compare");
  var input1 = document.getElementById("input1");
  var input2 = document.getElementById("input2");
  buttoncompare.addEventListener("click", myFunction);
function myFunction(){ if (input1 == input2) {console.log('true');} else {console.log('false');}
}
  /*
  1. Add an event listener to the "button-compare" button
  2. When the button is clicked, compare the values of the two inputs
  3. Output to the console the results of the comparison (true or false)
  */
  </script>

<h2>Four</h2>
  <div id="box1" class="box">Mouse Events</div>
  <script>
  var box1 = document.getElementById("box1");
  box1.addEventListener("mouseover", myFunction);
function myFunction(){
  console.log('mouse entered the box');
  box1.addEventListener("mouseout", myFunction);
function myFunction(){
  console.log('mouse left the box');
}

  /*
  1. Add two event listeners to the box. One for when the mouse enters, the other when it leaves
  2. When the cursor enters the box, log to the console "Mouse entered the box".
  3. When the cursor leaves the box, log to the console "Mouse left the box".
  */
  </script>

3
输出颜色

var mycolorlist=[“绿色”、“黄色”、“蓝色”、“红色”、“棕色”、“紫色”、“粉色”]
var colorlist=document.getElementById（“颜色列表”）；
var newLi=document.createElement（“li”）；
var copy=document.createTextNode（mycolorlist）
newLi.appendChild（副本）
/*
1.用七色彩虹创建一个数组
2.循环遍历数组，并在“颜色列表”ul中为每种颜色添加一个“li”
*/
字号
这是我的一段内容。


就这样吧
var imgchange=document.getElementById（“kitten”）；
var updatefont=document.getElementById（“字体按钮”）；
addEventListener（“单击”，myFunction）；
函数myFunction（）{
document.getElementById（“to style”）.style.fontSize=“document.getElementById（“font size”）.value”；
}
/*
1.从文本框中获取字体大小值，并使用它更改“to style”的字体大小
*/
元素计数器


数一数元素
/*
1.获取元素、id、类或查询的用户输入，并在结果框中显示页面上存在的数量
（使用queryselectorall）
*/
五
输入1:

输入2:

比较
var buttoncompare=document.getElementById（“按钮比较”）；
var input1=document.getElementById（“input1”）；
var input2=document.getElementById（“input2”）；
按钮compare.addEventListener（“单击”，myFunction）；
函数myFunction（）{if（input1==input2）{console.log（'true'）；}else{console.log（'false'）；}
}
/*
1.将事件侦听器添加到“按钮比较”按钮
2.单击按钮时，比较两个输入的值
3.将比较结果（true或false）输出到控制台
*/
四
鼠标事件
var box1=document.getElementById（“box1”）；
框1.addEventListener（“鼠标悬停”，myFunction）；
函数myFunction（）{
log（'鼠标进入框'）；
框1.addEventListener（“鼠标输出”，myFunction）；
函数myFunction（）{
log（'鼠标离开框'）；
}
/*
1.向框中添加两个事件侦听器。一个用于鼠标进入时，另一个用于鼠标离开时
2.当光标进入框时，登录控制台“鼠标进入框”。
3.当光标离开框时，登录控制台“鼠标离开框”。
*/

查看每个函数中给出的注释，了解其工作原理

<body>
    <h2>Three</h2>
    <button id="button-three">Output Colors</button>
    <ul id="color-list"></ul>
    <script>
        var mycolorlist = ['green','yellow','blue','red','brown','purple','pink']
        var colorlist = document.getElementById("color-list");
        //need to loop through the list and create the li elements
        for(var i = 0; i < mycolorlist.length; i++){
            var newLi = document.createElement("li");
            var copy = document.createTextNode(mycolorlist[i])
            newLi.appendChild (copy)
        }
        /*
        1. Create an array with the seven colors of the rainbow
        2. Loop through the array and append an "li" for each color to the "color-list" ul
        */
    </script>



    <h2>Font Sizer</h2>
    <p id="to-style">This is my paragraph of stuff.</p><br/>
    <input type="text" id="font-size" placeholder="Enter a font size"/><button id="font-button">Make it so</button>
    <script>
        var updatefont = document.getElementById("font-button");
        updatefont.addEventListener("click", fontSizeHandler);
        //you are using same function name every where
        function fontSizeHandler(){
            document.getElementById("to-style").style.fontSize = document.getElementById('font-size').value + 'px';
        }
        /*
        1. Get a font-size value from the text box and use it to change the font-size of "to-style"
        */
    </script>

    <h2>Element Counter</h2>
    <input type="text" id="element-type" placeholder="Which element?"/><br/>
    <button id="count">Count the Elements</button>
    <input type="text" id="element-count" placeholder="Results here" readonly="true"/>
    <script>
        document.getElementById("count").addEventListener("click", function(){
            var value = document.getElementById("element-type").value;
            //Using querySelectorAll will help us get elements matching the given css selectors.
            // ie for searching for id need to use the prefix #, for class use the prefix .
            //so input value #result will search for element with id result and .result will get elements with class result, where as just div will give all the div elements
            document.getElementById("element-count").value = document.querySelectorAll(value).length;
        });
        /*
        1. Get the user input for an element, id, class, or query and display how many exist on the page in the Results box
        (use queryselectorall)
        */
    </script>

    <h2>Five</h2>
    <label>Input 1: <input type="text" id="input1"/></label><br/>
    <label>Input 2: <input type="text" id="input2"/></label><br/>
    <button id="button-compare">Compare</button>
    <script>
        var buttoncompare = document.getElementById("button-compare");
        var input1 = document.getElementById("input1");
        var input2 = document.getElementById("input2");
        buttoncompare.addEventListener("click", function(){
            //need to compare value of the input elements
            console.log(input1.value == input2.value);
        });
        /*
        1. Add an event listener to the "button-compare" button
        2. When the button is clicked, compare the values of the two inputs
        3. Output to the console the results of the comparison (true or false)
        */
    </script>

    <h2>Four</h2>
    <div id="box1" class="box">Mouse Events</div>
    <script>
        var box1 = document.getElementById("box1");
        box1.addEventListener("mouseover", function(){
            console.log('mouse entered the box');
        });
        box1.addEventListener("mouseout", function(){
            console.log('mouse left the box');
        });

        /*
        1. Add two event listeners to the box. One for when the mouse enters, the other when it leaves
        2. When the cursor enters the box, log to the console "Mouse entered the box".
        3. When the cursor leaves the box, log to the console "Mouse left the box".
        */
    </script> 
</body>

三
输出颜色

var mycolorlist=[“绿色”、“黄色”、“蓝色”、“红色”、“棕色”、“紫色”、“粉色”]
var colorlist=document.getElementById（“颜色列表”）；
//需要循环浏览列表并创建li元素
对于（变量i=0；i这是我的一段内容。


就这样吧
var updatefont=document.getElementById（“字体按钮”）；
addEventListener（“单击”，fontSizeHandler）；
//您在任何地方都使用相同的函数名
函数fontSizeHandler（）{
document.getElementById（“to style”）.style.fontSize=document.getElementById（“font-size”）.value+'px'；
}
/*
1.从文本框中获取字体大小值，并使用它更改“to style”的字体大小
*/
元素计数器


数一数元素
document.getElementById（“count”）.addEventListener（“单击”，函数（）{
var value=document.getElementById（“元素类型”）.value；
//使用querySelectorAll将帮助我们获得与给定css选择器匹配的元素。
//ie搜索id需要使用前缀#，类使用前缀。
//因此，输入值#result将搜索id为result的元素，result将获得class为result的元素，其中as just div将给出所有div元素
document.getElementById（“元素计数”）.value=document.querySelectorAll（value）.length；
});
/*
1.获取元素、id、类或查询的用户输入，并在结果框中显示页面上存在的数量
（使用queryselectorall）
*/
五
输入1:

输入2:

比较
var buttoncompare=document.getElementById（“按钮比较”）；
var input1=document.getElementById（“input1”）；
var input2=document.getElementById（“input2”）；
按钮compare.addEventListener（“单击”，函数（）{
//需要比较输入元素的值
console.log（input1.value==input2.value）；
});
/*
1.向“按钮比较”按钮添加事件侦听器
2.单击按钮时，比较两个输入值
3.向控制台输出比较结果（真或假）
*/
四
鼠标事件
var box1=document.getElementById（“box1”）；
框1.addEventListener（“鼠标悬停”，函数（）{
log（'鼠标进入框'）；
});
box1.addEventListener
<h2> It is the test case for generating rainbow using javascript </h2>    


<button value="Show Rainbow" onclick="myFunction()">Click me</button>   

<br>   

<ul id="colors">    

</ul>  

<script>   

function myFunction() {

var array = ['green','yellow','blue','red','brown','purple','pink'];

for (var i=0; i<array.length; i++)    
{
var node = document.createElement("LI");   

var textnode = document.createTextNode(array[i]);   

node.appendChild(textnode);  

document.getElementById("colors").appendChild(node);   

}  

} 
</script>