從Javascript文件中檢索變量

我的問題是如何在兩個不同的JavaScript文件之間共享變量。我正在創建一個表單，將值傳遞給另一個頁面，以提醒該變量。我有2個html文件（index.html和form.html）以及2個javascript文件（form.js和index.js）。所以基本上我想分享變量theNick從form.js到index.js以使用alert（）顯示它。如果這是不可能的，是否有另一種方法來做到這一點？從Javascript文件中檢索變量

form.html：

<input type="text" id="Nick" placeholder="Nickname"> 
<a id="btn" onclick="submit()" href="index.html.">Submit</a>

form.js：

function submit(){ 
    var theNick = document.getElementById("Nick").value; //retrieves theNick from your input 
    ??? 

}

的index.html：

<button onclick="callNick()">Click Me to view your Nickname.</button>

index.js：

function callNick(){ 
    ??????? 
    alert(theNick); //I want to get access to this variable from form.js 
}

來源

2015-09-27 B. Camp

它是那種可能。

首先，您需要確定您的HTML加載了兩個JavaScript文件。他們之間沒有真正的導入方法，所以HTML必須加載這兩個腳本。其次，你需要修改你的函數submit來使用全局變量。全局變量最初是在函數範圍之外定義的。函數callNick已經在尋找一個全局變量。

但是，submit函數正在定義自己的局部變量，因爲在函數範圍內使用了關鍵字var。改變它如下：

// Set global variable 
var theNick; 

function submit(){ 
     // Use global variable 
     theNick = document.getElementById("Nick").value; //retrieves theNick from your input 
     ??? 

}

請參閱這篇文章的進一步信息。 http://www.w3schools.com/js/js_scope.asp

來源

2015-09-27 12:31:30

我已經嘗試了所有的步驟。看起來callNick正在識別Nick，但它會提醒'未定義'而不是'Bob'。它知道它存在，但不知道尼克的價值。如果我將全局範圍內的Nick設置爲'Bob'，它將起作用，但它在提交時發生更改時無法識別。想法？ –

你必須運行'submit（）'函數。它必須在包含「Nick」元素的HTML加載後運行。通常將所有JavaScript文件作爲html 標記的最後一部分。 –

通過使用var keyword你完全相反。如果你想分享一些東西，最簡單的事情就是將變量綁定到window object，如下所示：window.theNick = ...並使用它，如alert(window.theNick)。

來源

2015-09-27 12:28:00

我剛剛嘗試過，但不是說'鮑勃'作爲尼克它說'未定義'。任何理由爲什麼發生這種情況？ –

這取決於每個函數被調用的時間 –

你可以只聲明函數

var theNick; // you could omit this entirely since it will be declared in 
      // global scope implicitly when you try to assign it in the function 
function submit(){ 
    theNick = document.getElementById("Nick").value; //retrieves theNick from your input 
}

JavaScript不關心哪些文件聲明提出，但在範圍之外的變量。

通過將變量放置在全局範圍內，您將能夠隨處訪問它。

全局變量是不是最好的編碼策略，但是這會幫助你的理念

來源

2015-09-27 12:29:42 andrew

你可以通過你的變量到URL，使用?yourVar= GET標誌：

form.js

function submit(e){ 
    var theNick = document.getElementById("Nick").value; //retrieves theNick 
    e.target.href+='?n='+theNick; // set the href of your anchor with your variable 
}

形式。HTML

<input type="text" id="Nick" placeholder="Nickname"> 
<!-- We pass the event object into our function as a parameter --> 
<a id="btn" onclick="submit(event)" href="index.html">Submit</a>

index.js

function callNick(){ 
    // get the variable from the current location 
    var theNick = window.location.href.split('?n=')[1]; 
    alert(theNick); 
}

的index.html

<button onclick="callNick()">Click Me to view your Nickname.</button>

▶︎ Plunker_{其中「形式」已經更改爲「指數」和「指標」導致」。}

注：
要傳遞多個變量，你可以使用&分隔符，然後使用window.location.search財產作爲this CSS-tricks article完成。
▶︎ Multiple vars plunker

來源

2015-09-27 13:00:57 Kaiido

好像你需要將變量存儲在窗口對象的本地存儲對象，這樣你可以設置在第一頁上的價值和檢索它在第二。

頁1

window.localStorage.setItem("yourVariable", "yourValue");

頁2

var myVar = localStorage.getItem("yourVariable");

只有一個 '警告'：這是一個HTML5特性，所以它帶有侷限性，檢查此link獲取更多信息。

來源

2015-09-27 13:32:06 Dave

從Javascript文件中檢索變量

回答

相關問題