web-course/function.html at master · nicklin96/web-course · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<h4>1.</h4>
<button id="alertBut">Click me!</button>
<div id="alertDisplay">Click the above button and you will see the result of function myAlert2</div>
<h4>2.</h4>
<label>String 1: &nbsp;</label><input type="text" id="str1"><br>
<label>String 2: &nbsp;</label><input type="text" id="str2"><br>
<button id="cat">cat</button>
<p>click "cat" and you will see the result below</p>
<div id="displayZone">
    <p>Example:</p>
    <p>aroha!=wow</p>
</div>
<script>
    function myAlert2(aString) {
        //this function takes parameter
        // it also returns a value
        //window.alert("Alerting: " + aString);
        return 34;
    }
    $(document).ready(function () {
        $("#cat").click(function () {
            $("#displayZone").html($("#str1").val() + "!=" + $("#str2").val());
        });
        $("#alertBut").click(function () {
            $("#alertDisplay").html(myAlert2("sth"));
        });
    });
</script>

</body>
</html>