html-practice/scripting.html at master · oceanjules/html-practice · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<body>
<script>
function facechange(smile) {
    var pic;
    if (smile == 0) {
        pic = "images/sad.png"
    } else {
        pic = "images/happy.png"
    }
    document.getElementById('myImage').src = pic;
}
</script>

<img id="myImage" src="images/happy.png" width="300px" height="300px">

<p>
<button type="button" onclick="facechange(1)">Smile</button>
<button type="button" onclick="facechange(0)">Hungry</button>
</p>

<h2 ><span id="water" style="color:red">You are thirsty!</span></h2>

<script>
function drink() {
    document.getElementById("water").style.fontSize = "30px";
    document.getElementById("water").style.color = "white";
    document.getElementById("water").style.backgroundColor = "blue";
    document.getElementById("water").innerHTML = "Well, done! You are healthy!"
}
</script>

<button type="button" onclick="drink()">Drink Water!</button>


</body>
</html>