logo标签列表

JavaScript字符串undefined

javascripthtml
4

我有一个像这样的代码：

<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>

我想让它弹出自己的字母（值），但它不起作用。
例如，当我点击"A"按钮时，程序应该弹出'A'。
但它弹出了“undefined”。
我不知道问题出在哪里。
我想让我的代码正常工作。
我该怎么做？
你认为 self.id 是什么？ - tkausl
@tkausl self.id 应该是按钮自己的字母表。例如，当我点击 C 按钮时，它的 id 是 C，self.id 也是 C。因此，当 isTOF 函数运行时，v == C。但现在它不像那样工作了。 - Hoseong Jeon
它不起作用是因为 self 不存在。 - tkausl
@tkausl 哦，非常感谢。但是为什么 self 不存在？ - Hoseong Jeon
1
但是看起来 this.id 可以工作... - moilejter
显示剩余2条评论
3个回答
3
您遇到的问题是由于self未定义引起的。相反，您应该使用已经设置的值，并将this传递给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>

这样，您将引用元素传递给isTOF，以便在需要时对其进行操作或仅用于纯粹的信息目的。希望这可以帮助！
@HoseongJeon 很高兴我能帮到你！ - Derek Pollard
2
问题是：
x.setAttribute("onclick", "isTOF(self.id)");

此时作用域中没有名为self的变量。也许你想使用this，这样会起作用：

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

但是既然您已经直接引用了该元素，那么与其在HTML中分配一个字符串属性以成为处理程序（这基本上是HTML属性的eval形式），不如使用Javascript正确地附加侦听器-这将使事情变得更容易，因为如果您预先设置变量，则可以在处理程序中简单地再次引用id，而无需检查this.id。此外，您通常可以使用点表示法而不是setAttribute，这更加简洁易读，因此在大多数情况下可能更可取：

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

2
我会使用事件监听器，代码如下： 

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接