2010-11-13 109 views
44

這些與解決方案有任何區別嗎?Javascript獲取元素值

// HTML 
<input id="theId" value="test" onclick="doSomething(this.id, this.value)" /> 

// Javascript 
function doSomething(id, value){ 
    // ... 
} 

// HTML 
<input id="theId" value="test" onclick="doSomething(this.id)" /> 

// Javascript 
function doSomething(id){ 
    var value = document.getElementById(id).value; 
    // ... 
} 
+0

編輯:正如幾個人指出的,有一些錯別字(包括JavaScript中缺少函數名稱),但從概念上講,它們是相同的,任何一個都可以正常工作。 – Jeff 2010-11-13 16:15:07

回答

55

是的,最主要的是,我不認爲第二個就可以了(如果確實如此,不是很可移植)。第一個應該沒問題。

// HTML 
<input id="theId" value="test" onclick="doSomething(this)" /> 

// Javascript 
function(elem){ 
    var value = elem.value; 
    var id = elem.id; 
    ... 
} 

也應努力

+0

它也適用於元素數組。例如:'items [i] .id' – Taurib 2015-01-05 08:15:19

28

第二個功能應具備:

var value = document.getElementById(id).value; 

然後,他們基本上是相同的功能。

8

在第二個版本中,您傳遞的是從this.id返回的字符串。不是元素本身。

所以id.value不會給你你想要的。

您需要通過元件this

doSomething(this) 

則:

function(el){ 
    var value = el.value; 
    ... 
} 

注:在某些瀏覽器,第二個會,如果你做的工作:

window[id].value 

因爲元素ID是一個全球性的屬性,但這是不安全的

最簡單的方法是將元素與this一起傳遞,而不是使用ID再次獲取該元素。

2

傳遞對象:

doSomething(this) 

您可以從對象獲取的所有數據:

function(obj){ 
    var value = obj.value; 
    var id = obj.id; 
} 

或者通過id只:

doSomething(this.id) 

獲取對象和值後:

function(id){ 
    var value = document.getElementById(id).value; 
}