Question

In: Computer Science

JavaScript Use the browser tools to identify the lines missing var keywords, add the keywords in...

JavaScript

Use the browser tools to identify the lines missing var keywords, add the keywords in your text editor.

<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() {

                     "use strict";

                      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>

Solutions

Expert Solution

Here, you have two variables without any declaration.

they are:

  1. listItem
  2. j

Replace them like..

NOW Your code is good.!!!

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() {

                     "use strict";

                      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:";

var listItem = "";

                         for (var 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);

                   }

======================


Related Solutions

Please take the code below and add some javascript to it. Please use javascript inline. Please...
Please take the code below and add some javascript to it. Please use javascript inline. Please be sure to specify within the webpage with something like 'Click here' too show what was done and how to activate it. Please post in a format that can be directly copied. Thank you in advance HINT: add some fun widgets to the page index-css.html: <!DOCTYPE html> <html lang="en"> <head> <!-- title for web page --> <title>Index-CSS Page</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">...
Answer coherently about these topics and use keywords, information, dates, and concepts. identify and explain the...
Answer coherently about these topics and use keywords, information, dates, and concepts. identify and explain the differences between the three main economic forms: Mercantilism, Capitalism, and Socialism. What eras are they related to in regards to colonialism, industrialization, and the modern world? Name some individuals associated with these different "isms". How have they evolved and changed with time. How do these economic models treat the main economic factors like free trade, and ownership of capital? How are these economic models...
Create a web calculator with JavaScript. Only four operations (Add, Sub, Multiplication, and Division) Use a...
Create a web calculator with JavaScript. Only four operations (Add, Sub, Multiplication, and Division) Use a CE button to cancel the operation.    Use the following website or any online resource as a reference. Don’t use their CSS or any other code.                 https://freshman.tech/calculator/ I am trying to learn please make comments then I will understand better.
Identify and briefly explain the threemajor tools that the Federal Reserve can use to implement monetary...
Identify and briefly explain the threemajor tools that the Federal Reserve can use to implement monetary policy. Which of these tools is the most effective and why? How would the mechanism(s) described in part b. above be used to stimulate (expand or grow) or to contract (slow down) the economy?
Run the R command y <- rchisq(1000,2). Then use your exploratory tools to identify which, if...
Run the R command y <- rchisq(1000,2). Then use your exploratory tools to identify which, if any of the following are correct. THERE ARE more than one correct answer. Group of answer choices: The distribution is unimodal. The mean would be an appropriate measure of location. The median would be an appropriate measure of location The distribution is skewed to the right The standard deviation would be an appropriate measure of spread.
Run the R command y <- rchisq(1000,2). Then use your exploratory tools to identify which, if...
Run the R command y <- rchisq(1000,2). Then use your exploratory tools to identify which, if any of the following are correct. THERE ARE more than one correct answer. Group of answer choices: The distribution is unimodal. The mean would be an appropriate measure of location. The median would be an appropriate measure of location The distribution is skewed to the right The standard deviation would be an appropriate measure of spread.
What are 2 tools you can use to identify possible issues in a QuickBooks Online CompanyTransaction Journal
 What are 2 tools you can use to identify possible issues in a QuickBooks Online CompanyTransaction Journal  a) Import Data b) Account and Settings c) Audit Log d) Journal Entry
Identify what tools you would use, along with the testing procedures provided, to evaluate Requirement 6...
Identify what tools you would use, along with the testing procedures provided, to evaluate Requirement 6 of the PCI DSS. Make sure to identify a tool (as applicable) for testing procedure and state the tool you would use to verify compliance.
Using research tools please identify companies that actually use the Balanced Scorecard. Now choose three (3);...
Using research tools please identify companies that actually use the Balanced Scorecard. Now choose three (3); How is the Balanced Scorecard presented in the annual reports of the company? What does Balanced Scorecard reporting suggest about the management of the company, and the responsibility the company feels for its stakeholders? Please place your answers to the above questions on the module 6 discussion forum. The recommended word count is 300 - 400 words. You may like to use images and...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT