How to change the content of a paragraph from another page?-CodePudding

I'm trying to make something where there is an input the user changes. Then in the click of an anchor you change pages and a paragraph should have it's contents changed to the input the user placed earlier. This is what I tried:

const anchor = document.getElementById('anchor');
if (anchor) anchor.addEventListener("click", myfunction);

function myfunction() {
  var paragraph = document.getElementById('p1');//paragraph that should be changed

  var userInput = document.getElementById('input1').value;//input that should be placed inside the paragraph
    
    paragraph.innerHTML = userInput
  };

CodePudding user response：

So changing value on the same page with Javascript is fairly simple. Maybe that can be enough for you. See this sample snippet.

function showPersonalMessage()
{
  let firstname = document.querySelector("#firstname").value;
  let output = document.querySelector("#output");
  output.innerHTML = firstname;
}

<input type="text" name="firstname" id="firstname">
<button onclick="showPersonalMessage()">Personalize</button>

<p>Hello <span id="output">Anonymous</span>, this is some sample text like Lorem Ipsum.</p>

If you really need to send data between pages with Javascript it gets a bit more difficult. Ofcourse there are several ways to do this, but most are far more advanced and require you to understand how pages, scripts, servers, etc. work. If you would really want to do that I would recommend you start with a simple get parameter. So lets say the inputfield is on page1.html and then you send them with a link to page2.html?value=....