[Solved] javascript doesn’t work, even in fiddle let alone the browser

Question

So many bugs. Did you bother to run it? Most of the issues showed up in the JavaScript console or here on stackoverflow in the snippet editor when run

Issues:

No need for script tags on stackoveflow (though you need them outside stack overflow)
It’s init not inti
It’s document.createElement not createElement
songname not "songname"
li not "li"
You marked the playlist with a class “playlist” so you want document.querySelector(".playlist") not document.getElementById("playlist")

Other recommendations

You don’t need type="text/javscript" as that’s the default
You don’t need window.onload just put your script tag at the end and call init yourself.

Consider never using getElementById and always use querySelector

querySelector takes a CSS selector. So

document.querySelector("#foo")   // gets 1st element with id="foo"
document.querySelector(".foo")   // gets 1st element with class="foo"
document.querySelector("canvas") // get first canvas element

etc… You can get much more creative with selectors

function init() {
  var button = document.getElementById("addButton");
  button.onclick = createPlaylist;
}

function createPlaylist() {
  var songText = document.getElementById("songTextInput");
  var songName = songText.value;
  var li = document.createElement("li");
  li.innerHTML = songName;
  var ul = document.querySelector(".playlist");
  ul.appendChild(li);
}

init();

  <form>
    <input type="text" id="songTextInput" name="song" size="40" placeholder="song name">
    <input type="button" id="addButton" name="add" value="addSong">

    <ul class="playlist">

    </ul>
  </form>

Accepted Answer