practice-js/range.html at master · nazar-007/practice-js · 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
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Range</title>
</head>
<body>
<label>Width: </label>
<input type="radio" name="radio" value="width" onchange="chooseSize()"><br>
<label>Height: </label>
<input type="radio" name="radio" value="height" onchange="chooseSize()"><br>

<div id="w" style="display: none"><input type="range" oninput="setRange()" id="width"></div>

<div id="h" style="display: none"><input type="range" oninput="setRange()" id="height"></div>

<div id="square" style="background-color: #0000FF"></div>

<div id="showSize"></div>

<script>

    function chooseSize() {
        var radio = document.getElementsByName('radio');
        var w = document.getElementById('w');
        var h = document.getElementById('h');
        for (var k = 0; k < radio.length; k++) {
            if (radio[k].checked) {
                if (radio[k].value == 'width') {
                    h.style.display = 'none';
                    w.style.display = 'block';
                } else {
                    w.style.display = 'none';
                    h.style.display = 'block';
                }
            }
        }
    }

    function setRange() {
        var radio = document.getElementsByName('radio');
        var w = document.getElementById('w');
        var h = document.getElementById('h');
        var width = document.getElementById('width');
        var height = document.getElementById('height');
        var square = document.getElementById('square');
        var showSize = document.getElementById('showSize');
        for (var k = 0; k < radio.length; k++) {
            if (radio[k].checked) {
                if (radio[k].value == 'width') {
                    h.style.display = 'none';
                    w.style.display = 'block';
                    square.style.width = width.value + '%';
                    showSize.innerHTML = "Width: " + width.value + '%. Height: ' + height.value + '%.';
                } else {
                    w.style.display = 'none';
                    h.style.display = 'block';
                    square.style.height = height.value + '%';
                    showSize.innerHTML = "Width: " + width.value + '%. Height: ' + height.value + '%.';
                }
            }
        }
    }


</script>
</body>
</html>