submitをクリックした後、テキストボックスから表示する項目を取得する

私はコードをブラウザに持っている順序のないリストに表示するテキストボックスに情報を入力しようとしています。私は5項目を入力した後にメッセージを表示させようとしています。以下の私のコードを見てください。submitをクリックした後、テキストボックスから表示する項目を取得する

<!DOCTYPE html> 
<html> 
<head> 

    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
    <title>Hands-on Project 3-4</title> 
    <link rel="stylesheet" href="styles.css" /> 
    <script src="modernizr.custom.05819.js"></script> 
</head> 

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

    <article> 
     <div id="results"> 
      <ul> 
      <li id="item1"></li> 
      <li id="item2"></li> 
      <li id="item3"></li> 
      <li id="item4"></li> 
      <li id="item5"></li> 
      </ul> 
      <p id="resultsExpl"></p> 
     </div> 
     <form> 
      <fieldset> 
      <label for="toolBox" id="placeLabel"> 
       Type the name of a tool, then click Submit: 
      </label> 
      <input type="text" id="toolBox" /> 
      </fieldset> 
      <fieldset> 
      <button type="button" id="button">Submit</button> 
      </fieldset> 
     </form> 
    </article> 
    <script> 
     var i = 1; 
     var listItem = ""; 

     function processInput() { 
      if (i <= 5) {    

       listIem = document.getElementById("item" + i).innerHTML = i; 

      } 

     } 
     if (window.addEventListener) { 
      window.addEventListener("click", processInput, false); 
     } else if (window.attachEvent) { 
      window.attachEvent("onclick", processInput); 
     } 
    </script> 
</body> 
</html>

出典

2017-02-01 DeterminedPupil

何が問題なのですか？特定のエラーが発生していますか？ – Tushar

代わりに '1'、' 2' ...と表示されますか？ –

私は送信ボタンを押すか、数字1〜5を得ると未定義になります。 – DeterminedPupil

この：

はこのことする必要があります（あなたは物事が分離されるようにする場合）

function processInput() { 
    if (i <= 5) { 
     document.getElementById("item" + i).textContent = document.getElementById("toolBox").value; 
     i++; // increment i here 
    } 
}

またはこの：

function processInput() { 
    if (i <= 5) { 
     var listItem = document.getElementById("item" + i); 
     var input = document.getElementById("toolBox"); 
     listItem.textContent = input.value; 
     i++; // increment i here 
    } 
}

利用.textContentの代わりに、 .innerHTMLおよびg入力値は.vlaueを使用して#toolBoxになります。

注：リスト項目を動的に生成できるかどうかを確認してください（hereを確認してください）。

出典

2017-02-01 03:58:33

代わりにswitch文を使用する方法はありますか？ – DeterminedPupil

@RodOなぜswitch文が必要なのですか？ –

私はこのタイプのケースでこれを行う必要があるかどうかを知りたがります。 – DeterminedPupil

submitをクリックした後、テキストボックスから表示する項目を取得する

答えて

関連する問題