переменная печати с innerHTML/innerText в нескольких html-файлах

поэтому у меня есть более 1 html-файла, и в каждом из них есть элемент типа ‹p› с id: 'level1', поэтому ```‹p id=level1›‹/p›

в файле js у меня есть:

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

а затем я пишу эту информацию на html-странице с помощью innerText, но я также пробовал innerHTML и TextContent

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

и со всеми другими именами, но я вижу во всех файлах только первую информацию о переменной, но у меня есть другие переменные, такие как level2 level3, которые печатаются таким же образом, но другие отображаются только в одном html-файле.

в моем коде у меня есть:

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>
<!----->

и в другом html-файле:

1.html

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

эта работа для level1 var idk почему, а для остальных нет.

в основном я хочу, чтобы он писал как level1.name для каждого элемента с id=level1


javascript html innerhtml innertext
person JvstAlf    schedule 22.02.2021    source источник
comment
Вы гибки в том, как генерируются исходные переменные javascript? Ссылка на неизвестное количество пронумерованных переменных может быть проблематичной.   -  person Professor Abronsius    schedule 22.02.2021

Ответы (1)


arrow_upward
0
arrow_downward

С форматом переменных javascript, как они есть в настоящее время, немного сложно легко выбрать правильные значения для правильных элементов, но вы можете сделать что-то вроде этого:

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>

Было бы проще, если бы переменные JS были объединены в одну переменную, и JSON был бы хорошим кандидатом для этого. Это позволит сделать соответствующий код немного проще и надежнее.

ie:

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

По общему признанию, приведенное выше недействительно JSON - это литерал объекта, но вы поняли идею. Контент такого типа легко сгенерировать из базы данных, если это то, что вы используете за кулисами для первоначального создания переменных.

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>

person Professor Abronsius    schedule 22.02.2021