如何將一個JavaScript變量調用到另一個JavaScript文件

Question

我有一個HTMLForm，單擊將其轉發到新的HTML頁面時，每個HTML有兩個JS文件

我正在做並試圖實現的是：

• 在第一個HTML上，當我單擊search按鈕時，我將輸入字段的值存儲在不同變量中並選擇字段
• 我要達到的目的是在搜索新頁面時加載，我想在新JavaScript中使用該新變量
• 我也有兩個HTML文件

這是我的file1.html的代碼

<form id="formId" action="file2.html">
        <div class="container">
            <h4>Date:</h4>
            <input type="text" id="startdate" name="fromdate" width="276"
                placeholder="dd/mm/yyyy" required />
            <h4>Outlets:</h4>
            <select name="outlet" id="myselect">
                <option>ALL</option>
            </select>
            <div>
                <br>
                <button id="btn-search" class="btn btn-default" type="submit">
                    <i class="fa fa-search"></i>&nbsp;Search
                </button>
            </div>
        </div>
    </form>
<script type="text/javascript" src="JS/JavaScript1.js"></script>

• 在此HTML中，我有一個表單，其中包含一個日期字段和一個選擇字段
• 單擊提交按鈕時，我將date和Outlet的值存儲到我的JavaScript文件JavaScript1的變量中

**這是我的JavaScript1文件**

$(document).ready(function() {  
    $("#btn-search").click(function(){  
       var   currentlyClickedOutletform = $("#myselect").find(":selected")[0].textContent;
       var   currentlyClickedStartdateform= $("#startdate").val();                
          $.ajax({
                url : "LinkReportMain",
                method : "POST",
                data : {
                       Outletlink : currentlyClickedOutletform,  
                       Fromdatelink : currentlyClickedStartdateform,                            
                     },                          
            });

    });

});

我要在新的JavaScript文件JavaScript2中使用的兩個值是var currentlyClickedOutletform和var currentlyClickedStartdateform currentClickedStartdateform。

我的file2.html是

• 在這個文件中，我只是填充一個HTML表，所以我里面只有一個div標簽

<div id="tbl"></div> <script type="text/javascript" src="JS/JavaScript1.js"></script>
<script type="text/javascript" src="JS/JavaScript2.js"></script>

最后我的JavaScript2是

• 在這個文件中，我想使用第一個Javascript文件的值

 $(document).ready(function() { alert(currentlyClickedOutletform) $('.loader').show(); $('.overlay').show(); $.ajax({ url: "LinkReportMain", method: "GET", dataType: "json", contentType: "application/json; charset=utf-8", data: { fromdate: $("#startdate").val(), todate: $("#enddate").val(), outlet: $("#all").val() }, success: function(data) { let formatedData = formatData(data); renderTable(formatedData); $('.loader').hide(); $('.overlay').hide(); } }); }); 

注意要查看JavaScript2文件的代碼，請查看代碼片段不起作用，但是我的代碼未格式化，因此我將其放入代碼片段中

所以我想要實現的是在JavaScript2中使用JavaScript1的Variable

我做得對，但是這里沒有人可以指導他們，這將非常有幫助

Answer 1

沒有localStorage

首先設置搜索按鈕的type="button"或阻止e.preventDefault();提交表單e.preventDefault(); 點擊事件。

$("#btn-search").click(function(){
    e.preventDefault();
    // your other code

    //code to redirect to another html page
    var queryString = "?para1=" + currentlyClickedOutletform + "&para2=" + currentlyClickedStartdateform;
    window.location.href = "page2.html" + queryString;
})

對於其他頁面腳本：

var queryString = decodeURIComponent(window.location.search);
    queryString = queryString.substring(1);
    var oldParam = queryString.split("&");
    var param1 = oldParam[0];
    var param2 = oldParam[1];

現在您可以使用param1和param2 。

**本地存儲**：

在首頁存儲對象中：

localStorage.setItem("outletFrom",currentlyClickedOutletform);
localStorage.setItem("startDate",currentlyClickedStartdateform);

在第二頁中獲取數據：

var currentlyClickedOutletform = localStorage.getItem("outletFrom");
var currentlyClickedStartdateform= localStorage.getItem("startDate");