Javascript string undefined

Question

I have a code like this:

<html>
<head>
    <script language="javascript">
        window.onload = function() {
            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(self.id)");
                document.body.appendChild(x);
            }
        }

        function isTOF(v) {
            alert(v);
        }
    </script>
</head>
<body>
</body>
</html>

I wanted to make it alert its own alphabet(value), but it doesn't work.

So for example, when I click A Button, the program should alert 'A'.

But it alerts 'undefined'.

I don't know what the problem is.

I want to make my code work properly.

How can I make it?

@tkausl self.id should be button's own alphabet. So for example, when I click C button, its id is C, and self.id is C. So, when isTOF function runs, v == C. But now it doesn't work like that. — Hoseong Jeon
– Hoseong Jeon, Commented Nov 11, 2018 at 6:24
@tkausl Oh, thank you so much. But why self doesn't exist? — Hoseong Jeon
– Hoseong Jeon, Commented Nov 11, 2018 at 6:26

Derek Pollard · Accepted Answer · 2018-11-11 06:32:04Z

3

The problem you are having is caused by self not being defined. Instead, you should use the value that you already set, and pass in this to isTOF:

<html>
<head>
    <script language="javascript">
        window.onload = function() {
            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)");
                document.body.appendChild(x);
            }
        }

        function isTOF(v) {
            alert(v.value);
        }
    </script>
</head>
<body>
</body>
</html>

This way, you are passing a reference to the element to isTOF in case you want to do anything with it or just for purely information purposes.

Hope this helps!

edited Nov 11, 2018 at 6:32

answered Nov 11, 2018 at 6:27

Derek Pollard

7,1856 gold badges45 silver badges62 bronze badges

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

1 Comment

Derek Pollard Over a year ago

@HoseongJeon glad I could help!

CertainPerformance · Accepted Answer · 2018-11-11 06:27:32Z

The problem is:

x.setAttribute("onclick", "isTOF(self.id)");

There's no variable named self in scope at that point. Perhaps you meant to use this, which would work:

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)");
  document.body.appendChild(x);
}

function isTOF(v) {
  alert(v);
}

But since you have a direct reference to the element already, rather than assign a string attribute in the HTML to be turned into a handler (which is basically eval in the form of an HTML attribute), it would be better to attach the listener properly using Javascript - which will make things easier, because then the id, if you set a variable to it beforehand, can simply be referenced again in the handler, rather than having to check this.id. In addition, you can often use dot notation rather than setAttribute, which is more concise and easier to read, so it's probably preferable in most cases:

for (let i = 0; i < 26; i++) {
  const x = document.createElement("INPUT");
  x.type = 'button';
  const id = String.fromCharCode(i + 65);
  x.value = id;
  x.id = id;
  x.onclick = () => isTOF(id);
  document.body.appendChild(x);
}

function isTOF(v) {
  console.log(v);
}

Tigger · Accepted Answer · 2018-11-11 06:34:23Z

2

I would use an event listener instead like so:

function isTOF(e) {
    console.log("id:["+ this.id +"], value:["+ this.value +"]");
}
window.onload = function() {
    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.addEventListener("click", isTOF, false);
        document.body.appendChild(x);
    }
}

edited Nov 11, 2018 at 6:34

answered Nov 11, 2018 at 6:29

Tigger

9,1485 gold badges40 silver badges40 bronze badges

Collectives™ on Stack Overflow

Javascript string undefined

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

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

Linked

Related