Javascript + HTML: Button Not Calling on Function Onclick

Question

I have made a button:

<input type="button" value="a" onclick="searchLetter(this)"></input>

When clicked, it is supposed to call on a function which checks if the letter is in the word and if it is, add it to the spaces array in the corresponding spot:

    function searchLetter(obj)
    {
        var letter = obj.value;
        obj.disable;
        for (i = 0; i <= word.length; i++){
            if (word[i] == letter) {
                wordSpaces[i] = letter;
                document.getElementById('spaces').innerHTML = wordSpaces.join('');
                break;
            }
        }
    }

However, the button is not calling on it and I am not sure why.

Here is the JSFiddle (Hangman)

check your console..word is undefined

Tamil Selvan C
– Tamil Selvan C

2015-04-23 02:16:21 +00:00
Commented Apr 23, 2015 at 2:16 — Tamil Selvan C
– Tamil Selvan C, Commented Apr 23, 2015 at 2:16

mohamedrias · Accepted Answer · 2015-04-23 02:22:57Z

2

function pickWord() {
    var  word = dictionary[Math.floor(Math.random() * dictionary.length)];
     var wordSpaces = [];
     for (var i = word.length - 1; i >= 0; i--)
     wordSpaces.push("_ ");
     document.getElementById('spaces').innerHTML = wordSpaces.join('');

 }

In your code, word and wordSpaces are a local variable to that function.

But in

 function searchLetter(obj) {
     var letter = obj.value;
     for (var i = 0; i <= word.length; i++) {

you're trying to refer the word variable. That's why it's not entering the loop

So it must be like:

 var word, wordSpaces;
 function pickWord() {
     word = dictionary[Math.floor(Math.random() * dictionary.length)];
     wordSpaces = [];
     for (var i = word.length - 1; i >= 0; i--)
     wordSpaces.push("_ ");
     document.getElementById('spaces').innerHTML = wordSpaces.join('');

 }
 function searchLetter(obj) {
     var letter = obj.value;
     for (var i = 0; i <= word.length; i++) {
         if (word[i] == letter) {
             wordSpaces[i] = letter;
             document.getElementById('spaces').innerHTML = wordSpaces.join('');
             break;
         }
     }
 }

edited Apr 23, 2015 at 2:22

answered Apr 23, 2015 at 2:15

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

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

1 Comment

JoshK Over a year ago

ok that makes sense thanks! (have to wait 7 mins before i can select and answer)

shmuli · Accepted Answer · 2015-04-23 02:15:58Z

1

It's a scope issue. The searchLetter function is trying to access your word variable, but can't find it because it's in the other function and not within this function's scope.

One way to correct this is by declaring word in the global scope.

answered Apr 23, 2015 at 2:15

shmuli

5,2126 gold badges36 silver badges64 bronze badges

Comments

Gaël Barbin · Accepted Answer · 2015-04-23 02:16:45Z

1

There is several errors in your code. You can use the console of your browser to see them (f12 opens it on all browsers, I think).

You have to declare the variables word and wordSpaces outside the pickWord function.

https://jsfiddle.net/gael/3vdwLasc/3/

You should also verify that the word has been initialized when you click on a letter.

answered Apr 23, 2015 at 2:16

Gaël Barbin

3,9353 gold badges31 silver badges53 bronze badges

Collectives™ on Stack Overflow

Javascript + HTML: Button Not Calling on Function Onclick

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related