为什么这个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的..

什么的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];

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

答

getElementsByName会返回一个节点列表，但value和style是HTMLElementNodes的属性。你必须遍历列表来获取它们。

答

您正在设置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
attribute-equals selector ([name="value"])

我正在输入完全相同的代码（甚至是将“按钮”重命名为“按钮”）。 :) – 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名称匹配...

如果有多个按钮具有相同名称，则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")'); 
    }); 
});

为什么这个JavaScript代码不工作？

相关推荐