如何使用 javascript 在另一个网页上使用 document.getElementById() 显示用户输入？

Question

I am trying to record user input in listing.html in order to display it on my main page index.html . To do this, I am using a function I wrote, namely submitValue() with a nested function addListing() .

listing.html:

<h3>
Timer: <input id="myTimer">
<p>
Question: <input id="myQuestion"> 
<p>
Bounty: <input id="myBounty">
</h3>

<button onclick="submitValue()"> Submit </button> 
<script src="index.js"></script>

submitValue() is located in index.js (where I initially planned to write all of my javascript code).

function submitValue() {
    var t = document.getElementById("myTimer").value;
    var q  = document.getElementById("myQuestion").value;
    var b = document.getElementById("myBounty").value;
    location.href='index.html';
    addListing('#f38181', t, q, b);
}

The problem I have encountered is that the function document.getElementById() refers automatically to the main page (which in my case is index.html ). The divs "myTimer" , "myQuestion" , and "myBounty" are located on listing.html however. This is inconvenient for my purposes as, once again, I'm trying to display the user input (value) from these divs on index.html . I've read several forum posts that vaguely hinted at using AJAX and JQuery, as well as document.cookie . I'm open to trying any approach as long as it works. If you've made it through all this preamble, then my question is as follows: How do I solve this annoying problem?

Answer 1

The data you retrieve fro the listing.html does not persist if you call another page, in your case index.html . In order to achieve the result you have to persist the data you get from the fields.To persist the data either you can use a db from server or you can use local storage from browser.

In chrome you can try this.

 function submitValue() { var t = document.getElementById("myTimer").value; var q = document.getElementById("myQuestion").value; var b = document.getElementById("myBounty").value; localStorage.setItem("#f38181",JSON.stringify({ t, q, b})) location.href='index.html'; }

And in the index.html retrieve the data like this

 var listingdata = localStorage.getItem("#f38181"); var data = JSON.parse(listingdata); console.log(listingdata)