Изменить внутренний текст HTML элементов списка с консоли с помощью JavaScript - PullRequest
Новая
       42

Изменить внутренний текст HTML элементов списка с консоли с помощью JavaScript

0 голосов
/ 10 апреля 2020

Я новичок в программировании, и я искал решения, но я считаю, что это более сложные решения, чем должно быть, и меня спрашивают. У меня есть это 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>

Так что я должен изменить ингредиенты с консоли. Я написал это, чтобы распечатать список: 

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

Я не знаю, как изменить эти элементы списка по одному. Это не должен быть любой replaceChild, ни изменять список полностью, но выбирать их и «модифицировать их». возможно я получаю список детей элемента с qSelector , но все еще не знаю, как исправить их написание. Я не могу щелкнуть правой кнопкой мыши в распечатанном списке и отредактировать его.

Помощь? Спасибо

Ответы [ 3 ]

0 голосов
/ 10 апреля 2020

у вас нет элемента #pizza-toppings в документе. Итак, toppings это пустой список узлов. ingredients это объект, а не массив элементов li. Если вы хотите перебрать li, попробуйте это: 

let ingredients = document.querySelectorAll('#ingredients li');
for (let i = 0; i < ingredients.length; i++) { 
   console.log(ingredients[i].innerText); }
}
0 голосов
/ 10 апреля 2020

Один из способов получить все элементы списка и затем изменить их (при условии, что вы хотите выполнить одну и ту же операцию на всех библиотеках li) - это поместить их в массив: 

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"

Выше приведен лишь базовый c пример того, как вы можете манипулировать списком, который был преобразован в массив, с помощью метода forEach .

Другим базовым c примером будет возвращение все элементы из массива в одной строке, используя метод join : 

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

Полный список доступных методов можно найти по следующей ссылке на левой панели навигации:

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

Я не уверен, что вы хотите сделать именно с элементами списка (исходный вопрос не ясен на 100%), но, надеюсь, это укажет на вас правильное направление.

0 голосов
/ 10 апреля 2020

Фактически мы используем # для выбора идентификатора, поэтому вам нужно указать идентификатор вашего списка, который является ингредиентами. И ваш массив совпадающих элементов называется toppings, поэтому вам нужно установить ограничение l oop на toppings.length. Хотя я бы рекомендовал использовать карту вместо l oop 

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

Это должно отобразить все ваши элементы на консоли. Но если вы хотите отредактировать элемент, например, вы хотите изменить «Tomtato» на «Мясо», вам нужно сделать 

toppings[1].innerText="Meat"
...