JavaScript не включает значение в элемент списка

Question

JavaScript не включает значение в элемент списка

0

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <h1>Playlist</h1>
  <form>
    <input type="text" id="songInput" placeholder="Enter a song">
    <input type="button" id="songButton" value="Add to Playlist">
  </form>

  <ul id="playlist">
  </ul>
</body>
</html>

Вышеупомянутый html связан со следующим javascript:

window.onload = init;

function init(){
  var button=document.getElementById("songButton");
  button.onclick=handleSongButtonClick;
}

function handleSongButtonClick(){
  var input = document.getElementById("songInput");
  var songName = songInput.value;
  var ul = document.getElementById("playlist");
  var li = document.createElement("li");
  li.value=songName;
  ul.appendChild(li);
}

В чем проблема, когда я ввожу песню, которую она дает, это пуля и текстовое значение? Пожалуйста, помогите, это можно найти здесь http://jsbin.com/EROcogo/2/edit

Justin 20 дек. 2013, в 18:27

Источник

3

Вы будете удивлены, как мало «не работает», чтобы описать вашу проблему.
Sterling Archer 20 дек. 2013, в 17:23
0

Элементы списка не имеют значения свойства, IIRC.
isherwood 20 дек. 2013, в 17:23

Теги:

javascript

html

html5

4 ответа

Ещё вопросы

Вы будете удивлены, как мало «не работает», чтобы описать вашу проблему.
Элементы списка не имеют значения свойства, IIRC.

Dhaval Marthak · Answer 1 · 2013-12-20T15-10-00.000Z

Вы можете использовать innerText

function handleSongButtonClick(){
  var input = document.getElementById("songInput");
  var songName = input.value;
  var ul = document.getElementById("playlist");
  var li = document.createElement("li");
  li.innerText=songName; // Change here
  ul.appendChild(li);
}

Изменено jsBin

Jonathan Lonowski · Answer 2 · 2013-12-20T14-46-00.000Z

Свойство .value обычно полезно только для элементов <form> -related - <input>, <textarea> и т.д.

li.value = songName; // has no affect

Чтобы установить текстовое содержимое в других элементах, вы можете:

Set .textContent (стандартный) и .innerText (IE):
```
li.textContent = li.innerText = songName;
```
Создайте и добавьте текстовый узел.
```
li.appendChild(document.createTextNode(songName));
```

+1 за фактическое объяснение вашего ответа

Krish R · Answer 3 · 2013-12-20T16-00-00.000Z

Используйте input.value вместо songInput.value;

li.innerText=songName;

вместо

li.value=songName;

Fabic · Answer 4 · 2013-12-20T15-01-00.000Z

Здесь у вас есть это: http://jsbin.com/UzeZasa/3/edit?html,js,output

Первый songInput не был объявлен (был назван только input. Second: value не является атрибутом li. Вы должны установить inner-html этого тега с element.innerHTML = content.