Menu
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?
424
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!
167
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);
}If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
