javascript - 用按钮改变颜色

Question

我正在尝试更改程序中侧边栏的颜色。我正在尝试仅使用 JavaScript 来完成此操作，请不要使用 JQuery。

这是我的侧边栏的 html:

    <div class = "sidebar">
        <div class = "receipt">
            <table id = "sideTable">
                <tr class = "sideTR">
                    <th id = "sideTH" class = "h22">RECEIPT</th>
                </tr>   
                <tr class = "sideTR">
                    <td class = "sideTD">
                    <div class = "submit">
                        <input type = "button" onclick = "changeColour()" value = "Change Colour">
                    </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

我的程序中的其他所有内容都运行良好，但是当我放入颜色更改函数时，我的函数不再起作用。我觉得答案会很明显，但我仍在学习。任何帮助将不胜感激!

Answer 1

这一行:

var sideReceipt = document.getElementById("receipt");

...正在查找 id 不存在的元素。您的元素的类为“receipt”。

然后是下面一行:

sideReceipt.style.borderColor = "#ee4c11";

...将给出错误TypeError: Cannot read property 'style' of null.

The fix就是将该 div 更改为具有 id="receipt"。

(我无法解释为什么在添加该函数后，您的函数都不起作用，因为它实际上并不包含任何语法错误，所以它只会给出一个错误当您实际单击调用它的按钮时。)