Question

我的HTML文件：

<!DOCTYPE html>
<html>
<head>
    <title>Wolf and Rabbit Game</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="wolf&rabbit_game.css">
    <script src="wolf&rabbit_game.js"></script>
</head>
<body>
<table>
    <tr>
        <td id="tableCell"></td>
    </tr>
</table>
<input id="button1" type="button" value="I'm red" onclick="setColorRed">
<input id="button2" type="button" value="I'm green" onclick="setColorGreen">
</body>
</html>

我的CSS文件： 表{ text-align：center; 保证金：自动; }

td{
    border: 1px black solid;
    width: 25px;
    height: 25px;
}

#button1,#button2{
    text-align: center;
    margin-top: 20px;
    font-size: 1em;
    font-family: Myriad Pro;
    font-weight: semibold;
    color: white;
    border-radius: 15px;
    padding: 1%;
}

#button1{
    background: red;
}

#button2{
    background: green;
}

body{
    text-align: center;
}

img{
    width: 25px;
    height: auto;
}

我的JavaScript文件：

function setColor(){
  if ("#button1").click {
    document.getElementById("#tableCell").style.backgroundColor="red";
  };
  if ("#button2").click {
    document.getElementById("#tableCell").style.backgroundColor="green";
  };
};

Answer 1

检查这个JS小提琴

JsFiddle link

不需要在两个不同的按钮上调用两种不同的方法，一种接受颜色参数的方法和更改所需元素的颜色就足够了。

您必须像这样修改代码，并确保在按钮标记之前出现javascript代码。

<script>
function setColor(color){  
    document.getElementById("tableCell").style.backgroundColor=color;
};
</script>

<table>
    <tr>
        <td id="tableCell">test</td>
    </tr>
</table>
<input id="button1" type="button" value="I'm red" onclick="setColor('red')">
<input id="button2" type="button" value="I'm green" onclick="setColor('green')">

如何使用两个不同颜色的按钮更改表格单元格（td）的背景颜色？

1 个答案: