JavaScript幫助，將用戶輸入值分配給一個數組，然後分配給UL

-1

我是一名學生，這是我的JavaScript課的作業分配，我必須使下面的代碼工作，它應該從用戶輸入五個地方並將它們分配給一個數組。然後將它們顯示在頁面上的列表中。當我開始時它不起作用。目前它只需要4個條目，並只顯示列表中的前3個。它應該需要5個條目並顯示5個條目。我試圖改變迭代計數器的if語句，但它仍然只需要4個地方。我懷疑有些東西不合適，或者沒有正確編號。任何幫助將不勝感激！JavaScript幫助，將用戶輸入值分配給一個數組，然後分配給UL

<!DOCTYPE html> 
<html> 
<head> 
    <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" /> 
      </fieldset> 
      <fieldset> 
      <button type="button" id="button" onclick="processInput()">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 < 6) { // 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 (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> 
</html>

來源

2016-09-28 codingYogi

你需要更具體。我們不會簡單地爲你解決你的作業問題。告訴我們你到目前爲止已經嘗試過什麼，什麼是和沒有工作，以及你看到的任何錯誤。 – jered

@JCD我已經更新了這個問題，我沒有要求你做我的家庭作業，指導問題的方向或問題將是不錯的和讚賞。 – codingYogi

我看到了幾個問題。最大的一個可能會讓你感到沮喪的是，processInput()每次點擊提交按鈕時都會運行兩次。

首先您分配一個事件處理程序內聯HTML本身：

<button type="button" id="button" onclick="processInput()">Submit</button>

onclick="processInput()"當它解析HTML指定該點擊處理程序。所以以後當你這樣做的：

// 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); 
    } 
    }

你實際上增加另一個重複事件處理程序按鈕的onclick，造成processInput()與每次點擊運行兩次。這會導致數組填充一些意外的值。

的另一個問題是，上面的代碼塊（添加在JavaScript中事件偵聽器）是內部的processInput()本身。所以這是發生了什麼：

HTML將事件監聽器添加到onclick。
第一次點擊該按鈕，processInput()運行一次。 processInput()將重複事件偵聽器添加到onclick。
後續按鈕點擊消防processInput()兩次;一次來自HTML，一次來自JavaScript。

總之，選擇一個或另一個。可以在HTML中內聯添加事件偵聽器，也可以在JavaScript中添加事件偵聽器，而不是同時添加。如果你用JS來做，肯定要確保添加事件監聽器的代碼不在它添加的函數中。把它放在全球範圍內。

我看到一些其他小問題，但是一旦解決了事件監聽器問題，您應該能夠弄清楚它們。建議一句話：在調試代碼時，在某些地方添加console.log()會很有幫助，以便您可以查看變量的狀態並查找哪裏出錯。

來源

2016-09-28 18:46:14 jered

非常感謝您的幫助，但也有解釋！刪除了內聯HTML事件偵聽器後，我能夠使其工作，並使用向後兼容性。祝你有美好的一天！ – codingYogi

您的信息實際上也幫助我解決了我遇到的其他任務，所以再次感謝您！ – codingYogi

JavaScript幫助，將用戶輸入值分配給一個數組，然後分配給UL

回答

相關問題