Get HTML input value to a a P tag with JavaScript-CodePudding

I am new to HTML and JS and I am trying to get a value from an input in a page called second.html and send it to a p tag in a page called third.html.

Not sure whether this is something possible but on second.html I have some input-elements in which once some information is written I want to press a button and then that would take me to another page (third.html), in which the value that I got from the input in the second.html would be used in a p tag. I have been able to get the input value and move to the third.html page, however, assigning the value to the p-element is where I am failing. This is the code:

second.html

</head>
  <body>
    <h1>Second page</h1>
    <label for="ticket">ticket:</label>
    <input
      type="text"
      id="ticket2"
      name="ticket"
      required
      minlength="4"
      maxlength="8"
      size="10"
    />
    <button onclick="ticket()">Click me</button>
  </body>

JavaScript:

function ticket() {
  let ticketp3 = document.querySelector("#specials p").innerHTML;
  let valueticket = document.getElementById("ticket2").value;
  ticketp3 = valueticket;
  parent.location = "third.html";
}

third.html

<div id="specials">
      <h1>thrid page</h1>
      <p></p> 
    </div>

CodePudding user response：

You could use local storage for this:

ticket():

...
localStorage.setItem('ticket', valueticket);
...

third.js:

window.onload = () => {
  const valueticket = localStorage.getItem('ticket')
}

CodePudding user response：

Sending a information to another tab can be really a problem because you call the id #specials before it even exists, the id does not exists yet, you have to call the page first. And i think you can't call another page and try to do it, i suggest you using local storage to store the information and use it before! Just use the following:

localStorage.setItem("inputvalue", put here the input value)

And to get the value on the other page use getItem :)

Edit: sorry for the bad english, i'm from Brazil