將先前定義的變量傳遞到Javascript函數

我在使用onFocus HTML事件將參數傳遞給Javascript函數時出現問題。我想要一種將先前定義的變量傳遞給函數的方法。我的JavaScript代碼目前的樣子：將先前定義的變量傳遞到Javascript函數

<script type="text/javascript"> 
    var field1 = "Field 1 is selected"; 
    var field2 = "Field 2 is selected"; 

    function fieldSelect(field) { 
     var message = field; 
     document.getElementById("explain").innerHTML = message.toString(); 
    } 

</script>

隨着HTML看起來像：

... 
<input type="text" id="field1" onFocus="fieldSelect(field1)"> 
<input type="text" id="field2" onFocus="fieldSelect(field2)"> 
... 
<p id="explain"></p>

所以，當你點擊一個字段中的字符串變量傳遞給函數和段落標記顯示該字段根據表格選擇。

來源

2016-02-28 J Morgan

它應該工作，什麼是錯的？你能看到控制檯中的任何錯誤嗎？ – madox2

我在瀏覽器中運行它，並修改後，我設法讓它輸出「[object HTMLInputElement]」，但不是字符串。 –

你的代碼工作正常。檢查這個演示。 [JSFiddle]（https://jsfiddle.net/w7qch3av/）我認爲你錯過了一些東西。 – akinuri

即使達山提供您一個解決辦法，你的問題是別的東西。在此page

你的HTML結構是這樣的：

<html> 
<head> 
    <script type="text/javascript"> 
    var field1 = "Field 1 is selected"; 
    var field2 = "Field 2 is selected"; 

    function fieldSelect(field) { 
     var message = field; 
     document.getElementById("explain").innerHTML = message.toString(); 
    } 
    </script> 
<head> 
<body> 
    <form> 
     <input type="text" id="field1" onFocus="fieldSelect(field1)"> 
     <input type="text" id="field2" onFocus="fieldSelect(field2)"> 
    </form> 
    <p id="explain"></p> 
</body>

現在，你的腳本標籤被放置在head和你創建的名字field1和field2兩個變量。

之後，在body中，您將創建兩個輸入元素，其ID爲field1和field2。瀏覽器使用ID自動創建變量，這些變量引用具有該ID的元素。在head，設置field1到"Field 1 is selected"但一旦你用id field1在body創建的輸入元素的field1值被覆蓋和field1指輸入元素。

這就是爲什麼，在你的fieldSelect功能，您嘗試打印字符串"Field 1 is selected"但是你最終可以打印輸入元素[object HTMLInputElement]

你可以做的就是將你的腳本標籤中，並在身體的末端元素，或者如果腳本標記必須留在頭部，則應該爲輸入元素或變量指定不同的名稱。

來源

2016-02-28 21:53:27 akinuri

這是以一種更清潔的方式解決它。我沒有意識到，html id是使用變量名存儲的。乾杯! –

使用bind（）來創建一個具有預先指定的初始參數的函數。

var field1 = "Field 1 is selected"; 
    var field2 = "Field 2 is selected"; 

    function fieldSelect(field) { 
     var message = field; 
     document.getElementById("explain").innerHTML = message.toString(); 
    } 

var callback1 = fieldSelect.bind(undefined, field1); 
var callback2 = fieldSelect.bind(undefined, field2); 


<input type="text" id="field1" onFocus="callback1()"> 
<input type="text" id="field2" onFocus="callback2()">

來源

2016-02-28 21:31:20 Darshan

已修復！非常感謝:) –

看來，當事件觸發時，引用該元素創建與元素ID相同的變量。它隱藏了以前定義的同名全局變量。您仍然可以訪問全局變量從窗口範圍如下：

<input type="text" id="field1" onFocus="fieldSelect(window.field1)"> 
<input type="text" id="field2" onFocus="fieldSelect(window.field2)">

來源

2016-02-28 21:52:11 madox2

將先前定義的變量傳遞到Javascript函數

回答

相關問題