printing variable with innerHTML/innerText on multiple html files

Question

so i have mor than 1 html file and in each of these theres an element like <p> with id:'level1' so ```<p id="level1"></p>

on a js file file i have:

var level1 = {
   name: 'Hello',
   author: 'me',
   id: '1'
}

and then i write those info on html page with innerText, but i tried innerHTML and TextContent too

document.getElementById('level1').innerText = level1.name;

and with all the other names, but i see these on all the files only the first var info but i have other var like level2 level3 that are printed in the same way but the others are only shown on one html file

on my code i have:

index.html

<!-- #1 -->
    <div class="table">
        <a href=""><img class="thumb" onclick="video1x1()" src="images/img1.jpg" width="16%" height="80%"></a>
        <a href="list/1"><p class="p1" id="level1"></p></a>
        <p class="author" id="author1"></p>
     </div>
<!----->

and on another html file:

1.html

<p class="title" id="level1"></p><a href="../2"><p class="ttitle">></p>

this work for level1 var idk why but for the others no.

basically i want that it write like level1.name on every element that has id="level1"

Are you flexible with how the initial javascript variables are generated? Referring to an unknown number of numbered variables might be troublesome — Professor Abronsius, Feb 22 '21 at 08:54

Professor Abronsius · Answer 1 · 2021-02-22T09:18:29.080

With the format of the javascript variables as they are currently it is a little cumbersome to easily select the correct values for the correct elements - but you can do something like this:

var level1 = {
    name: 'Hello',
    author: 'me',
    id:1
}
var level2 = {
    name: 'Goodbye',
    author: 'you',
    id:2
}



// find all the elements that have an ID beginning with "level" 
document.querySelectorAll('[id^="level"]').forEach( ( el, i )=>{
  
  // to refer to the numbered variable define it as a property of the window
  let obj=window[ 'level'+( i + 1 ) ];
  
  if( obj ){
      // find the number from the HTML element
      let a=el.id.match(/\d/);
      
      // if the current HTML element index (+1) matches the number above....
      if( a==(i + 1) ){
        // change the content of the element
        el.innerHTML=obj.name;
        el.parentNode.parentNode.querySelector( 'p.author' ).innerHTML=obj.author;
      }
  }
});

<div class="table">
    <a href=""><img class="thumb" onclick="video1x1()" src="images/img1.jpg" width="16%" height="80%"></a>
    <a href="list/1"><p class="p1" id="level1"></p></a>
    <p class="author" id="author1"></p>
</div>
 
<div class="table">
    <a href=""><img class="thumb" onclick="video1x1()" src="images/img2.jpg" width="16%" height="80%"></a>
    <a href="list/2"><p class="p2" id="level2"></p></a>
    <p class="author" id="author2"></p>
</div>

It would be easier if the JS variables were condensed into a single variable, and JSON would be a good candidate for that. That would allow the matching code to be a little simpler and more robust.

ie:

var levels={
    1:{name:'Hello',author:'me'},
    2:{name:'Goodbye',author:'you'}
};

Admittedly the above is not valid JSON - it is an Object literal, but you get the idea. It is easy to generate this type of content from a db if that is what you use behind the scenes to create the variables initially

var levels={
    1:{name:'Hello',author:'me'},
    2:{name:'Goodbye',author:'you'}
};


Object.keys( levels ).forEach( i=>{
    let obj=levels[ i ];
    let name=document.querySelector('[id="level'+i+'"]');
    let author=document.querySelector('[id="author'+i+'"]');
    
    if( name )name.innerHTML=obj.name;
    if( author )author.innerHTML=obj.author;
})

<div class="table">
    <a href=""><img class="thumb" onclick="video1x1()" src="images/img1.jpg" width="16%" height="80%"></a>
    <a href="list/1"><p class="p1" id="level1"></p></a>
    <p class="author" id="author1"></p>
</div>
 
<div class="table">
    <a href=""><img class="thumb" onclick="video1x1()" src="images/img2.jpg" width="16%" height="80%"></a>
    <a href="list/2"><p class="p2" id="level2"></p></a>
    <p class="author" id="author2"></p>
</div>

printing variable with innerHTML/innerText on multiple html files

1 Answers1