Jscript无法将内容打印到元素

Question

Jscript无法将内容打印到元素

3

我不知道为什么这个代码无法运行。就我所知，它应该按字母顺序打印我的数组到“output”的div中。

<!DOCTYPE HTML>
 <html>
   <head>
   <meta charset="utf-8">
<title> Lexicographic ordering </title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    var words = [];
        var input = prompt("Please enter a word or type end to stop prompts");
    while (input != 'end') {
        words.push(input);
        input = prompt("Please enter a word or type end to stop prompts");
    }
    words.sort();
    getElementById('#output').innerHTML= words.join();
</script>
 </head>
 <body>
    <header>Lexicographic Ordering </header>
    <hr>
 <div class ="page-wrapper">
     h1> Lexicographic Ordering </h1>
    <div id="output"></div>
 </div>
</body>
</html>

- nope

发生了什么？尝试使用 getElementById('output').innerHTML=words.join();。 - Sualkcin

2个回答

2

您也可以尝试将<script>块移动到末尾，在</body>关闭之前的任何位置，但必须在<div id="output"></div>之后。某些浏览器上的JavaScript在执行或引用未被HTML解析器解析的元素时会失败。

此外，您不需要使用#和getElementById(...);一起使用。 #是用于Jquery的。这是纯JavaScript。请使用getElementById('output').whatever...; 编辑：

Patrick Evans建议的另一种选择是将JavaScript代码移动到onload()事件处理程序方法中执行该代码。这确保在我们尝试操作它之前，HTML已完全加载到DOM中。

- Vivek Jain

2

不要将它移动到末尾，而是应该将其保留在头部，并使用“onload”事件确保DOM已准备好进行操作。 - Patrick Evans

@PatrickEvans，感谢您宝贵的建议。我已经编辑了我的答案，包括您对onload()的建议和我自己对document.ready()的建议。再次感谢！ - Vivek Jain

1

你所说的document.ready是指jQuery的.ready()函数吗？因为document并没有名为ready的方法 :) - Patrick Evans

你说得对！我已经将它移除了。也许我们太专注于使用它，有时忽略了Jquery只是一个JavaScript框架的事实 ;) 再次感谢！ - Vivek Jain

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matt Patenaude · Accepted Answer

您的代码中有两个小bug，它们都在这一行：

getElementById('#output').innerHTML= words.join();

getElementById 不是 window 的一部分，而是 document 对象的一部分，因此您必须正确引用它。此外，该方法需要一个 ID 而不是选择器，因此您不需要在其前面添加 #。

document.getElementById('output').innerHTML= words.join();

那应该可以实现你想要的功能！或者，因为我注意到你已经包含了jQuery，你也可以使用$('#output').innerHTML = ...来达到同样的效果。