Why is var in same function is not defined? [duplicate]

up vote
-2
down vote

favorite

This question already has an answer here:

Javascript string undefined

3 answers

I have a code like this:

<html>

<head>

    <script language="javascript">

        window.onload = function() {

            var wordlist = [ "A", "BB", "CCC", "DDDD" ];



            for(i = 0; i < 26; i++) {

                var x = document.createElement("INPUT");

                x.setAttribute("type", "button");

                x.setAttribute("value", String.fromCharCode(i + 65));

                x.setAttribute("id", String.fromCharCode(i + 65));

                x.setAttribute("onclick", "isTOF(this.id, wordlist[3])");

                document.body.appendChild(x);

            }

        }



        function isTOF(v, word) {

            console.log(word);

        }

    </script>

</head>

<body>

</body>

</html>

I thought that console.log(word) will show me "DDDD", but it says like this:

wordlist is not defined

How can I make it run?

asked Nov 11 at 6:40

Hoseong Jeon

22612

marked as duplicate by CertainPerformance javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 11 at 6:42

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

How can I edit my code?
– Hoseong Jeon
Nov 11 at 6:43

Attach the handler using Javascript rather than an HTML attribute as in my answer there, and wordlist will be in scope of the listener function. (alternatively, make wordlist global, but that's not recommended)
– CertainPerformance
Nov 11 at 6:43

@CertainPerformance I don't understand what you mean because I'm beginner at programming. Can you tell me in more details?
– Hoseong Jeon
Nov 11 at 6:45

Probably because word list is defined within your onload function. Which is out of scope for the actual button. Try attaching it to the window. window.wordlist=.... instead of var.
– Sello Mkantjwa
Nov 11 at 6:47

Just copy my answer in the linked question, except with your wordlist as well, and it'll work
– CertainPerformance
Nov 11 at 6:48

|
show 1 more comment

up vote
-2
down vote

favorite

This question already has an answer here:

Javascript string undefined

3 answers

I have a code like this:

<html>

<head>

    <script language="javascript">

        window.onload = function() {

            var wordlist = [ "A", "BB", "CCC", "DDDD" ];



            for(i = 0; i < 26; i++) {

                var x = document.createElement("INPUT");

                x.setAttribute("type", "button");

                x.setAttribute("value", String.fromCharCode(i + 65));

                x.setAttribute("id", String.fromCharCode(i + 65));

                x.setAttribute("onclick", "isTOF(this.id, wordlist[3])");

                document.body.appendChild(x);

            }

        }



        function isTOF(v, word) {

            console.log(word);

        }

    </script>

</head>

<body>

</body>

</html>

I thought that console.log(word) will show me "DDDD", but it says like this:

wordlist is not defined

How can I make it run?

asked Nov 11 at 6:40

Hoseong Jeon

22612

marked as duplicate by CertainPerformance javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 11 at 6:42

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

How can I edit my code?
– Hoseong Jeon
Nov 11 at 6:43

Attach the handler using Javascript rather than an HTML attribute as in my answer there, and wordlist will be in scope of the listener function. (alternatively, make wordlist global, but that's not recommended)
– CertainPerformance
Nov 11 at 6:43

@CertainPerformance I don't understand what you mean because I'm beginner at programming. Can you tell me in more details?
– Hoseong Jeon
Nov 11 at 6:45

Probably because word list is defined within your onload function. Which is out of scope for the actual button. Try attaching it to the window. window.wordlist=.... instead of var.
– Sello Mkantjwa
Nov 11 at 6:47

Just copy my answer in the linked question, except with your wordlist as well, and it'll work
– CertainPerformance
Nov 11 at 6:48

|
show 1 more comment

up vote
-2
down vote

favorite

This question already has an answer here:

Javascript string undefined

3 answers

I have a code like this:

<html>

<head>

    <script language="javascript">

        window.onload = function() {

            var wordlist = [ "A", "BB", "CCC", "DDDD" ];



            for(i = 0; i < 26; i++) {

                var x = document.createElement("INPUT");

                x.setAttribute("type", "button");

                x.setAttribute("value", String.fromCharCode(i + 65));

                x.setAttribute("id", String.fromCharCode(i + 65));

                x.setAttribute("onclick", "isTOF(this.id, wordlist[3])");

                document.body.appendChild(x);

            }

        }



        function isTOF(v, word) {

            console.log(word);

        }

    </script>

</head>

<body>

</body>

</html>

I thought that console.log(word) will show me "DDDD", but it says like this:

wordlist is not defined

How can I make it run?

asked Nov 11 at 6:40

Hoseong Jeon

22612

This question already has an answer here:

Javascript string undefined

3 answers

I have a code like this:

<html>

<head>

    <script language="javascript">

        window.onload = function() {

            var wordlist = [ "A", "BB", "CCC", "DDDD" ];



            for(i = 0; i < 26; i++) {

                var x = document.createElement("INPUT");

                x.setAttribute("type", "button");

                x.setAttribute("value", String.fromCharCode(i + 65));

                x.setAttribute("id", String.fromCharCode(i + 65));

                x.setAttribute("onclick", "isTOF(this.id, wordlist[3])");

                document.body.appendChild(x);

            }

        }



        function isTOF(v, word) {

            console.log(word);

        }

    </script>

</head>

<body>

</body>

</html>

I thought that console.log(word) will show me "DDDD", but it says like this:

wordlist is not defined

How can I make it run?

This question already has an answer here:

Javascript string undefined

3 answers

<html>

<head>

    <script language="javascript">

        window.onload = function() {

            var wordlist = [ "A", "BB", "CCC", "DDDD" ];



            for(i = 0; i < 26; i++) {

                var x = document.createElement("INPUT");

                x.setAttribute("type", "button");

                x.setAttribute("value", String.fromCharCode(i + 65));

                x.setAttribute("id", String.fromCharCode(i + 65));

                x.setAttribute("onclick", "isTOF(this.id, wordlist[3])");

                document.body.appendChild(x);

            }

        }



        function isTOF(v, word) {

            console.log(word);

        }

    </script>

</head>

<body>

</body>

</html>

<html>

<head>

    <script language="javascript">

        window.onload = function() {

            var wordlist = [ "A", "BB", "CCC", "DDDD" ];



            for(i = 0; i < 26; i++) {

                var x = document.createElement("INPUT");

                x.setAttribute("type", "button");

                x.setAttribute("value", String.fromCharCode(i + 65));

                x.setAttribute("id", String.fromCharCode(i + 65));

                x.setAttribute("onclick", "isTOF(this.id, wordlist[3])");

                document.body.appendChild(x);

            }

        }



        function isTOF(v, word) {

            console.log(word);

        }

    </script>

</head>

<body>

</body>

</html>

javascript html

asked Nov 11 at 6:40

Hoseong Jeon

22612

asked Nov 11 at 6:40

Hoseong Jeon

22612

asked Nov 11 at 6:40

Hoseong Jeon

22612

asked Nov 11 at 6:40

Hoseong Jeon

22612

asked Nov 11 at 6:40

Hoseong Jeon

22612

marked as duplicate by CertainPerformance javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 11 at 6:42

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

marked as duplicate by CertainPerformance javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 11 at 6:42

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

How can I edit my code?
– Hoseong Jeon
Nov 11 at 6:43

Attach the handler using Javascript rather than an HTML attribute as in my answer there, and wordlist will be in scope of the listener function. (alternatively, make wordlist global, but that's not recommended)
– CertainPerformance
Nov 11 at 6:43

@CertainPerformance I don't understand what you mean because I'm beginner at programming. Can you tell me in more details?
– Hoseong Jeon
Nov 11 at 6:45

Probably because word list is defined within your onload function. Which is out of scope for the actual button. Try attaching it to the window. window.wordlist=.... instead of var.
– Sello Mkantjwa
Nov 11 at 6:47

Just copy my answer in the linked question, except with your wordlist as well, and it'll work
– CertainPerformance
Nov 11 at 6:48

|
show 1 more comment

How can I edit my code?
– Hoseong Jeon
Nov 11 at 6:43

Attach the handler using Javascript rather than an HTML attribute as in my answer there, and wordlist will be in scope of the listener function. (alternatively, make wordlist global, but that's not recommended)
– CertainPerformance
Nov 11 at 6:43

@CertainPerformance I don't understand what you mean because I'm beginner at programming. Can you tell me in more details?
– Hoseong Jeon
Nov 11 at 6:45

Probably because word list is defined within your onload function. Which is out of scope for the actual button. Try attaching it to the window. window.wordlist=.... instead of var.
– Sello Mkantjwa
Nov 11 at 6:47

Just copy my answer in the linked question, except with your wordlist as well, and it'll work
– CertainPerformance
Nov 11 at 6:48

How can I edit my code?
– Hoseong Jeon
Nov 11 at 6:43

Attach the handler using Javascript rather than an HTML attribute as in my answer there, and wordlist will be in scope of the listener function. (alternatively, make wordlist global, but that's not recommended)
– CertainPerformance
Nov 11 at 6:43

@CertainPerformance I don't understand what you mean because I'm beginner at programming. Can you tell me in more details?
– Hoseong Jeon
Nov 11 at 6:45

Probably because word list is defined within your onload function. Which is out of scope for the actual button. Try attaching it to the window. window.wordlist=.... instead of var.
– Sello Mkantjwa
Nov 11 at 6:47

Just copy my answer in the linked question, except with your wordlist as well, and it'll work
– CertainPerformance
Nov 11 at 6:48

|
show 1 more comment

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

Parameter string is not properly concatenated, should be:

x.setAttribute("onclick", "isTOF(this.id, '" + wordlist[3] + "')")

Though I prefer using Template Literals which allows embedded expressions:

<html>

<head>

    <script language="javascript">

        window.onload = function() {

            var wordlist = [ "A", "BB", "CCC", "DDDD" ];



            for(i = 0; i < 26; i++) {

                var x = document.createElement("INPUT");

                x.setAttribute("type", "button");

                x.setAttribute("value", String.fromCharCode(i + 65));

                x.setAttribute("id", String.fromCharCode(i + 65));

                x.setAttribute("onclick", `isTOF(this.id, '${wordlist[3]}')`);

                document.body.appendChild(x);

            }

        }



        function isTOF(v, word) {

            console.log(word);

        }

    </script>

</head>

<body>

</body>

</html>

edited Nov 11 at 7:03

answered Nov 11 at 6:47

Mamun

23.3k71428

What's ${wordlist[3]}? Isn't that jquery? Can you make it with javascript please?
– Hoseong Jeon
Nov 11 at 6:50

@HoseongJeon, no it's not. It is part of the syntax of Template String....Please notice how it is used inside back tick.....
– Mamun
Nov 11 at 6:52

Oh than is that same with x.setAttribute("onclick", "isTOF(this.id, " + wordlist[3] + ")");?
– Hoseong Jeon
Nov 11 at 6:56

@HoseongJeon, not quite, you have to wrap with quotes, like....x.setAttribute("onclick", "isTOF(this.id, '" + wordlist[3] + "')").....to pass that as string....that's why I prefer Template Literals.....thanks.
– Mamun
Nov 11 at 6:58

Alright. Anyway thank you very much :) You helped me again!
– Hoseong Jeon
Nov 11 at 7:00

|
show 1 more comment

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

Parameter string is not properly concatenated, should be:

x.setAttribute("onclick", "isTOF(this.id, '" + wordlist[3] + "')")

Though I prefer using Template Literals which allows embedded expressions:

<html>

<head>

    <script language="javascript">

        window.onload = function() {

            var wordlist = [ "A", "BB", "CCC", "DDDD" ];



            for(i = 0; i < 26; i++) {

                var x = document.createElement("INPUT");

                x.setAttribute("type", "button");

                x.setAttribute("value", String.fromCharCode(i + 65));

                x.setAttribute("id", String.fromCharCode(i + 65));

                x.setAttribute("onclick", `isTOF(this.id, '${wordlist[3]}')`);

                document.body.appendChild(x);

            }

        }



        function isTOF(v, word) {

            console.log(word);

        }

    </script>

</head>

<body>

</body>

</html>

edited Nov 11 at 7:03

answered Nov 11 at 6:47

Mamun

23.3k71428

What's ${wordlist[3]}? Isn't that jquery? Can you make it with javascript please?
– Hoseong Jeon
Nov 11 at 6:50

@HoseongJeon, no it's not. It is part of the syntax of Template String....Please notice how it is used inside back tick.....
– Mamun
Nov 11 at 6:52

Oh than is that same with x.setAttribute("onclick", "isTOF(this.id, " + wordlist[3] + ")");?
– Hoseong Jeon
Nov 11 at 6:56

@HoseongJeon, not quite, you have to wrap with quotes, like....x.setAttribute("onclick", "isTOF(this.id, '" + wordlist[3] + "')").....to pass that as string....that's why I prefer Template Literals.....thanks.
– Mamun
Nov 11 at 6:58

Alright. Anyway thank you very much :) You helped me again!
– Hoseong Jeon
Nov 11 at 7:00

|
show 1 more comment

up vote
1
down vote

accepted

Parameter string is not properly concatenated, should be:

x.setAttribute("onclick", "isTOF(this.id, '" + wordlist[3] + "')")

Though I prefer using Template Literals which allows embedded expressions:

<html>

<head>

    <script language="javascript">

        window.onload = function() {

            var wordlist = [ "A", "BB", "CCC", "DDDD" ];



            for(i = 0; i < 26; i++) {

                var x = document.createElement("INPUT");

                x.setAttribute("type", "button");

                x.setAttribute("value", String.fromCharCode(i + 65));

                x.setAttribute("id", String.fromCharCode(i + 65));

                x.setAttribute("onclick", `isTOF(this.id, '${wordlist[3]}')`);

                document.body.appendChild(x);

            }

        }



        function isTOF(v, word) {

            console.log(word);

        }

    </script>

</head>

<body>

</body>

</html>

edited Nov 11 at 7:03

answered Nov 11 at 6:47

Mamun

23.3k71428

What's ${wordlist[3]}? Isn't that jquery? Can you make it with javascript please?
– Hoseong Jeon
Nov 11 at 6:50

@HoseongJeon, no it's not. It is part of the syntax of Template String....Please notice how it is used inside back tick.....
– Mamun
Nov 11 at 6:52

Oh than is that same with x.setAttribute("onclick", "isTOF(this.id, " + wordlist[3] + ")");?
– Hoseong Jeon
Nov 11 at 6:56

@HoseongJeon, not quite, you have to wrap with quotes, like....x.setAttribute("onclick", "isTOF(this.id, '" + wordlist[3] + "')").....to pass that as string....that's why I prefer Template Literals.....thanks.
– Mamun
Nov 11 at 6:58

Alright. Anyway thank you very much :) You helped me again!
– Hoseong Jeon
Nov 11 at 7:00

|
show 1 more comment

up vote
1
down vote

accepted

Parameter string is not properly concatenated, should be:

x.setAttribute("onclick", "isTOF(this.id, '" + wordlist[3] + "')")

Though I prefer using Template Literals which allows embedded expressions:

<html>

<head>

    <script language="javascript">

        window.onload = function() {

            var wordlist = [ "A", "BB", "CCC", "DDDD" ];



            for(i = 0; i < 26; i++) {

                var x = document.createElement("INPUT");

                x.setAttribute("type", "button");

                x.setAttribute("value", String.fromCharCode(i + 65));

                x.setAttribute("id", String.fromCharCode(i + 65));

                x.setAttribute("onclick", `isTOF(this.id, '${wordlist[3]}')`);

                document.body.appendChild(x);

            }

        }



        function isTOF(v, word) {

            console.log(word);

        }

    </script>

</head>

<body>

</body>

</html>

edited Nov 11 at 7:03

answered Nov 11 at 6:47

Mamun

23.3k71428

Parameter string is not properly concatenated, should be:

x.setAttribute("onclick", "isTOF(this.id, '" + wordlist[3] + "')")

Though I prefer using Template Literals which allows embedded expressions:

<html>

<head>

    <script language="javascript">

        window.onload = function() {

            var wordlist = [ "A", "BB", "CCC", "DDDD" ];



            for(i = 0; i < 26; i++) {

                var x = document.createElement("INPUT");

                x.setAttribute("type", "button");

                x.setAttribute("value", String.fromCharCode(i + 65));

                x.setAttribute("id", String.fromCharCode(i + 65));

                x.setAttribute("onclick", `isTOF(this.id, '${wordlist[3]}')`);

                document.body.appendChild(x);

            }

        }



        function isTOF(v, word) {

            console.log(word);

        }

    </script>

</head>

<body>

</body>

</html>

<html>

<head>

    <script language="javascript">

        window.onload = function() {

            var wordlist = [ "A", "BB", "CCC", "DDDD" ];



            for(i = 0; i < 26; i++) {

                var x = document.createElement("INPUT");

                x.setAttribute("type", "button");

                x.setAttribute("value", String.fromCharCode(i + 65));

                x.setAttribute("id", String.fromCharCode(i + 65));

                x.setAttribute("onclick", `isTOF(this.id, '${wordlist[3]}')`);

                document.body.appendChild(x);

            }

        }



        function isTOF(v, word) {

            console.log(word);

        }

    </script>

</head>

<body>

</body>

</html>

<html>

<head>

    <script language="javascript">

        window.onload = function() {

            var wordlist = [ "A", "BB", "CCC", "DDDD" ];



            for(i = 0; i < 26; i++) {

                var x = document.createElement("INPUT");

                x.setAttribute("type", "button");

                x.setAttribute("value", String.fromCharCode(i + 65));

                x.setAttribute("id", String.fromCharCode(i + 65));

                x.setAttribute("onclick", `isTOF(this.id, '${wordlist[3]}')`);

                document.body.appendChild(x);

            }

        }



        function isTOF(v, word) {

            console.log(word);

        }

    </script>

</head>

<body>

</body>

</html>

edited Nov 11 at 7:03

answered Nov 11 at 6:47

Mamun

23.3k71428

edited Nov 11 at 7:03

answered Nov 11 at 6:47

Mamun

23.3k71428

answered Nov 11 at 6:47

Mamun

23.3k71428

answered Nov 11 at 6:47

Mamun

23.3k71428

What's ${wordlist[3]}? Isn't that jquery? Can you make it with javascript please?
– Hoseong Jeon
Nov 11 at 6:50

@HoseongJeon, no it's not. It is part of the syntax of Template String....Please notice how it is used inside back tick.....
– Mamun
Nov 11 at 6:52

Oh than is that same with x.setAttribute("onclick", "isTOF(this.id, " + wordlist[3] + ")");?
– Hoseong Jeon
Nov 11 at 6:56

@HoseongJeon, not quite, you have to wrap with quotes, like....x.setAttribute("onclick", "isTOF(this.id, '" + wordlist[3] + "')").....to pass that as string....that's why I prefer Template Literals.....thanks.
– Mamun
Nov 11 at 6:58

Alright. Anyway thank you very much :) You helped me again!
– Hoseong Jeon
Nov 11 at 7:00

|
show 1 more comment

What's ${wordlist[3]}? Isn't that jquery? Can you make it with javascript please?
– Hoseong Jeon
Nov 11 at 6:50

@HoseongJeon, no it's not. It is part of the syntax of Template String....Please notice how it is used inside back tick.....
– Mamun
Nov 11 at 6:52

Oh than is that same with x.setAttribute("onclick", "isTOF(this.id, " + wordlist[3] + ")");?
– Hoseong Jeon
Nov 11 at 6:56

@HoseongJeon, not quite, you have to wrap with quotes, like....x.setAttribute("onclick", "isTOF(this.id, '" + wordlist[3] + "')").....to pass that as string....that's why I prefer Template Literals.....thanks.
– Mamun
Nov 11 at 6:58

Alright. Anyway thank you very much :) You helped me again!
– Hoseong Jeon
Nov 11 at 7:00

What's ${wordlist[3]}? Isn't that jquery? Can you make it with javascript please?
– Hoseong Jeon
Nov 11 at 6:50

@HoseongJeon, no it's not. It is part of the syntax of Template String....Please notice how it is used inside back tick.....
– Mamun
Nov 11 at 6:52

Oh than is that same with x.setAttribute("onclick", "isTOF(this.id, " + wordlist[3] + ")");?
– Hoseong Jeon
Nov 11 at 6:56

@HoseongJeon, not quite, you have to wrap with quotes, like....x.setAttribute("onclick", "isTOF(this.id, '" + wordlist[3] + "')").....to pass that as string....that's why I prefer Template Literals.....thanks.
– Mamun
Nov 11 at 6:58

Alright. Anyway thank you very much :) You helped me again!
– Hoseong Jeon
Nov 11 at 7:00

|
show 1 more comment

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky