JavaScript event handler not working

Question

This javascript:

window.onload=init;

function init(){
    var addSongButton = document.getElementById("addButton");
    addSongButton.onclick = handleAddSongButtonClick;
}

function handleAddSongButtonClick(){
    var textInput = document.getElementById("songTextInput");
    var songName = textInput.value;

    if(songName=""){
        alert("Please enter a song name");
    }
    else{
    alert("Adding " +songName);
    }
}

is linked to this HTML:

<form>
  <input type="text" id="songTextInput" size="40" placeholder="Song name">
  <input type="button" id="addButton" value="Add Song">
</form>

<ul id="playlist">

</ul>

Why whenever I enter a song name or don't enter a song name it just alerts "Adding"? I want it to alert "Adding insert song name" when text is entered and alert "Please enter a song name" when text is not entered.

Answer 1

You are using an equals sign in your if() check, here:

if(songName=""){

That is setting `songName' to be an empty string. Change the code to:

if (songName === "") {

. . . and that should do the comparison correctly.

Answer 2

You're using the assignment operator, =, in your if statement:

if(songName="")

where you should be using either == or === to actually compare the values. (see this for the difference between these)

What's happening currently is that songName="" is being evaluated, and returns "" (the value that was assigned). This is a falsey value meaning it is interpreted as false and so your coniditonal statement is falling through to your else but with songName now being equal to the empty string.