Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript

Javascript String Undefined

Post a Comment
I have a code like this: 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

Solution 1:

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><scriptlanguage="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);
            }
        }

        functionisTOF(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!

Solution 2:

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);
}

functionisTOF(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);
}

functionisTOF(v) {
  console.log(v);
}

Solution 3:

I would use an event listener instead like so:

functionisTOF(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);
    }
}

Post a Comment for "Javascript String Undefined"