Получить элементы из текстового поля для отображения после нажатия Отправить

Я пытаюсь получить информацию, которую я набираю, в текстовое поле для отображения в неупорядоченном списке, который у меня есть в моем коде, в браузере. Я также пытаюсь отобразить сообщение после ввода 5 элементов. См. Мой код ниже.Получить элементы из текстового поля для отображения после нажатия Отправить

<!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) { 
     listIem = document.getElementById("item" + i).innerHTML = i; 
    } 
}

Должно быть так:

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 et #toolBox входное значение с использованием .vlaue.

Примечание: будет лучше, если бы вы могли генерировать элементы списка динамически (проверьте, как here).

источник

2017-02-01 03:58:33

Есть ли способ, которым я мог бы использовать оператор switch? – DeterminedPupil

@RodO Зачем нужен оператор switch? –

Я хочу знать, нужно ли мне когда-либо использовать один в этом случае, как это сделать. – DeterminedPupil

Получить элементы из текстового поля для отображения после нажатия Отправить

ответ

Смежные вопросы