Change word on each keypress javascript/jquery

Question

I'm new to javascript/jquery and stuck with the following problem:

I want to the value of my HTML paragraph element "abc" to change when either 'a' or 'l' is pressed.

The code works but does so only once. My aim is to change the "abc" element, say, 20 times whereby each time one element from "newwords" is picked.

Maybe I forgot a loop somewhere?

html:

<p id="abc" style="font-size:20px" align="center">WORD</p>  

javascript/jquery:

var newwords = ["NEWWORD1", "NEWWORD2", "NEWWORD3"];
var rand_new = newwords[Math.floor(Math.random() * newwords.length)];

$(function(){
    $(document).keypress(function(e){
        if ($(e.target).is('input, textarea')) {
            return;
        };
        if (e.which === 97 || e.which === 108) {
            document.getElementById("abc").firstChild.nodeValue = rand_new;
        };
        });
    });

Answer 1

It's not that your code only works once, your problem is that you only generate the random number once, so you always get the same result. Move the number generation inside the function and it works:

var newwords = ["NEWWORD1", "NEWWORD2", "NEWWORD3"];

$(document).keypress(function(e){
    if ($(e.target).is('input, textarea')) {
        return;
    };
    var rand_new = newwords[Math.floor(Math.random() * newwords.length)];
    if (e.which === 97 || e.which === 108) {
        document.getElementById("abc").firstChild.nodeValue = rand_new;
    };    
});

jsfiddle: http://jsfiddle.net/R5vqM/1/

Answer 2

So you check to see if the keypress is either 'a' or 'i' and if it is, then you set the text in the #abc container to the value in rand_new. It's actually working every single time, however, the value of rand_new is not being changed since it has only been set once. You need to set rand_new each time a or i is pressed. So with a simple change you'll have this:

...
if (e.which === 97 || e.which === 108) {
    rand_new = newwords[Math.floor(Math.random() * newwords.length)];
    $("#abc").text(rand_new);
};
...

That way you're updating the value each time.

Answer 3

You are only generating the random word on the first load - turn it into a function and it should work:

var newwords = ["NEWWORD1", "NEWWORD2", "NEWWORD3"];
function rand_new() {
    return newwords[Math.floor(Math.random() * newwords.length)];
}

$(function(){
    $(document).keypress(function(e){
        if ($(e.target).is('input, textarea')) {
            return;
        };
        if (e.which === 97 || e.which === 108) {
           document.getElementById("abc").firstChild.nodeValue = rand_new();
        };
    });
});

Answer 4

var newwords = ["NEWWORD1", "NEWWORD2", "NEWWORD3"];


$(function(){`enter code here`
    $(document).keypress(function(e){
        var rand_new = newwords[Math.floor(Math.random() * newwords.length)];
        if ($(e.target).is('input, textarea')) {
            return;
        };
        if (e.which === 97 || e.which === 108) {
            document.getElementById("abc").firstChild.nodeValue = rand_new;
        };
        });
    });

Answer 5

if your going to use Jquery, just stick with it. much easier.

$("#abc").text(rand_new);