I've created an "onclick" event handler, now how do I create an event handler for "Enter" key?

Question

I took this simple code from Ch 3 of OREILLY's "Head First HTML5 Programming". I made a "few" adjustments, but nothing major. As you see, it's merely a simple little playlist manager with a few functions & alerts. The webpage appears just as it should. Click on the "Add Song" button, it adds song to playlist. Everything works as it should, EXCEPT if you hit "Enter" on your keyboard, all the songs in the playlist simply disappear. How do I create an event handler for the "Enter" key? All I know is that the "Enter" keycode is 13, how exactly do I apply this to my page? "ALSO", as you can see, I attempted to make it so that any song added to the playlist would be saved in Local Storage & loaded everytime the webpage is opened, but to "no" avail. Any help would be highly appreciated, thanks in advance!

Here's the code:

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="playlist.css">
<title>RTH</title>
<meta charset="utf-8">
<script>

loadPlaylist();


function handleButtonClick() {

    var textInput = document.getElementById("songTextInput");

    var songName = textInput.value;

    if (songName == "") {
        alert("Enter a track!");
    } else {
        alert("Congrats...track is now being added!");
    }


    var li = document.createElement("li");

    li.innerHTML = songName;

    var ul = document.getElementById("playlist");

    ul.appendChild(li);

    save(songName);

}

</script>
<body>


<Input type = "text" Id = "songTextInput" size = "40" placeholder = "Insert track here..."/>

<Input type = "button" id = "addButton" onclick ="handleButtonClick();" value = "Add Song"/>



<strong>

<ul id="playlist">


</ul>
</strong>
</body>
</html>

try this link as reference http://javascript.info/tutorial/keyboard-events — exexzian, Mar 16 '13 at 03:25

score 1 · Answer 1 · answered Mar 16 '13 at 03:28

1

Since you aren't submitting form data to another URL, you can remove the form tags. Browsers submit a form when you hit enter, but if there is no form, enter will not submit the form. And then you don't need to worry about handling it in JavaScript.

This assumes you don't want enter to save the entered song.

answered Mar 16 '13 at 03:28

scott.korin

2,537
2
23
36

Hey, thanks for the quick response, Scott. I removed the
tags as you suggested, yet every time I re-open the webpage...the songs still aren't there =/
– Jaleel Dwight Mar 16 '13 at 03:42
I missed that part of the question :) You will have to post more code. What do the loadPlaylist and save functions do? – scott.korin Mar 16 '13 at 03:46
It's the code I got from the book. It said "save(songName);" would save the songs entered into Local Storage & "loadPlaylist();" was supposed to load the playlist each time the webpage was opened. This book is really starting to grind my gears >:| – Jaleel Dwight Mar 16 '13 at 03:55
I would assume both of those functions are defined somewhere else in whatever book you are reading, or part of your task is to write those functions. – scott.korin Mar 16 '13 at 03:58
Ohh, well can you help me out here, Scott :D – Jaleel Dwight Mar 16 '13 at 03:59
I've never used local storage. I suggest reading this question about storing arrays: http://stackoverflow.com/questions/3357553/how-to-store-an-array-in-localstorage – scott.korin Mar 16 '13 at 04:11

Arun P Johny · Answer 2 · 2013-03-16T03:26:57.367

I think what you need is a onsubmit event handler

<form onsubmit="return validate()">
    <Input type = "text" Id = "songTextInput" size = "40" placeholder = "Insert track here..."/>
    <Input type = "submit" id = "addButton" value = "Add Song"/>
</form>

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

    if (songName) {
        alert("Enter a track!");
        return false;
    } else {
        alert("Congrats...track is now being added!");
    }

    var li = document.createElement("li");
    li.innerHTML = songName;
    var ul = document.getElementById("playlist");
    ul.appendChild(li);
    save(songName);    

    return false;
}

Demo: Fiddle

Hey, appreciate the suggestion. It seemed to be working at first. I pressed enter & the alert "finally" popped up! Then I pressed enter yet again. I saw the song entered into the playlist for about half a millisecond, then ALL the songs disappeared from the playlist =/ — Jaleel Dwight, Mar 16 '13 at 03:50

score 0 · Answer 3 · answered Mar 16 '13 at 03:26

You can add the event parameter to your function.

JQuery Method:

$(document).ready(function() {
   $('input').on('keyup', function(event) {
       if(event.keyCode == 13)
       {
           alert('Enter');
           event.preventDefault();
       }
   }); 
});

Raw Javascript Method:

var Input = document.getElementByTagName('input');

Input.keyUp = function(event)
{
     if(event.keyCode == 13)
     {
        alert('Enter!');
        event.preventDefault();
     }
}

I've created an "onclick" event handler, now how do I create an event handler for "Enter" key?

3 Answers3