First_Time_coding/Switch.html at main · emmy4lov/First_Time_coding · 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
70
71
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style>
body{
  background : purple;
  color: white;
}

.form{
  margin: 30px auto;
  background:red;

}

label, input, select, #submit{
  margin:3px 2%;
  width: 200px;
  padding: 3px;
}

result{
  background: white;
  width:250px;
  height:1px;
  margin: 10px auto;
  color:
</style>
</head>
<body>

  <div class='form'>
     <h2 for="items"> Choose your favorite car </h2>
   <input id='name' placeholder="Name" type="text">
    <select name="Cars" id="carSelected">
        <option value="Toyota">Toyota</option>
        <option value="Hunder">Hunder</option>
        <option value="BMW">BMW</option>
        <option value="Volvo">Volvo</option>
      </select>


    <input id='sub,it' onclick='submit()' type="submit">

  </div>
    <div id='result'>...</div>


 <script>


function submit(){
  let a = document.getElementById('carSelected').value;
  let b = document.getElementById('name').value;
  switch (a){
   case 'Toyota': document.getElementById('result').innerText=`Hello ${b}, You picked Toyota`; break;
   case 'Hunder': document.getElementById('result').innerText=`Hello ${b}, You picked Hunder`; break;
   case 'BMW': document.getElementById('result').innerText=`Hello ${b}, You picked BMW`; break;
   case 'Volvo': document.getElementById('result').innerText=`Hello ${b}, You picked Volvo`; break;
}
}


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