使用2個html文件中的js文件中的變量與jQuery

我試圖讓我的變量保存在顯示在另一個頁面上創建的表上。我從窗體中獲取用戶的信息，並且有一個單擊的按鈕並將其保存到變量中。我的問題是，我不能用我保存的變量更改另一頁上的內部html。我正在使用1個js文件和2個html文件。我只能使用js/jquery，html和css。這裏是我的代碼：使用2個html文件中的js文件中的變量與jQuery

loanpage.html

<!DOCTYPE html> 
<html lang="en-us"> 
<head> 
    <meta charset="utf-8"> 
    <title>Super Awesome Loan Guys</title> 
    <link rel="stylesheet" type="text/css" href="loanpage.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script type="text/javascript" src="loanpage.js"></script> 
</head> 
<body> 
    <div class="bg" id="text-center"> 
     <div class="companytitle"><span class="dollar">$</span>uper Awe<span class="dollar">$</span>ome Loan Guy<span class="dollar">$</span></div> 
     <div> 
      <form action="infopage.html"> 
       <h4>Loan Amount:</h4> 
       <input type="text" id="loanamount" name="loanamount"><br> 
       <input type="radio" id="12month" name="time">12 Months 
       <input type="radio" id="18month" name="time">18 Months 
       <input type="radio" id="24month" name="time">24 Months 
       <h4>Name:</h4><input id="namefield" type="text" name="firstlastname"> 
       <h4>Phone:</h4><input id="phonefield" type="text" name="phonennumber"> 
       <h4>Email:</h4><input id="emailfield" type="text" name="email"> 
       <h4>Zip Code:</h4><input id="zipfield" type="text" name="zipcode"><br> 
      </form> 
      <a href="infopage.html"><button type="button">Submit</button></a> 
     </div> 
    </div> 
</body> 
</html>

infopage.html

<!DOCTYPE html> 
<html lang="en-us"> 
<head> 
    <meta charset="utf-8"> 
    <title>Super Awesome Loan Guys Loan Information</title> 
    <link rel="stylesheet" type="text/css" href="loanpage.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script type="text/javascript" src="loanpage.js"></script> 
</head> 

<body> 
    <div class="bg" id="text-center"> 
     <h1>Here is the info you submitted!</h1> 
     <table> 
      <tr> 
       <th>Name</th> 
       <th>Phone Number</th> 
       <th>Email Address</th> 
       <th>Zip Code</th> 
       <th>Loan Amount</th> 
       <th>Loan Duration</th> 
       <th>Interest</th> 
      </tr> 
      <tr> 
       <td id="displayName">1</td> 
       <td id="displayPhone">1</td> 
       <td id="displayEmail">1</td> 
       <td id="displayZip">1</td> 
       <td id="displayAmount">1</td> 
       <td id="displayDuration">1</td> 
       <td id="displayInterest">1</td> 
      </tr> 
     </table> 
    </div> 
</body> 
</html>

loanpage.js

//js code 
var name = ""; 
var phone=""; 
var email=""; 
var zip=""; 
var loan=0; 
var loanrate=12.0; 
var loanlen=0; 
//Jquery code 
$(document).ready(function(){ 
    $("#submitbutton").click(function(){ 
     loan = parseFloat($("#loanamount").val()); 
    if ($("#12month").is(':checked')){ 
     loanlen = 12; 
    } 
    else if ($("#18month").is(':checked')){ 
     loanlen = 18; 
    } 
    else if ($("#24month").is(':checked')){ 
     loanlen = 24; 
    } 
    name = $("#namefield").val(); 
    phone = $("#phonefield").val(); 
    email = $("#emailfield").val(); 
    zip = $("#zipfield").val(); 
    document.getElementById("displayName").innerHTML(name); 
    document.getElementById("displayPhone").innerHTML(phone); 
    document.getElementById("displayEmail").innerHTML(email); 
    document.getElementById("displayZip").innerHTML(zip); 
    document.getElementById("displayAmount").innerHTML(loan); 
    document.getElementById("displayDuration").innerHTML(loanlen); 
    document.getElementById("displayInterest").innerHTML(loanrate); 
});

}）;

來源

2016-12-16 Azotherian

是我們的網頁同時打開？ – Jersh

默認情況下，Javascript沒有設置狀態，所以在另一個頁面上設置的變量將不能在另一個頁面中使用，除非它們通過GET或POST變量，localStorage或通過同時存在頁面在同一瀏覽器中同時打開（或通過iframe或ajax加載第二頁）。 – junkfoodjunkie

你最好的解決方案是使用localStorage – jt25

本地存儲是您最好的選擇。

// Save data to the current local store 
localStorage.setItem("username", "John"); 

// Access some stored data 
alert("username = " + localStorage.getItem("username"));

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

來源

2016-12-16 03:20:39 Jersh

看了之後，我不知道如何真正使用它，並且c9說localStorage是undefined – Azotherian

嗯..我在jsfiddle中嘗試了代碼，它工作正常。檢查您的瀏覽器兼容性另外，你的代碼是什麼樣的？ – Jersh

使用2個html文件中的js文件中的變量與jQuery

回答

相關問題