0

I'm trying to make 2 buttons that cycle between different pages of a book/something like that, but innerhtml won't change the content of the main pre, title and page count. HTML:

<strong class="title" style="color: white;">Title</strong>
<pre class="readermain">content here</pre>
<button onclick="switchleft()" class="button1"></button><button onclick="switchright()" class="button2"></button>
<strong class="number" style="color: gray; font-size: 30px;">1</strong><strong style="color: gray; font-size: 30px;">/54</strong> <!---number of pages--->
<script type="text/javascript" language="javascript" src="buttonchange.js"></script>

JS:

/*jshint esversion: 6 */
var n = 1;
function switchleft() {
    n = n-1;
    if(n<=0){n=1;}
    if(n>=53){n=52;} //52 pages in total
    console.log(n);
    switch(n){
        case 1: document.getElementsByTagName('pre').innerHTML = `Multi line text here`;
        document.getElementsByClassName('title').innerHTML = `Title`;
        document.getElementsByClassName('number').innerHTML = `1`;
        break;
        case 2: ...
}
function switchright() {
    n = n+1;
    if(n>=53){n=52;} //52 pages in total
    console.log(n);
    switch(n){
        case 1: document.getElementsByTagName('pre').innerHTML = `Multi line text here`;
        document.getElementsByClassName('title').innerHTML = `Title`;
        document.getElementsByClassName('number').innerHTML = `1`;
        break;
        case 2: ...
}

I'm getting no errors in the console.

Stop It
  • 1
  • 1
    `document.getElementsByTagName` returns a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), you'll have to iterate that to add html to each of its elements. – KooiInc Mar 23 '21 at 14:59
  • ... and the same for `getElementsByClassName`. Plural in *Element**s*** should be a tip-off. – PM 77-1 Mar 23 '21 at 15:00
  • The DOM api is not jQuery (which treats collections of elements the same as a single element). One of the many reasons people should always learn Javascript and the DOM api first, and only then jQuery if necessary (which it almost never is in 2021). – connexo Mar 23 '21 at 15:02

0 Answers0