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：

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")');
    });
});

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

5 个答案: