I want to make li elements with properties like below but it doesn't work at all. Could you help me with what is wrong?
var array = [1, 2, 3, "mm", "b", "c", "mm", "y", "mm"];
var list = document.getElementById("list");
function addText(array) {
for (var i = 0; i <= array.length; i++); {
var text = array[i];
if (array[i] == "mm") {
var listItem = document.createElement("LI");
listItem.innerHTML = text;
list.appendChild(listItem);
}
}
};
4 Answers 4
The semicolon at the end of the for loop is the problem.
for (var i = 0; i <= array.length; i++); // <-- remove this
The semicolon makes the loop do nothing for array.length + 1 times instead of looping through the code in between the braces. You also want to change the <= to < so that you don't exceed the array boundary. Arrays are zero based, so your array of 9 items have indices from 0-8. You can also just compare text instead since you're copying it to a variable (not sure what was your intent since you can just get rid of the temporary outright).
Also, since you're just adding text, use textContent over innerHTML
Demo:
var array = [1, 2, 3, "mm", "b", "c", "mm", "y", "mm"];
var list = document.getElementById("list");
function addText(array) {
for (var i = 0; i < array.length; i++) {
var text = array[i];
if (text == "mm") {
var listItem = document.createElement("LI");
listItem.textContent = text;
list.appendChild(listItem);
}
}
}
addText(array);<ul id="list">
</ul>4 Comments
<= earlier. Tweaked the rest per your suggestions.< because arrays end at length - 1 since they're 0-indexed. You have nine items, but the valid indices are 0-8. Index 9 is invalid in this case so you want to loop from index 0-8, and end when i = 9, hence <; <= will end at 10, but the code will bomb trying to access index 9. textContent is preferred when you're only writing text inside an element as it is faster due to not having to parse any HTML. If you have HTML in your string, then innerHTML would be the way to go.var array = [1, 2, 3, "mm", "b", "c", "mm", "y", "mm"];
var list = document.getElementById("list");
function addText(array) {
array.map(function(element) {
if(element === 'm'){
var listItem = document.createElement('LI');
listItem.textContent = element;
list.appendChild(listItem);
}
});
}
addText(array);<ul id="list">
</ul>Comments
There are at least two reasons why your code might not work.
First:
your for loop is not doing much other than incrementing var i. You should remove the semicolon after the for loop. Change it to this:
for (var i = 0; i <= array.length; i++) {
Second:
When are you calling your javascript? If you're running document.getElementById before you define the element with id "list" then document.getElementById("list") will return undefined.
One solution is to define the script at the end of your body, such as:
<body>
<ul id="list">
</ul>
<script type="text/javascript">
var array = [1, 2, 3, "mm", "b", "c", "mm", "y", "mm"];
function addText(array) {
var list = document.getElementById("list");
for (var i = 0; i <= array.length; i++) {
var text = array[i];
if (array[i] == "mm") {
var listItem = document.createElement("LI");
listItem.innerHTML = text;
list.appendChild(listItem);
}
}
};
window.onload = function(){ addText(array) };
</script>
</body>
What is the type of list element. It should be a "ul" element for that to achieve what you need.
i <= array.lengthin your loop?console.loginside the loop would have let you figure out what was going on. These are basic debugging techniques.