Question

我需要使用Javascript更改三个按钮的背景颜色。以下是代码：

@SerializedName("Name")
private String Name;

public String getName() {
        return Name;
    }
}

适用于第一个按钮（方框1）。

当我点击第二个和第三个按钮时，第一个按钮的背景颜色会改变。

但是我需要更改我点击的各个按钮的背景颜色。

任何人都可以帮我知道我哪里错了吗？

Answer 1

问题是您对所有按钮使用相同的id。请改用class。

此外，this是保留关键字，因为您使用它作为参数名称会导致错误。

function changeColor(elem) {
   elem.style.backgroundColor = "red";
}

<input type="button" class="btn" value="Box 1" onclick="changeColor(this)">
<input type="button" class="btn" value="Box 2" onclick="changeColor(this)">
<input type="button" class="btn" value="Box 3" onclick="changeColor(this)">

Answer 2

使用this作为变量名会导致Javascript错误，因为this是保留关键字。将this更改为下面代码段中的按钮变量（element）并将其传递给您的函数。

此外 - 永远不会为多个元素设置相同的ID！这会呈现为无效的HTML 文档。

这是一个有效的代码片段：

<input type="button" id="btn" value="Box 1" onclick="changeColor(this)">
<input type="button" id="btn" value="Box 2" onclick="changeColor(this)">
<input type="button" id="btn" value="Box 3" onclick="changeColor(this)">

<script>
    function changeColor(element) {
        element.style.backgroundColor = "red";
    }
</script>

Answer 3

将this替换为您想要的任何内容。因为this是表示上下文的关键字。这是window对象。

function changeColor(element) {
   element.style.backgroundColor = "red";
}

Answer 4

id在函数changeColor中也必须是唯一的，这作为参数可能不相关，您可以提供任何其他名称。在函数中，参数elem将表示触发click事件的上下文。来自它的id并改变它的风格

＆＃13;

function changeColor(elem) {
  this.document.getElementById(elem.id).style.backgroundColor = "red";
}

＆＃13;

<input type="button" id="btn1" value="Box 1" onclick="changeColor(this)">
<input type="button" id="btn2" value="Box 2" onclick="changeColor(this)">
<input type="button" id="btn3" value="Box 3" onclick="changeColor(this)">

＆＃13;

Answer 5

您的函数始终引用id btn (this)的元素，这三个输入都有。

如果您将function changeColor(id) { document.getElementById(id).style.backgroundColor = "red"; }传递给您的函数，则应该传递按钮的ID。

在您的函数中，您可以引用传入的id：

＆＃13;

onclick="changeColor('btn1')"

＆＃13;

然后，只需将您的onclick更改为更像function changeColor(id) { let btn = document.getElementById(id); btn.classList.add('red-button'); }。

的内容

您可能还需要考虑向元素添加类，而不是添加内联样式。这为您提供了更大的灵活性：

.classList {
  background-color: red;
}

然后只需添加一些CSS： public function getBooks() { $limit = 1; //SELECT loginUser.username, Library.nameOfBook FROM loginUser JOIN userBook JOIN Library ON userBook.user_id = loginUser.id AND userBook.book_id = Library.id WHERE loginUser.username="loay"; $query = "SELECT Library.nameOfBook FROM loginUser JOIN userBook JOIN Library ON userBook.user_id = loginUser.id AND userBook.book_id = Library.id WHERE loginUser.username=:username LIMIT $limit"; $statment = $this->db->prepare($query); $statment->execute([ ':username' => $this->username ]); $result = $statment->fetchAll(); echo "<table border='1'> <tr> <th>Books</th> </tr>"; foreach($result as $row){ echo "<tr>"; echo "<td>" . $row['nameOfBook'] . "</td>"; echo "</tr>"; } echo "</table>";

Answer 6

您应该将id更改为class，因为id必须是唯一的。

试试这样：

<input type="button" class="btn" value="Box 1" onclick="changeColor(this)">
<input type="button" class="btn" value="Box 2" onclick="changeColor(this)">
<input type="button" class="btn" value="Box 3" onclick="changeColor(this)">

<script>
    function changeColor(this) {
        element.style.backgroundColor = "red";
    }
</script>

Answer 7

这是一个包含2个不同解决方案的工作代码段，您想要实现的解决方案，以及更好的解决方案，我建议您不要使用内联Javascript：
（见我的代码中的评论）

function changeColor(elm) { // "this" is reserved keyword, changed to "elm"
  elm.style.backgroundColor = "red"; // No need for getElement here, we already have it, it's "elm"
}


// Better solution: for no use of inline JS, do the following :
var btns = document.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener('click', function() {
    this.style.backgroundColor = "red";
  });
}

<!-- I guess this one is waht you wanted to achieve -->
<input type="button" value="Box 1" onclick="changeColor(this)">
<!-- Changed id to class for the 2 next, to make it work without inline JS -->
<input type="button" class="btn" value="Box 2">
<input type="button" class="btn" value="Box 3">

希望它有所帮助。

将Css应用于Javascript中的当前按钮单击

7 个答案: