JavaScript doesn't include value in list item

Question

<!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>

The above html is linked to the following 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);
}

What is the problem when i enter a song all it gives is a bullet and no text value? Please help it can be found here http://jsbin.com/EROcOGo/2/edit

You'd be surprised how little "not working" does to describe your issue. — Sterling Archer
– Sterling Archer, Commented Dec 20, 2013 at 17:23

Dhaval Marthak · Accepted Answer · 2013-12-20 17:29:00Z

3

You can use 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);
}

Modified jsBin

edited Dec 20, 2013 at 17:29

answered Dec 20, 2013 at 17:23

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jonathan Lonowski · Accepted Answer · 2013-12-20 17:29:05Z

2

The .value property is typically only useful with <form>-related elements -- <input>, <textarea>, etc.

li.value = songName; // has no affect

To set the text content within other elements, you can either:

Set .textContent (standard) and .innerText (IE):
```
li.textContent = li.innerText = songName;
```

Create and append a text node.

li.appendChild(document.createTextNode(songName));

edited Dec 20, 2013 at 17:29

answered Dec 20, 2013 at 17:23

Jonathan Lonowski

124k35 gold badges203 silver badges202 bronze badges

Comments

Krish R · Accepted Answer · 2013-12-20 17:23:30Z

0

Use input.value instead of songInput.value;

li.innerText=songName;

instead of

li.value=songName;

answered Dec 20, 2013 at 17:23

Krish R

22.7k7 gold badges54 silver badges60 bronze badges

Comments

Fabic · Accepted Answer · 2013-12-20 17:26:32Z

0

Here you have it: http://jsbin.com/UzeZasa/3/edit?html,js,output

First songInput wasn't declared (was named only input. Second: value isn't an attribute of li. You have to set the inner-html of that tag with element.innerHTML = content.

answered Dec 20, 2013 at 17:26

Fabic

5181 gold badge4 silver badges18 bronze badges

Collectives™ on Stack Overflow

JavaScript doesn't include value in list item

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related