How can I copy the results of the JavaScript button action onto another html page?

Question

How can I copy the results of the JavaScript button action onto another html page?

68 Views Asked by Bernie At 15 April 2025 at 20:33

My code works fine but I don't know what to add to it to append it to another html page instead of to the same document's body. Yes, same website, domain name etc, I have not created the page yet. No frames. The aim is to print the text created:

<!DOCTYPE html>    
<html>    
<body>
        
<p>Click the button to create a P element with some text, and append it to the document's body.</p>            
<button onclick="myFunction()">Blanc</button>    
    
<script>    
function myFunction() {    
    var x = document.createElement("P");    
    var t = document.createTextNode("Blanc.");    
    x.appendChild(t);    
    document.body.appendChild(x);    
}    
</script>

<button onclick="myFunction2()">Fauve à panachures blanches</button>
        
<script>

function myFunction2() {    
    var x = document.createElement("P");    
    var t = document.createTextNode("Fauve à panachures blanches");    
    x.appendChild(t);    
    document.body.appendChild(x);    
}

</script>
        
<button onclick="myFunction3()">Bonnes allures typiques</button>
        
<script>

function myFunction3() {    
    var x = document.createElement("P");    
    var t = document.createTextNode("Bonnes allures typiques");    
    x.appendChild(t);    
    document.body.appendChild(x);    
}

</script>
    
</body>    
</html>

Original Q&A

There are 2 best solutions below

**Chris Barr** · Answer 1

If I understanding correctly, you just want to use the same javascript code on another HTML document, but without copy/pasting the code. Right?

To do this you just need to save your JS code into a file, let's call it my-scripts.js

function myFunction() {    
    var x = document.createElement("P");    
    var t = document.createTextNode("Blanc.");    
    x.appendChild(t);    
    document.body.appendChild(x);    
}   
function myFunction2() {    
    var x = document.createElement("P");    
    var t = document.createTextNode("Fauve à panachures blanches");    
    x.appendChild(t);    
    document.body.appendChild(x);    
}

function myFunction3() {    
    var x = document.createElement("P");    
    var t = document.createTextNode("Bonnes allures typiques");    
    x.appendChild(t);    
    document.body.appendChild(x);    
}

Now in your HTML, you can remove those scripts you pasted and just add a single <scipt> tag at the bottom that has a path to your new JS file you saved.

<!DOCTYPE html>    
<html>    
<body>
        
  <p>Click the button to create a P element with some text, and append it to the document's body.</p>            
  <button onclick="myFunction()">Blanc</button>    
  <button onclick="myFunction2()">Fauve à panachures blanches</button>      
  <button onclick="myFunction3()">Bonnes allures typiques</button>

  <script src='path/to/my-scripts.js'></script>
</body>    
</html>

You can add that script link <script src='path/to/my-scripts.js'></script> on any HTML file you want, just make sure the path is correctly pointing to the file relative to where the HTML file is.

**code_monk** · Answer 2

You could use sessionStorage to create and access variables across different pages. Here, because of sandbox restrictions, I'm using sandboxStorage, but you should use sessionStorage.

Since sessionStorage cannot save DOM nodes, you need to serialize to string, and then deserialize when you need an element. This article describes various methods and their trade-offs.

const sandboxStorage = {
  data: {}
};
sandboxStorage.getItem = (key) => {
  return sandboxStorage.data[key];
};
sandboxStorage.setItem = (key,value) => {
  sandboxStorage.data[key] = value;
};

const saveElement = (key, html) => {
  sandboxStorage.setItem(key, html);
};

const getElement = (key) => {
  const html = sandboxStorage.getItem(key);
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, "text/html");
  return doc.body.firstChild;
};

const appendNode = (node) => {
  document.querySelector('#appendHere').appendChild(node);
};

const func1 = () => {
  const key = 'element1';
  const html = `<p>Blanc.</p>`;
  saveElement(key,html);
  const node = getElement(key);
  appendNode(node);
};

const func2 = () => {
  const key = 'element2';
  const html = `<p>Fauve à panachures blanches</p>`;
  saveElement(key,html);
  const node = getElement(key);
  appendNode(node);
};


const func3 = () => {
  const key = 'element3';
  const html = `<p>Bonnes allures typiques</p>`;
  saveElement(key,html);
  const node = getElement(key);
  appendNode(node);
};

p {
  font-weight: bold;
  padding: 0;
  margin: 0;
  color: Indigo;
}

<html>    
<body>
        
<p>Click the buttons to save elements to sessionStorage for later retreival</p>            

<button onclick="func1()">Blanc</button>
<button onclick="func2()">blanches</button>
<button onclick="func3()">typiques</button>

<div id="appendHere"></div>

How can I copy the results of the JavaScript button action onto another html page?

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in DOM-EVENTS

Trending Questions

Popular # Hahtags

Popular Questions