ZuoTi.Pro
Question

JavaScript (Please debug this code) When a user enters a string in the input box, the...

JavaScript (Please debug this code)

When a user enters a string in the input box, the program is designed to add the string to an array. When the array reaches a certain length, the program displays all the users' entries in a list on the page.

When you finish debugging, the user's entry in the input box should be cleared each time the submit button is clicked. Additionally, after five strings are submitted, the entire list of submitted strings should be displayed on the page.

<body>
   <header>
      <h1>
         Hands-on Project 4-3
      </h1>
   </header>

   <article>
      <div id="results">
          <p id="resultsExpl"></p>
          <ul>
             <li id="item1"></li>
             <li id="item2"></li>
             <li id="item3"></li>
             <li id="item4"></li>
             <li id="item5"></li>
          </ul>
      </div>
      <form>
          <fieldset>
            <label for="placeBox" id="placeLabel">
              Type the name of a place, then click Submit:
            </label>
            <input type="text" id="placeBox" />
          </fieldset>
          <fieldset>
            <button type="button" id="button">Submit</button>
          </fieldset>
      </form>
   </article>
   <script>
      var places = []; // new array to store entered places
      var i = 1; // counter variable to track array indexes

      // function to add input to array and then generate list after 5th submission
      function processInput() {
         places[i] = document.getElementById("placeBox").value; // add entered value to array
         document.getElementById("placeBox").value = "" // clear text box
         if (i < 5) { // iterate counter variable
            i++;
         }
         else { // add entered value to array and write results to document
            document.getElementById("resultsExpl").innerHTML = "You entered the following places:";
            listItem = "";
            for (j = 1; j < 6; j++) { // write each array element to its corresponding list item
               listItem = "item" + j;
               document.getElementById(listItem).innerHTML = places[j];
            }
       
      }

      // add backward compatible event listener to Submit button
    var submitButton = document.getElementById("button");
      if (submitButton.addEventListener) {
        submitButton.addEventListener("click", processInput, false);
      } else if (submitButton.attachEvent) {
        submitButton.attachEvent("onclick", processInput);
      }
   }
   </script>
</body>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Code -

<html>

        <body>

                <header>

                   <h1>

                      Hands-on Project 4-3

                   </h1>

                </header>

             

                <article>

                   <div id="results">

                       <p id="resultsExpl"></p>

                       <ul>

                          <li id="item1"></li>

                          <li id="item2"></li>

                          <li id="item3"></li>

                          <li id="item4"></li>

                          <li id="item5"></li>

                       </ul>

                   </div>

                   <form>

                       <fieldset>

                         <label for="placeBox" id="placeLabel">

                           Type the name of a place, then click Submit:

                         </label>

                         <input type="text" id="placeBox" />

                       </fieldset>

                       <fieldset>

                         <button type="button" id="button">Submit</button>

                       </fieldset>

                   </form>

                </article>

                <script>

                   var places = []; // new array to store entered places

                   var i = 1; // counter variable to track array indexes

             

                   // function to add input to array and then generate list after 5th submission

                   function processInput() {

                      places[i] = document.getElementById("placeBox").value; // add entered value to array

                      document.getElementById("placeBox").value = "" // clear text box

                      if (i < 5) { // iterate counter variable

                         i++;

                      }

                      else { // add entered value to array and write results to document

                         document.getElementById("resultsExpl").innerHTML = "You entered the following places:";

                         listItem = "";

                         for (j = 1; j < 6; j++) { // write each array element to its corresponding list item

                            listItem = "item" + j;

                            document.getElementById(listItem).innerHTML = places[j];

                         }

                    

                   }

             

                   // add backward compatible event listener to Submit button

                 

                }

                /* this listener should be out of  processInput() function*/

                var submitButton = document.getElementById("button");

                   if (submitButton.addEventListener) {

                     submitButton.addEventListener("click", processInput, false);

                   } else if (submitButton.attachEvent) {

                     submitButton.attachEvent("onclick", processInput);

                   }

                </script>

             </body>

</html>

0 0
Add a comment
Know the answer?
Add Answer to:
JavaScript (Please debug this code) When a user enters a string in the input box, the...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...

    <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...

  • in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript...

    in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 5 Hands-on Project 5-2 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hands-on Project 5-2</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 5-2 </h1> </header> <article> <h2>Change of address form</h2> <form> <fieldset id="contactinfo"> <label for="addrinput"> Street Address </label> <input type="text" id="addrinput" name="Address" /> <label for="cityinput"> City </label> <input type="text" id="cityinput" name="City"...

  • Form for a user to enter billing and shipping information. A checkbox that when clicked copies...

    Form for a user to enter billing and shipping information. A checkbox that when clicked copies all of the billing information to the shipping information. A submit button that, when clicked, will make sure that all text fields have had data entered into them. Create your own validation in for the fields, No automatic browser validation. JavaScript/HTML <!DOCTYPE html> <html lang="en"> <head> </head> <body>    <div class="container">       <header>          <h1>                      </h1>       </header>       <nav>          <ul>...

  • LANGUAGE JAVASCRIPT, PHP Need help with PHP and ajax code. The user needs to login but,...

    LANGUAGE JAVASCRIPT, PHP Need help with PHP and ajax code. The user needs to login but, I keep getting an error that I coded "Wrong username and password!" ***PLEASE DONT GIVE ME A NEW CODE THAT IS NOWHERE NEAR THE CODE I SUBMITTED***** PLEASE LOOK AT THE CODE AND SEE ANY ISSUES login.html <!DOCTYPE html> <html> <head> <title>login popup</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style type="text/css"> body { background-color: white; } </style> </head> <body> <center> <h1 style="text-align: center;"> Login </h1> <form>             Login ID:...

  • I created an Html with tabs, then how do I import the constant character content of...

    I created an Html with tabs, then how do I import the constant character content of a JS into one of these tabs without editing that JS file? here is my page： <!DOCTYPE html> <html> <body>     <div id="main">         <span class="tab">             <button class="current">News</button>             <button>Create</button>             <button onclick="about()">About</button>             <button>Login</button>         </span>         <div class="con" style="display: block"> For news content</div>         <div class="con">For create content</div>         <div class="con" id="about">For about content</div>     </div> </body> <script type="text/javascript" src='strings.js'></script> <script>     var box = document.getElementById('main');     var btns = document.getElementsByTagName('button');     var divs =...

  • This question relates to Javascript. Could you please show me why my code is not working?...

    This question relates to Javascript. Could you please show me why my code is not working? I want to create 2 text boxes and have the user enter something into both of them. If the text entered into both boxes is identical the a green message is made visible. If the boxes are different a red message is made visable. Please keep it simple because I am new to javascript. <html> <head>               <title></title>        <script>...

  • Please help me with this code for javascript. <!DOCTYPE html> <html> <head> <title>Strings and Arrays</title> <script>...

    Please help me with this code for javascript. <!DOCTYPE html> <html> <head> <title>Strings and Arrays</title> <script> function wrangleArray() { var string1 = prompt("Enter: This class is going to fast");//Must be entered by the user var string1 = "";//Is this right? I want that string to change later by a series of prompt questions document.getElementById("div1").innerHTML = "<p>" + sentence + "</p>"; var words = sentence.split(" ");//I need to convert my string to an Array is this the way to do it?...

  • I have the code buts its not working as this below instruction can anyone help Use...

    I have the code buts its not working as this below instruction can anyone help Use the requirements from the pizza part of Assignment 6 and do the following using CSS and an internal style sheet: 1.     Your Javascript function should be in an external file (don’t forget to move it up to studentweb too) 2.     Put a red border of 300px in width around the form 3.     There should be three Div sections: header, main_body, and footer. 4.     Center the name of your...

  • I am trying to create a slide show using JavaScript. This is what I have so...

    I am trying to create a slide show using JavaScript. This is what I have so far: HTML: <!DOCTYPE html> <html lang="en"> <head>    <meta charset="utf-8"> <title>Slide Show</title> <link rel="stylesheet" href="main.css"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="slide_show.js"></script> </head> <body> <section> <h1>Fishing Slide Show</h1> <ul id="image_list"> <li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li> <li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li> <li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"></a></li> <li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li> <li><a href="images/lures.jpg" title="The Lures for Catching"></a></li> </ul>...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT