---
# System prepended metadata

title: JavaScript 星星打分(完成)
tags: [JavaScript]

---

# 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>
```