爲什麼這個JavaScript代碼不工作？

你知道這是爲什麼失敗，我的意思是警告是工作（它讓我發現，如果找到該按鈕後），但文本或背景沒有改變：爲什麼這個JavaScript代碼不工作？

$('input[type=button]').click(function() { 

    var button=document.getElementsByName("contactme"); 
    alert(button.length + " elements!"); 
    button.value="New Button Text"; 
    button.style.backgroundImage="url(some_real_gif);" 
});

HTML：

<input type="button" name="contactme" value="test"/>

謝謝...

我必須使用純Java腳本不是jQuery的..

來源

2011-05-20 Cristian Boariu

什麼的HTML是什麼樣子？ – tvanfosson 2011-05-20 20:42:59

不應該是'button [0]'？ – 2011-05-20 20:44:46

*「我必須使用純java腳本而不是jQuery ..」*那麼爲什麼在你的問題中有jQuery代碼？ – user113716 2011-05-20 20:48:39

它看起來像var button=document.getElementsByName("contactme");會返回一個元素數組。嘗試：

var button=document.getElementsByName("contactme")[0];

來源

2011-05-20 20:45:26

事實上，[NodeList]（https://developer.mozilla.org/en/document.getElementsByName），但是，是的，這是問題所在。 – lonesomeday 2011-05-20 20:48:53

getElementsByName會返回一個節點列表，但value和style是HTMLElementNodes的屬性。你必須遍歷列表來獲取它們。

來源

2011-05-20 20:44:00 Quentin

您正在設置NodeList的value和style。 getElementsByName可以檢索多個元素，因爲name屬性在文檔中不必是唯一的（名稱中的線索）。設置這些元素沒有任何影響 - 它不會影響NodeList中元素的屬性。

要麼循環通過元件（多個）手動（使用for環）或完全地使用jQuery：

$('input[type=button]').click(function() { 
    var buttons = $('input[name="contactme"]'); 
    alert(buttons.length + " elements!"); 
    buttons.val("New Button Text"); 
    buttons.css({backgroundImage: "url(some_real_gif)"}); 
});

見jQuery API：

來源

2011-05-20 20:45:10 lonesomeday

我正在輸入完全相同的代碼（甚至是將「按鈕」重命名爲「按鈕」）。 :) – cHao 2011-05-20 20:46:49

@cHao這是一個非常熟悉的感覺... – lonesomeday 2011-05-20 20:48:20

請確保在屬性過濾器之前添加標記名稱或其他選擇器，以避免您爲煉獄痛苦添加日子。 ; o）'$（'input [name =「contactme」]'）;' – user113716 2011-05-20 20:49:58

$('input[type=button]').click(function() { 
    $("#contactme").val('New Button Text').css('background-image', 'url(some_real_gif)'); 
});

您將需要確保按鈕ID名稱匹配...

來源

2011-05-20 20:46:13 ShaneBlake

如果有多個按鈕具有相同名稱，則ID不能匹配（至少在您需要有效的HTML時不會）。 – cHao 2011-05-20 20:48:10

是的，但爲什麼你想要有多個同名的按鈕？ – ShaneBlake 2011-05-20 21:11:44

由於服務器端代碼基於哪個按鈕被點擊而執行一些操作，並且打開「button_name」的值比檢查「this_button_name」或「that_button_name」是否提供了值更簡單。不一定是說這就是發生了什麼，但是代碼正在吐出它找到的多少按鈕，這看起來好像可能有多個按鈕。 – cHao 2011-05-20 21:17:07

因爲按鈕元素（即使它是一個列表）

名單

你可以做的是使用button[0].value和button[0].style.background

或者使用jQuery的解決方案：

如果只改變點擊按鈕：

$('input[type=button]').click(function() 
{ 
    $(this).val("New Button Text"); 
    $(this).css('background-image','url("some_real_gif")'); 
});

要更改所有按鈕：

$('input[type=button]').click(function() 
{ 
    $('input[type=button]').each(function(){ 
     $(this).val("New Button Text"); 
     $(this).css('background-image','url("some_real_gif")'); 
    }); 
});

來源

2011-05-20 20:48:12 Andre

爲什麼這個JavaScript代碼不工作？

回答

相關問題