risyu_son/DOM.html at master · ogawa3427/risyu_son · 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
<charset="UTF-8">
<!DOCTYPE html>
<html>
<head>
    <title>DOM Sample</title>
</head>
<body>
    <h1>DOM Sample</h1>
    <button id="add" onclick="add()">Add</button>
    <div id="box" style="border: 1px solid #000; padding: 10px; border-radius: 5px;">
        <p>0</p>
    </div>
    <button id="clear_all" onclick="clear_all()">Clear</button>


    <script>
        let count = 0;

        function add() {
            count++;
            document.getElementById('box').innerHTML += `<p>${count}</p>`;
        }

        function clear_all() {
            count = 0;
            document.getElementById('box').innerHTML = '';
            document.getElementById('box').appendChild(document.createElement('p')).textContent = '0';
        }
    </script>
</body>
</html>