-
Notifications
You must be signed in to change notification settings - Fork 0
/
index2.html
112 lines (99 loc) · 3.19 KB
/
index2.html
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>KEANet</title>
<script type="text/javascript" src="methods2.js"></script>
</head>
<body class="border">
<h1><b>KEANet</b></h1>
<form>
<input type="checkbox" id="internet" name="internet" onclick="get_internet()">
<label for="internet">Internet connection</label><br>
Phone lines <input type="number" id="phoneLines" min="0" max="8" onchange="get_phoneLines()"><br>
Cell phones:<br>
<table>
<td>
<select id="s1" multiple="multiple">
<option value="1">Motorola G99</option>
<option value="2">iPhone 99</option>
<option value="Samsung Galaxy 99">Samsung Galaxy 99</option>
<option value="Sony Xperia 99">Sony Xperia 99</option>
<option value="Huawei 99">Huawei 99</option>
</select>
</td>
<td>
<div><input type="button" id="right" onclick="selectOpt()" value=">"/></div>
<div><input type="button" id="left" onclick="deselectOpt()" value="<"/></div>
</td>
<td>
<select id="s2" multiple="multiple">
</select><br>
</td>
</table>
Total price: <text id="price" ></text> DKK <br>
<input type="button" value="Buy" onclick="pur.buy()"/>
</form>
</body>
</html>
<script>
var firstBox = document.getElementById("s1");
var secondBox = document.getElementById("s2");
var internet = document.getElementById("internet");
var phoneLines = document.getElementById("phoneLines").value;
function get_internet()
{
if (internet.checked) price = pur.internet(true)
else price = pur.internet(false);
change_price(price);
}
function selectOpt()
{
var e = firstBox.options[firstBox.selectedIndex].text;
var option = document.createElement("option")
option.text = e;
secondBox.appendChild(option);
price = pur.select_phone(e);
change_price(price);
};
function deselectOpt()
{
var f = secondBox.options[secondBox.selectedIndex].text;
secondBox.remove(secondBox.selectedIndex);
var option = document.createElement("option")
option.text = f;
var price = pur.deselect_phone(f);
change_price(price);
};
function get_phoneLines()
{
var newValue = document.getElementById("phoneLines").value;
if (newValue > phoneLines)
{
var price = pur.increment_phoneLines();
}
else
{
var price = pur.decrement_phoneLines();
}
phoneLines = newValue;
change_price(price);
}
function change_price(price)
{
document.getElementById("price").innerHTML = price;
};
</script>
<style>
.border {
width: 30%;
height: 43%;
border: 5px solid black;
padding: 10px;
}
select {
width: 150px;
height: 100px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { opacity: 1;}
</style>