向外部javascript文件添加多个函数

我正在用多个按钮向基本HTML页面添加javascript功能。当我在外部JS文件中包含一个函数时，代码可以工作，但当我尝试添加另一个按钮功能时，代码就会停止工作

如何解决此问题

HTML:

按按钮更改框

成长
蓝色
褪色
重置

此处的语法不正确：

document.getElementById("box").style.background-color = "blue";

-

是减法运算符，不能用作属性文字的一部分。样式属性是通过将CSS名称转换为camelCase来创建的，因此应为：

document.getElementById("box").style.backgroundColor = "blue";

---

此处的语法不正确：

document.getElementById("box").style.background-color = "blue";

-

是减法运算符，不能用作属性文字的一部分。样式属性是通过将CSS名称转换为camelCase来创建的，因此应为：

document.getElementById("box").style.backgroundColor = "blue";

---

您也可以使用简单的

background

document.getElementById("box").style.background = "blue";

---

您也可以使用简单的

background

document.getElementById("box").style.background = "blue";

---

由于您也标记了

JQuery

，下面是JQuery版本。在JQuery中，可以使用

css（）

添加/更改多个css属性：

$（“#按钮1”）。在（'click'，function（）上{
$（“#框”）.css({
“高度”：“500px”
});
})
$（“#按钮2”）。在（'单击'，函数（）上{
$（“#框”）.css({
“背景色”：“蓝色”
});
})

跳转到JavaScript
按下按钮以更改框

成长
蓝色
褪色
重置

因为您也标记了

JQuery

，下面是JQuery版本。在JQuery中，可以使用

css（）

添加/更改多个css属性：

$（“#按钮1”）。在（'click'，function（）上{
$（“#框”）.css({
“高度”：“500px”
});
})
$（“#按钮2”）。在（'单击'，函数（）上{
$（“#框”）.css({
“背景色”：“蓝色”
});
})

跳转到JavaScript
按下按钮以更改框

成长
蓝色
褪色
重置

如果您需要JQuery答案，这里也有一个

$('button').click(function() {
    var $box = $('#box');
    if($(this).attr('id') == 'button1')
    {
        $box.css('height','500px');
    }
    else if ($(this).attr('id') == 'button2')
    {
        $box.css('background-color', 'blue');
    }
});

---

如果您想要一个JQuery答案，这里也有一个

$('button').click(function() {
    var $box = $('#box');
    if($(this).attr('id') == 'button1')
    {
        $box.css('height','500px');
    }
    else if ($(this).attr('id') == 'button2')
    {
        $box.css('background-color', 'blue');
    }
});

---

你有没有费心打开Javascript控制台？它会告诉您错误在哪里。您是否费心打开Javascript控制台？它会告诉你错误在哪里。