0
これはthis question以降のものです。私はこの問題に直面していましたが、何がうまくいかないのかを理解することを目的としていました。要素のテキストコンテンツが表示されず、代わりに[オブジェクトHTMLDivElement]が表示されます
私は、変数
私はしかし、以前の配列「数字」の各要素のように振る舞うクラス「エントリ」でdiv要素のそれぞれを作ることを望んで
var divs = document.querySelectorAll(".entry");
のために、アレイ「数字」を置換これが表示されます...
[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>