How to use one JavaScript file for two HTML files?-CodePudding

I want to extract the html from list1.html without opening it and use it in list2.html, using JavaScript or jQuery.
list1.html

<ul>
    <li  id="data1">DATA 1</li>
    <li  id="data2">DATA 2</li>
    <li  id="data3">DATA 3</li>
</ul>

list2.html (I want to make multiple files like this)

<ul>
    <li class='getitem' id='getitem1'></li>
    <li class='getitem' id='getitem2'></li>
    <li class='getitem' id='getitem3'></li>
</ul>

Is there any way to show the texts DATA 1, DATA 2, DATA 3 , respectively, in #getitem1 , #getitem2, and #getitem3?
Here's what I have so far (Not working)
script.js

data1 = document.getElementById('data1').innerText();
data2 = document.getElementById('data2').innerText();
data3 = document.getElementById('data3').innerText();

document.getElementById('getitem1').innerText(data1);
document.getElementById('getitem2').innerText(data2);
document.getElementById('getitem3').innerText(data3);

CodePudding user response：

The way you did is not possible as the script file is reloaded when you navigate to the second HTML file. Thus the value of data1, data2, and data3 is undefined.

To pass data, you need a permanent storage like localStorage, sessionStorage, etc..

It can be done in this way:-

script1.js link this to list1.html

localStorage.setItem("data1", document.getElementById("data1").innerText);
localStorage.setItem("data2", document.getElementById("data2").innerText);
localStorage.setItem("data3", document.getElementById("data3").innerText);

script2.js link this to list1.html

document.getElementById("getitem1").innerText = localStorage.getItem("data1");
document.getElementById("getitem2").innerText = localStorage.getItem("data2");
document.getElementById("getitem3").innerText = localStorage.getItem("data3");

CodePudding user response：

Use innerHTML to get the HTML inner content. You can update your js file to put into list2 respectively.

var data1 = document.getElementById('data1').innerHTML;
var data2 = document.getElementById('data2').innerHTML;
var data3 = document.getElementById('data3').innerHTML;

document.getElementById('getitem1').innerHTML = data1;
document.getElementById('getitem2').innerHTML = data2;
document.getElementById('getitem3').innerHTML = data3;

CodePudding user response：

You are doing too much. The simple oway of doing this is

const data3 = document.getElementById('data3');

console.log(data3.textContent);

Of course you will want to have a div, or or li to display it where I used console.log()

CodePudding user response：

You might check out this answer to another similar question. Looks like it could be helpful? https://stackoverflow.com/a/9003363/14920078

That is if you require to keep the html files seperate?

CodePudding user response：

Put the script in an external JavaScript file.

use the src attribute in the tag to call the script.js file;

 <!DOCTYPE html>
 <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
       <script src=”script.js” language=”JavaScript” type=”text/javascript”></script>
    </head>
    <body>
    </body>
  </html>