Change innerText of HTML list items from console with JavaScript

user_13277761 0
Viewed 1653

I am new to programming and I have been looking for solutions, but what I find are more complciated solutions than it should be and I am being asked. I have this HTML

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
 </head>
 <body>
  <h3>Pizza toppings:</h3>
  <ul id="ingredients">
   <li>Batsilica</li>
   <li>Tomtato</li>
   <li>Morezarella</li>
   <li>Hams</li>
  </ul>
 </body>
</html>

So I have to change the ingredients with the console. I wrote this so I get printed the list:

let toppings = document.querySelectorAll('#pizza-toppings li');
for (let i = 0; i < ingredients.length; i++) {
    console.log(ingredients[i].innerText);
}

I dont know how to modify those items of the list one by one. It shouldnt be any replaceChild nor change the list completely, but selecting them and "modifying them". maybe I get the children list of the element with qSelector but still dont know how to correct the spelling of those. It is not like I can right click in the printed list and edit it.

Help? Thanks

innertext api console dom javascript
3 Answers

Infact we use # to select an id, so you need to put your list's id which is ingredients. And your array of matching items is called toppings, so you need to set your loop limit to toppings.length. Although i would recommend using map instead of for loop 

let toppings = document.querySelectorAll('#ingredients li');
for (let i = 0; i < toppings.length; i++) {
    console.log(toppings[i].innerText);
}

This should display all of your items on the console. But if you want to edit item, for example you want to change "Tomtato" into "Meat" you have to do

toppings[1].innerText="Meat"
user_112510100

you don't have any element #pizza-toppings in document. So, toppings is empty node list. ingredients is object, not array of li elements. If you want iterate over li try this:

let ingredients = document.querySelectorAll('#ingredients li');
for (let i = 0; i < ingredients.length; i++) { 
   console.log(ingredients[i].innerText); }
}
user_13309320

One way to grab all of the list items and then modify them (provided you want to perform the same operation on all of the li's) would be to put them in an array:

let ingredients = document.getElementById("ingredients").getElementsByTagName("li");

//create empty array:

let ingredients_list = []

//create loop to iterate over every li:

for (let i = 0; i < ingredients.length; i++) {

//create variable to grab the text from each <li>:

  let ingredients_text = ingredients[i].innerText;

//add the text from each li to the ingredients_list array:

   ingredients_list.push(ingredients_text);
}

// you will now have all of your li's in an array where you can manipulate them as you wish using any array methods. For example, lets convert all of the text to uppercase and then log it to the console using the forEach array method:

ingredients_list.forEach(element => console.log(element.toUpperCase()))

//returns: 
"HAMS"
"BATSILICA"
"TOMTATO"
"MOREZARELLA"

The above is just a basic example of how you can manipulate a list that has been converted into an array using the forEach method.

Another basic example would be to return all the items from the array in a single string using the join method:

console.log(ingredients_list.join(" "))

You can see a full list of available methods at the following link on the left navbar:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

I'm not sure what you want to do exactly with the list items (the original question is not 100% clear) but hopefully this points you in the right direction.

user_132795940
Related