​x
 
1
<!DOCTYPE html>
2
<title>My Example</title>
3
​
4
<script>
5
// Wait for DOM to load
6
document.addEventListener("DOMContentLoaded", function(event) {
7
​
8
  // Put the button into a variable
9
  var e = document.getElementById("myForm");
10
  var msg = "";
11
12
  // Wait for user to click the button
13
  e.addEventListener( "change", function() {
14
  
15
    // Put the selected value into a variable
16
    var myColor = this.color.value;
17
    
18
    // The "If Else If" statement.
19
    if (myColor == "Blue") {
20
    
21
      msg = "Just like the sky!";
22
        
23
    }
24
    
25
    else if (myColor == "Red") {
26
​
27
      msg = "Quite daring!";
28
      
29
    }
30
    
31
    else if (myColor == "Green") {
32
​
33
      msg = "Like... grass?";
34
      
35
    }  
36
    
37
    // Output message
38
    document.getElementById("msg").innerHTML = msg;
39
    
40
  }, false);
41
});
42
</script>
43
​
44
<!-- Replace '{action page}' with your own action page to support non-JavaScript users -->
45
<form id="myForm" name="myForm" action="{action page}">
46
  <label>
47
    <input type="radio" name="color" value="Blue"> Blue
48
  </label>
49
  <label>
50
    <input type="radio" name="color" value="Red"> Red
51
  </label>
52
  <label>
53
    <input type="radio" name="color" value="Green"> Green
54
  </label>
55
</form>
56
​
57
<p id="msg"></p>