# JavaScript 星星打分(完成)
###### tags: `JavaScript`
```
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>03eventHandlerMouseoverout.html</title>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("idimg").addEventListener("mouseover",mouseover); //事件繫結，滑鼠滑入
document.getElementById("idim").addEventListener("mouseover",mouseover1); //事件繫結，滑鼠滑入
document.getElementById("idi").addEventListener("mouseover",mouseover2); //事件繫結，滑鼠滑入
document.getElementById("id").addEventListener("mouseover",mouseover3); //事件繫結，滑鼠滑入
document.getElementById("i").addEventListener("mouseover",mouseover4); //事件繫結，滑鼠滑入
document.getElementById("idimg").addEventListener("mouseout",mouseout);
document.getElementById("idim").addEventListener("mouseout",mouseout1);
document.getElementById("idi").addEventListener("mouseout",mouseout2);
document.getElementById("id").addEventListener("mouseout",mouseout3);
document.getElementById("i").addEventListener("mouseout",mouseout4); //事件繫結，滑鼠滑出
});
function mouseover() {
document.getElementById("idimg").src="chngstar.gif"
document.getElementById("p1").innerHTML="打分中...1"}
function mouseover1() {
document.getElementById("idimg").src="chngstar.gif"
document.getElementById("idim").src="chngstar.gif"
document.getElementById("p1").innerHTML="打分中...2"}
function mouseover2() {
document.getElementById("idimg").src="chngstar.gif"
document.getElementById("idim").src="chngstar.gif"
document.getElementById("idi").src="chngstar.gif"
document.getElementById("p1").innerHTML="打分中...3"}
function mouseover3() {
document.getElementById("idimg").src="chngstar.gif"
document.getElementById("idim").src="chngstar.gif"
document.getElementById("idi").src="chngstar.gif"
document.getElementById("id").src="chngstar.gif"
document.getElementById("p1").innerHTML="打分中...4"}
function mouseover4() {
document.getElementById("idimg").src="chngstar.gif"
document.getElementById("idim").src="chngstar.gif"
document.getElementById("idi").src="chngstar.gif"
document.getElementById("id").src="chngstar.gif"
document.getElementById("i").src="chngstar.gif"
document.getElementById("p1").innerHTML="打分中...5"}
function mouseout() {
document.getElementById("idimg").src="star.gif"
document.getElementById("p1").innerHTML=""}
function mouseout1() {
document.getElementById("idimg").src="star.gif"
document.getElementById("idim").src="star.gif"
document.getElementById("p1").innerHTML=""}
function mouseout2() {
document.getElementById("idimg").src="star.gif"
document.getElementById("idim").src="star.gif"
document.getElementById("idi").src="star.gif"
document.getElementById("p1").innerHTML=""}
function mouseout3() {
document.getElementById("idimg").src="star.gif"
document.getElementById("idim").src="star.gif"
document.getElementById("idi").src="star.gif"
document.getElementById("id").src="star.gif"
document.getElementById("p1").innerHTML=""}
function mouseout4() {
document.getElementById("idimg").src="star.gif"
document.getElementById("idim").src="star.gif"
document.getElementById("idi").src="star.gif"
document.getElementById("id").src="star.gif"
document.getElementById("i").src="star.gif"
document.getElementById("p1").innerHTML=""}
function mouseonclick(){
let g=document.getElementById("p1")
g.innerHTML="你給了一顆星" }
function mouseonclick1(){
let g=document.getElementById("p1")
g.innerHTML="你給了二顆星" }
function mouseonclick2(){
let g=document.getElementById("p1")
g.innerHTML="你給了三顆星" }
function mouseonclick3(){
let g=document.getElementById("p1")
g.innerHTML="你給了四顆星" }
function mouseonclick4(){
let g=document.getElementById("p1")
g.innerHTML="你給了五顆星" }
</script>
</head>
<body>
<img id="idimg" src="star.gif" onclick="mouseonclick()" />
<img id="idim" src="star.gif" onclick="mouseonclick1()"/>
<img id="idi" src="star.gif" onclick="mouseonclick2()"/>
<img id="id" src="star.gif" onclick="mouseonclick3()"/>
<img id="i" src="star.gif" onclick="mouseonclick4()"/>
<p id="p1"></p>
</body>
</html>
```
## 幫你整理乾淨一點XD
```
<!DOCTYPE html>
<html lang="UTF-8">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>homework3</title>
</head>
<script>
function mouseOver(star) {
for(let i = 1 ; i <= parseInt(star) ; i ++){
document.getElementById(i).innerHTML = "★";
document.getElementById("message").innerHTML = "打分中..." + i;
}
document.getElementById("result").innerHTML = "";
}
function mouseOut(star) {
for(let i = 1 ; i <= parseInt(star) ; i ++)
document.getElementById(i).innerHTML = "☆";
}
function mouseOnClick(star){
document.getElementById("message").innerHTML = "感謝您的評分";
switch(parseInt(star)){
case 1:
document.getElementById("result").innerHTML = "您給了一顆星";
break;
case 2:
document.getElementById("result").innerHTML = "您給了二顆星";
break;
case 3:
document.getElementById("result").innerHTML = "您給了三顆星";
break;
case 4:
document.getElementById("result").innerHTML = "您給了四顆星";
break;
case 5:
document.getElementById("result").innerHTML = "您給了五顆星";
break;
default :
document.getElementById("result").innerHTML = "";
}
}
</script>
<body>
<span id="1" onclick="mouseOnClick(this.id)" onmouseover="mouseOver(this.id)" onmouseout="mouseOut(this.id)">☆</span>
<span id="2" onclick="mouseOnClick(this.id)" onmouseover="mouseOver(this.id)" onmouseout="mouseOut(this.id)">☆</span>
<span id="3" onclick="mouseOnClick(this.id)" onmouseover="mouseOver(this.id)" onmouseout="mouseOut(this.id)">☆</span>
<span id="4" onclick="mouseOnClick(this.id)" onmouseover="mouseOver(this.id)" onmouseout="mouseOut(this.id)">☆</span>
<span id="5" onclick="mouseOnClick(this.id)" onmouseover="mouseOver(this.id)" onmouseout="mouseOut(this.id)">☆</span>
<p id="message">請給分</p>
<p id="result"></p>
</body>
</html>
```
Sign in with Wallet
Connect another wallet