JSopgaver/opgave4.html at master · sumikuart/JSopgaver · 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">

    <script src="javascript/opgave4.js"></script>
</head>

<body>


    <div id="wrapper">

        <h1 id="overskrift">Opgave 4: Skift tekst</h1>


        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy.</p>

        <div>
            <h2>Underoverskrift af en slags</h2>
            <p>Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue.
                Phasellus dui. Maecenas facilisis nisl vitae nibh. Proin vel est vitae eros pretium dignissim. Aliquam
                aliquam sodales orci. Suspendisse potenti. Nunc adipiscing euismod arcu. Quisque facilisis mattis lacus.
                Fusce bibendum, velit in venenatis viverra, tellus ligula dignissim felis, quis euismod mauris tellus ut
                urna. Proin scelerisque. Nulla in mi. Integer ac leo. Nunc urna ligula, gravida a, pretium vitae,
                bibendum nec, ante. Aliquam ullamcorper iaculis lectus. Sed vel dui. Etiam lacinia risus vitae lacus.
            </p>
        </div>

        <input type="button" value="Klik her" id="knap" />


        <div id="opgaven">

            <h4>Opgaven</h4>

            <ol>
                <li>Når der klikkes på knappen:</li>
                <li>Skal overskriftens tekst ændres til "En ny overskrift"</li>
            </ol>
            <ol start="3">
                <li>Når man klikker igen:</li>
                <li>skal overskriften skifte tilbage til den oprindelige tekst</li>
            </ol>

            <p id="help">
                Få hjælp fx her:
                <a href="http://www.w3schools.com/jsref/prop_html_innerhtml.asp" target="_blank">Noget om innerHTML</a>
                og <a href="http://www.w3schools.com/js/js_if_else.asp" target="_blank">conditions (if-else)</a>
            </p>

        </div>
    </div>


</body>

</html>