Это следует из этого вопроса здесь. Я намеревался понять, что пошло не так, вернувшись к основам, но теперь я столкнулся с этой проблемой.

Я заменил переменную массивом чисел

var divs = document.querySelectorAll(".entry");

В надежде заставить каждый из div с классом 'entry' действовать как каждый элемент предыдущего массива 'numbers'

Однако теперь я вижу, как это появляется ...

[object HTMLDivElement]

Где должен быть элемент массива.

Возможно, это как-то связано с NodeLists? Я пытался найти решение, но не могу заставить его работать. Как мне заставить каждый из моих div-ов появляться при нажатии на следующую и предыдущую кнопки вместо вышеуказанных?

Мой полный код ниже:

<html>
<body>

<div id='entry1' class='entry'>
Left Dorchester at 11.45pm, travelling through the night. We arrived 
at Liverpool dockside at
1.30pm the following day.
</div>

<div id ='entry2' class ='entry'>
Lounged about the deck most of the day, looking my last on old 
England for some time, maybe.
</div>

<div class ='entry'>
Very calm sea, little breeze. We arrived at Greenock in the early 
afternoon and dropped anchor.
</div>

<div id ="hello" class ='entry'>
I went on deck first thing this morning and found that we were still 
lying off Greenock, but many ships
have altered their position in readiness.
</div>




<p id="filler"></p>
<button id="back">PREVIOUS</button>
<button id="forward">NEXT</button>


<script>

var divs = document.querySelectorAll(".entry");
var i=-1;
var text = "";

document.getElementById("back").addEventListener("click", function 
previous() {
if (i > 0) {
  text = divs[--i];
}
document.getElementById("filler").innerHTML = text;
});

document.getElementById("forward").addEventListener("click", function 
next(){
if (i < divs.length - 1) {
text = divs[++i];
}
document.getElementById("filler").innerHTML = text;
});

</script>


</body>
</html>
1
Kool T Raps 31 Дек 2017 в 00:03

2 ответа

Лучший ответ

Когда вы выбираете элементы, возвращаемый объект является NodeList и для доступа к узлу в содержимом или тексте nodeList используйте textContent или innerHTML , чтобы понять проблему, посмотрите на пример ниже.

var divs = document.querySelectorAll(".entry");
var i=-1;
var text = "";

document.getElementById("back").addEventListener("click", function 
previous() {
if (i > 0) {
  text = divs[--i].textContent ;
}
document.getElementById("filler").innerHTML = text;
});

document.getElementById("forward").addEventListener("click", function 
next(){
if (i < divs.length - 1) {
text = divs[++i].textContent ;
}
document.getElementById("filler").innerHTML = text;
});
<html>
<body>

<div id='entry1' class='entry'>
Left Dorchester at 11.45pm, travelling through the night. We arrived 
at Liverpool dockside at
1.30pm the following day.
</div>

<div id ='entry2' class ='entry'>
Lounged about the deck most of the day, looking my last on old 
England for some time, maybe.
</div>

<div class ='entry'>
Very calm sea, little breeze. We arrived at Greenock in the early 
afternoon and dropped anchor.
</div>

<div id ="hello" class ='entry'>
I went on deck first thing this morning and found that we were still 
lying off Greenock, but many ships
have altered their position in readiness.
</div>




<p id="filler"></p>
<button id="back">PREVIOUS</button>
<button id="forward">NEXT</button>



</body>
</html>
0
mostafa tourad 30 Дек 2017 в 21:10

Измените document.getElementById("filler").innerHTML = text; на
document.getElementById("filler").innerHTML = text.innerHTML;.

Или вы можете использовать свойство innerText из div вместо innerHTML.

1
Sergii Rudenko 30 Дек 2017 в 21:06