我想用javascript制作喜欢和不喜欢按钮。我正在尝试使切换功能，当点击按钮时，大拇指向上的颜色变成深蓝色，如果点击大拇指向下的颜色变成暗红色。但它似乎不起作用，颜色没有固定。而且我想点赞，用户只得到1次机会投票，喜欢或不喜欢。
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa-thumbs-up:hover{
color:darkblue;
}
.fa-up{
color:darkblue;
}
.fa-thumbs-up:before{
display: flex;
margin-left: 4px;
margin-bottom: 3px;
}
.fa-thumbs-down:hover{
color:darkred;
}
.fa-thumbs-down:before {
display: flex;
margin-left: 4px;
}
</style>
<button name="button1" type="button1" style="font-size:10px">0   | <i onclick ="myFunction()" id = "btn" class="fa fa-thumbs-up"></i></button>
<button name="button2" type="button2" style="font-size:10px">0   | <i onclick ="myFunction2()" class="fa fa-thumbs-down"></i></button>
<script>
var btn = document.getElemetById('btn');
function myFunction(){
if(btn.classList.contains("fa")){
btn.classList.remove("fa");
btn.classList.add("fa-up");
}else{
btn.classList.remove("fa-up");
btn.classList.add("fa");
}
}
</script>
</body> </html>
感谢所有的帮助。非常感谢。
更新您的代码以实现您想要的工作：
<!DOCTYPE html><html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
button i{
transition: .3s all ease;
}
.btn_up.clicked,.btn_up:hover i{
color: darkblue;
}
.btn_down.clicked,.btn_down:hover i{
color: darkred;
}
.fa-thumbs-up:before{
display: flex;
margin-left: 4px;
margin-bottom: 3px;
}
.fa-thumbs-down:before {
display: flex;
margin-left: 4px;
}
</style>
<button class="btn_up" onclick ="myFunction(this)" name="button1" type="button1" style="font-size:10px">0   | <i class="fa fa-thumbs-up"></i></button>
<button class="btn_down" onclick ="myFunction(this)" name="button2" type="button2" style="font-size:10px">0   | <i class="fa fa-thumbs-down"></i></button>
<script>
var btn_up = document.querySelector('.btn_up');
var btn_down = document.querySelector('.btn_down');
function myFunction(elem){
elem.classList.toggle('clicked');
if(elem === btn_up){
btn_down.classList.remove('clicked');
}else{
btn_up.classList.remove('clicked');
}
}
</script>
</body> </html>