Подскажите,в чем ошибка?

211

14 апреля 2018, 17:15

function myFunction() { 
  var myList = document.getElementById("lst"); 
  var myList_first = myList.firstChild.innerHTML; 
  var myList_last = myList.lastChild.innerHTML; 
 
  document.getElementById("res").innerHTML = '<b>Первый элемент в списке:</b>' + myList_first + '<br>' + '<b>Последний элемент в списке:</b>' + myList_last; 
}

<!DOCTYPE html> 
<html> 
 
<head> 
  <meta charset="utf-8"> 
  <script type="text/javascript" src="script.js"></script> 
</head> 
 
<body> 
 
  <ol id="lst"> 
    <li id="li1">Кофе</li> 
    <li id="li2">Чай</li> 
    <li id="li3">Какао</li> 
    <li id="li4">Молоко</li> 
    <li id="li5">Сок</li> 
  </ol> 
 
  <button onClick="myFunction()"> 
Поиск первого и последнего элемента списка 
</button> 
 
  <p id="res"></p> 
</body> 
 
</html>

Answer 1

Вам надо использовать firstElementChild и lastElementChild

function myFunction() { 
  var myList = document.getElementById("lst"); 
  var myList_first = myList.firstElementChild.innerHTML; 
  var myList_last = myList.lastElementChild.innerHTML; 
   
 
  document.getElementById("res").innerHTML = '<b>Первый элемент в списке:</b>' + myList_first + '<br>' + '<b>Последний элемент в списке:</b>' + myList_last; 
}

<!DOCTYPE html> 
<html> 
 
<head> 
  <meta charset="utf-8"> 
  <script type="text/javascript" src="script.js"></script> 
</head> 
 
<body> 
 
  <ol id="lst"> 
    <li id="li1">Кофе</li> 
    <li id="li2">Чай</li> 
    <li id="li3">Какао</li> 
    <li id="li4">Молоко</li> 
    <li id="li5">Сок</li> 
  </ol> 
 
  <button onClick="myFunction()"> 
Поиск первого и последнего элемента списка 
</button> 
 
  <p id="res"></p> 
</body> 
 
</html>

Answer 2

На самом деле DOM внутри элемента ol устроен так:

Строка с переносом строки и четырьмя пробелами
Элемент li1
Строка с переносом строки и четырьмя пробелами
Элемент li2
Строка с переносом строки и четырьмя пробелами
Элемент li3
Строка с переносом строки и четырьмя пробелами
Элемент li4
Строка с переносом строки и четырьмя пробелами
Элемент li5
Строка с переносом строки и двумя пробелами

firstChild и lastChild ссылаются на первого и последнего потомка соответственно независимо от типа — и в вашем случае это оказываются строки (пункты 1 и 11).

Вам следует использовать вместо них firstElementChild и lastElementChild — они пропускают строки и берут именно элементы (пункты 2 и 10).

Не пытайтесь решить проблему стиранием всех пробелов и переносов строк: некоторые браузеры просто оставят в DOM пустые строки вместо них.

Answer 3

Один из способов:

function myFunction() {
    var myList = document.getElementById("lst").children;
    var myList_first = myList[0].innerHTML;
    var myList_last = myList[myList.length - 1].innerHTML;
    document.getElementById("res").innerHTML = '<b>Первый элемент в списке: </b>' + myList_first + '<br>' + '<b>Последний элемент в списке:</b>' + myList_last;
}

Answer 4

Смотрите, как вариант решения:

function myFunction() { 
  var myList = document.getElementById("lst"); 
  var myList_first = myList.firstChild.innerHTML; 
  var myList_last = myList.lastChild.innerHTML; 
 
  document.getElementById("res").innerHTML = '<b>Первый элемент в списке:</b>' + myList_first + '<br>' + '<b>Последний элемент в списке:</b>' + myList_last; 
}

<!DOCTYPE html> 
<html> 
 
<head> 
  <meta charset="utf-8"> 
  <script type="text/javascript" src="script.js"></script> 
</head> 
 
<body> 
 
  <ol id="lst" 
    ><li id="li1">Кофе</li 
    ><li id="li2">Чай</li 
    ><li id="li3">Какао</li 
    ><li id="li4">Молоко</li 
    ><li id="li5">Сок</li 
  ></ol> 
 
  <button onClick="myFunction()"> 
Поиск первого и последнего элемента списка 
</button> 
 
  <p id="res"></p> 
</body> 
 
</html>

Я перенес закрывающую угловую скобку на новую строку. Причина того, почему у вас это не работает: т.к. нет переноса, появляется пробел между li-блоками на каждой строке. Поэтому первый и последний чайлд - #text Node (подробнее тут). Перенос скобочек таким образом позволяет избежать появления этих пробелов (или можно просто все записать в одну строку).

Однако вариант с использованием firstElementChild является лучшим решением, ибо я не гарантирую работоспособность этого фикса в разных браузерах.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Bootstrap 4. Расположение navbar

Необходимо сделать навигационное меню как на картинкеСтрого в центре экрана первый список меню, справа - другой

1025

HTML

Установка картинки png на элемент

Мне нужно установить картинку в формате png на кнопку, как это можно сделать? Я имею ввиду, что мне нужно заменить стандартную текстуру кнопки...

183

HTML

Обновление в html <table><tbody>тега tr</tbody></table>

Подскажите пожалуйста как сделать периодическое setTimeout(8 * 1000 ); обновление в таблице html, ну то есть в Mysql попала запись через какое то время...

169

HTML

проблема с float

https://syncmaximgithub

203