Verwenden von Variablen aus der gleichen JS-Datei in 2 HTML-Dateien mit JQuery

Ich versuche, meine Variable, die ich gespeichert habe, auf einer Tabelle anzuzeigen, die ich auf einer anderen Seite erstellt habe. Ich erhalte die Informationen vom Benutzer aus einem Formular und klicke auf eine Schaltfläche, die angeklickt wird, um die Werte in Variablen zu speichern. Mein Problem ist, dass ich den inneren HTML-Code auf der anderen Seite mit der von mir gespeicherten Variablen nicht ändern kann. Ich verwende 1 js-Datei und 2 html-Dateien. Ich kann nur js/jquery, html und css verwenden. hier ist mein Code:Verwenden von Variablen aus der gleichen JS-Datei in 2 HTML-Dateien mit 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); 
});

});

Quelle

2016-12-16 Azotherian

Sind die Seiten gleichzeitig geöffnet? – Jersh

JavaScript hat standardmäßig keinen Set-Status, daher sind auf einer Seite gesetzte Variablen auf einer anderen Seite nicht verfügbar, es sei denn, sie werden über GET- oder POST-Variablen, localStorage oder beides auf diese Seite übertragen Seiten öffnen sich gleichzeitig im selben Browser (oder laden die zweite Seite über iframe oder ajax). – junkfoodjunkie

Ihre beste Lösung hier ist mit localStorage – jt25

Lokaler Speicher ist Ihre beste Wahl.

// 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

Quelle

2016-12-16 03:20:39 Jersh

Nachdem ich es angesehen habe, bin ich nicht sicher, wie man es wirklich benutzt, und c9 sagt, dass localStorage ist undefined – Azotherian

Hmm .. Ich versuchte den Code in einer jfiddle, es funktioniert gut. Überprüfen Sie Ihre Browserkompatibilität? Wie sieht dein Code aus? – Jersh

Verwenden von Variablen aus der gleichen JS-Datei in 2 HTML-Dateien mit JQuery

Antwort

Verwandte Themen