0
이것은 this question의 여기에 있습니다. 나는이 문제에 직면 했음에도 불구하고, 기본으로 돌아가 잘못 된 것이 무엇인지를 이해하려고했다.요소의 텍스트 내용이 표시되지 않습니다. 대신 [object HTMLDivElement]가 표시됩니다.
는 I 이전 배열 '숫자'
의 각 요소와 같은 클래스 '항목'법 div의 각각을 위하여 기대 변수
var divs = document.querySelectorAll(".entry");
배열 '숫자'치환 그러나 I 이제이 모습을 볼 수 있습니다 ...
[object HTMLDivElement]
배열의 요소는 어디에 있어야합니다.
노드 목록과 관련이 있습니까? 해결책을 찾지 못했지만 해결책을 찾기 위해 노력했습니다. 위와 같은 대신 다음 및 이전 버튼을 클릭 할 때 각 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>