CODEWITHSUNDEEP
javascripthtml
Johnny Van
Johnny Van

Reputation: 87

How to display a string javascript in HTML

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;

Upvotes: 1

Views: 11131

Answers (4)

Sarah
Sarah

Reputation: 2003

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

Upvotes: 3

jo_va
jo_va

Reputation: 13964

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>

Upvotes: 0

Iftieaq
Iftieaq

Reputation: 1964

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>

Upvotes: 0

Diego Lopez
Diego Lopez

Reputation: 39

place your code in this and it will work

window.onload = function() {}

Upvotes: 2

Related Questions