时间戳

首页 > 解决方案 > 如何使用 javascript 在另一个网页上使用 document.getElementById() 显示用户输入？

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

问题描述

我正在尝试记录用户输入listing.html以便在我的主页上显示它index.html。为此，我使用了我编写的函数，即submitValue()嵌套函数addListing()。

清单.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()位于index.js（我最初计划编写所有 javascript 代码的地方）。

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);
}

我遇到的问题是该功能document.getElementById()自动引用主页（在我的情况下是index.html）。然而， div "myTimer"、"myQuestion"和"myBounty"位于listing.html。这对我的目的来说很不方便，因为我再次尝试从这些 div 上显示用户输入（值）index.html。我已经阅读了几篇模糊暗示使用 AJAX 和 JQuery 以及document.cookie. 只要可行，我愿意尝试任何方法。如果你已经完成了所有这些序言，那么我的问题如下：我该如何解决这个烦人的问题？

标签： javascriptjqueryhtmlcookiesgetelementbyid

解决方案

如果您调用另一个页面（在您的情况下为index.html），您从 listing.html 检索的数据不会保留。为了获得结果，您必须保留从字段中获取的数据。要保留数据，您可以使用服务器中的数据库，也可以使用浏览器中的本地存储。

在 chrome 中你可以试试这个。

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';
}

并在 index.html 中像这样检索数据

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

推荐阅读