Question

我无法通过简单的功能更改按钮的颜色，颜色根本没有变化。

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

     <script language="JavaScript">

        function changeColor(){
             document.getElementsByTagName('button').style.backgroundColor="green";
        }

     </script>

    </head>

    <body >

        <form action="/action_page.php" method="get" name="form1">
            <input type="text" id="campoDeFlores">
            <button type="button" onclick="changeColor()" name="1">1</button>
            <button type="button"  name="2">2</button>
            <button type="button"  name="3">3</button>
        </form>
    </body>
</html>

知道它为什么不起作用？

Answer 1

document.getElementsByTagName返回元素列表而不是单个元素。您需要将其转换为Array.from的数组，然后使用Array.map

遍历按钮

function changeColor(){
    Array.from(document.querySelectorAll('button')).map(function(button) {
               button.style.backgroundColor="green";
    })
}

Answer 2

试试这个：

HTML

<form action="/action_page.php" method="get" name="form1">
  <input type="text" id="campoDeFlores">
  <button type="button" onclick="changeColor(this)" name="1">1</button>
  <button type="button" name="2">2</button>
  <button type="button" name="3">3</button>
</form>

JS

function changeColor(btn) {
  btn.style.backgroundColor = "green";
}

Check this Fiddle

解释

起初我以为你试图改变所有按钮的颜色，因为你正在使用getElementsByTagName，但看起来你只想改变按下的按钮的颜色。在这种情况下，您不需要使用数组。只需将单击的元素传递给函数，然后更改该特定按钮的颜色。

Answer 3

最好使用id="myButton"和document.getElementById('myButton')专门选择一个按钮，而不是每个 button。

Answer 4

进行以下更改：

允许您的changeColor函数接受HTMLElement 参数。
将对按钮的引用传递给changeColor()。更改 onclick="changeColor()"元素中的button onclick="changeColor(this)"

function changeColor (htmlEl) {
  htmlEl.style.backgroundColor="green";
}

<form action="/action_page.php" method="get" name="form1">
    <input type="text" id="campoDeFlores">
    <button type="button" onclick="changeColor(this)" name="1">1</button>
    <button type="button"  name="2">2</button>
    <button type="button"  name="3">3</button>
</form>

用javascript更改按钮的颜色

4 个答案:

HTML

JS

解释