Question

我有以下代码，我正在尝试做评论中提到的内容：我有以下代码，我正在尝试做评论中提到的内容：我有以下代码，我正在尝试做评论中提到的内容：我有以下代码，我正在尝试做评论中提到的内容：我有以下代码，我正在尝试做评论中提到的内容：我有以下代码，我正在尝试做评论中提到的内容：

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Project 14</title>
  <style>
    html {margin:1em; font-family:Helvetica, Arial, sans-serif;}
    h2 {clear:both;}
    .box {width:200px; height:200px; border:1px solid #000; background-color:#ddd;}
  </style>
</head>
<body>
  <header><h1>Project 14</h1></header>

  <h2>One</h2>
  <button id="button-one">Alert</button>
  <script>
  var buttonone = document.getElementById("button-one");
  buttonone.addEventListener("click", myFunction);
function myFunction(){
alert ("button was clicked");}
  </script>

  <h2>Two</h2>
  <button id="button-two">What is your name?</button>
  <div id="name-output"></div>
  <script>
  var buttontwo = document.getElementById("button-two");
  buttontwo.addEventListener("click", myFunction);
function myFunction(){
prompt ("What is your name?");}
var personname = prompt("What is your name?");
var nameoutput = document.getElementById("name-ouput");
var newParagraph = document.createElement("p");
var copy = document.createTextNode("Your name is" +personname)
newParagraph.appendChild (copy)
var len = personname.length;
for (var i = 0; i < len; i++) {
        nameoutput.appendChild(newParagraph.cloneNode(true));
    }

  /*
  1. When "button-two" is clicked, use a "prompt" to ask for the users name
  2. Wrap the result in a paragraph and output it to "name-output" x times (with x being the number of characters in the name)
  3. Each paragraph should start with the text "Your name is:"
  */
  </script>

  <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>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>

  <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>

</body>
</html>

Answer 1

您可以按照自己的需要clone创建一个段落

var buttontwo = document.getElementById("button-two");
buttontwo.addEventListener("click", myFunction);

function myFunction() {
    var personname = prompt("What is your name?");
    var nameoutput = document.getElementById("name-ouput");

    var newParagraph = document.createElement("p");
    var copy = document.createTextNode(personname);
    newParagraph.appendChild(copy)

    var len = personname.length;
    for (var i = 0; i < len; i++) {
        //clone the paragraph as many times as the number of characters
        nameoutput.appendChild(newParagraph.cloneNode(true));
    }

}

演示：Fiddle

您不应该有多个具有相同名称的功能

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Project 14</title>
        <style>
            html {margin:1em; font-family:Helvetica, Arial, sans-serif;}
            h2 {clear:both;}
            .box {width:200px; height:200px; border:1px solid #000; background-color:#ddd;}
        </style>
    </head>
    <body>
        <header><h1>Project 14</h1></header>

        <h2>Two</h2>
        <button id="button-two">What is your name?</button>
        <div id="name-output"></div>
        <script>

            var buttontwo = document.getElementById("button-two");
            buttontwo.addEventListener("click", myFunction);

            function myFunction() {
                var personname = prompt("What is your name?");
                var nameoutput = document.getElementById("name-output");

                var newParagraph = document.createElement("p");
                var copy = document.createTextNode(personname);
                newParagraph.appendChild(copy)

                var len = personname.length;
                for (var i = 0; i < len; i++) {
                    //clone the paragraph as many times as the number of characters
                    nameoutput.appendChild(newParagraph.cloneNode(true));
                }

            }
            /*
            1. When "button-two" is clicked, use a "prompt" to ask for the users name
            2. Wrap the result in a paragraph and output it to "name-output" x times (with x being the number of characters in the name)
            3. Each paragraph should start with the text "Your name is:"
            */
        </script>

    </body>
</html>

如何在Javascript中输出提示数据？

1 个答案: