为什么这段 JavaScript 代码不起作用？

Question

你知道为什么失败吗，我的意思是警报正在工作（它向我显示，如果找到按钮），但文本或背景没有更改：

    $('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..

Answer 1

您正在设置 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：

• val
• css
• 属性等于选择器 ( [名称=“值”]）

Answer 2

看起来 var button=document.getElementsByName("contactme"); 将返回一个元素数组。尝试：

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

Answer 3

getElementsByName 将返回一个 nodeList，但 value 和 style 是 HTMLElementNodes 的属性。您必须遍历列表才能获取它们。

Answer 4

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

您需要确保按钮 ID 与名称匹配...

Answer 5

因为按钮是一个元素列表（即使它是一个元素的列表），

您可以做的是使用 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")');
    });
});