admin管理员组

文章数量:1399931

In my HTML file I have a div with id="list". Now I want to display a string from my javascript in my html. page. but nothning happen. In my html file, i've imported the srcipt file. Here's how it looks in my script file:

var namesArray = ["lars", "bo", "ib", "peter", "jan", "frederik"];

var list = namesArray.map(name=>"<li>"+name+"</li>");
var listAsStr ="<ul>" + list.join("") + "<ul>";
document.getElementById("list").innerHTML = listAsStr;

In my HTML file I have a div with id="list". Now I want to display a string from my javascript in my html. page. but nothning happen. In my html file, i've imported the srcipt file. Here's how it looks in my script file:

var namesArray = ["lars", "bo", "ib", "peter", "jan", "frederik"];

var list = namesArray.map(name=>"<li>"+name+"</li>");
var listAsStr ="<ul>" + list.join("") + "<ul>";
document.getElementById("list").innerHTML = listAsStr;
  • javascript
  • html
Share Improve this question asked Feb 12, 2019 at 20:42 Johnny VanJohnny Van 871 gold badge1 silver badge10 bronze badges 7
  • 1 What is document.getElementById("list")? Missing / at closing <ul> – guest271314 Commented Feb 12, 2019 at 20:45
  • Is your script in the head of the document? If so, move it to be the last HTML element on the page before the body ends i.e. <script>...</script></body></html> – Marcus Parsons Commented Feb 12, 2019 at 20:47
  • did you wrap your code inside DOMContentLoaded? – gaetanoM Commented Feb 12, 2019 at 20:47
  • my html file and javascript file are in two different file. gaetanM. No i haven't why should I need to do that, usually I don't need to do that. – Johnny Van Commented Feb 12, 2019 at 20:52
  • 2 Questions seeking help with ("why isn't/how to make this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. See: How to create a minimal reproducible example. – Asons Commented Feb 12, 2019 at 21:00
 |  Show 2 more ments

4 Answers 4

Reset to default 3

Whenever you're targeting DOM elements (i.e you want to use document.getElementById("my-element") or similar) you need to first check if the document has loaded.

You can do this in either of the following ways:

window.onload = function(){
  //Now that the window has loaded we can target DOM elements here
}

OR

document.addEventListener('DOMContentLoaded', function () {
  //Now that the contents of the DOM have loaded we can target DOM elements here
});

So a full example (putting your script code in an external file i.e list.js) would look like this:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8">
<title>My list website</title>
<script src="list.js"></script>
</head>
<body>
  <div id="list"></div>
</body>
</html>

list.js

window.onload = function(){
    //We use window.onload to check the window has loaded so we can target DOM elements
    var namesArray = ["lars", "bo", "ib", "peter", "jan", "frederik"];
    var list = namesArray.map(name=>"<li>"+name+"</li>");
    var listAsStr ="<ul>" + list.join("") + "<ul>";
    document.getElementById("list").innerHTML = listAsStr;
}

place your code in this and it will work

window.onload = function() {}

You need to put the JavaScript code after your dom and also wrapped with Script tag.

Example: This will work since we rendered the HTML first and then executed the js into it.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>This Will WorK</title>
</head>
<body>
	
	<div id="list" ></div>

	<script>
		var namesArray = ["lars", "bo", "ib", "peter", "jan", "frederik"];

		var list = namesArray.map(name=>"<li>"+name+"</li>");
		var listAsStr ="<ul>" + list.join("") + "<ul>";

		document.getElementById("list").innerHTML = listAsStr;
	</script>
</body>
</html>

But this will NOT work since the JavaScript is being executed before dom rendered. Also this will probably throw an error Cannot set property 'innerHTML' of null" because getElementById will not be able to find the associated dom.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>This Will Not WorK</title>
</head>
<body>
	
	<script>
		var namesArray = ["lars", "bo", "ib", "peter", "jan", "frederik"];

		var list = namesArray.map(name=>"<li>"+name+"</li>");
		var listAsStr ="<ul>" + list.join("") + "<ul>";

		document.getElementById("list").innerHTML = listAsStr;
	</script>
  
	<div id="list" ></div>

</body>
</html>

Here is a succinct way to do it with template strings. Just wrap everything in a function you assign to window.onload:

<script>
  window.onload = () => {
    const namesArray = ['lars', 'bo', 'ib', 'peter', 'jan', 'frederik'];
    const list = `<ul>${namesArray.map(name => `<li>${name}</li>`).join('')}</ul>`;
    document.getElementById('list').innerHTML = list;
  };
</script>

<div id="list"></div>

本文标签： How to display a string javascript in HTMLStack Overflow

版权声明：本文标题：How to display a string javascript in HTML - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744151090a2593059.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。