CODEWITHSUNDEEP
javascripthtml
Preston Rodeniser
Preston Rodeniser

Reputation: 150

Javascript basic radio button alert

So I am trying to create a test page with radio buttons that use onclick to register what alert to display on the page and I cannot get it to work with my current code... I'm following a tutorial in a book so I changed some things and can't figure out why its not working.

<!DOCTYPE html>
<!-- radio_click.html
    A document for radio_click.js
    Creates five radio buttons that call the
    colorChoice event handler to display desccriptions
    -->
<html lang="en">
<head>
    <title> radio_click.html</title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="radio_click.js">
    </script>
</head>
<body>
    <h4> Choose from the five colors </h4>
        <form id="myForm" action=" ">
            <p>
                <label><input type="radio" name="colorbutton" value="1" onclick="colorChoice(1)"/>Red</label>
            </br>
                <label><input type="radio" name="colorbutton" value="2" onclick="colorChoice(2)"/>Blue</label>
            </br>
                <label><input type="radio" name="colorbutton" value="3" onclick="colorChoice(3)"/>Green</label>
            </br>
                <label><input type="radio" name="colorbutton" value="4" onclick="colorChoice(4)"/>Yellow</label>
            </br>
                <label><input type="radio" name="colorbutton" value="5" onclick="colorChoice(5)"/>Orange</label>
            </p>
        </form>
    <!-- script for registering event handlers -->
    <script type = "text/javascript" src="radio_clickr.js">
    </script>
</body>
</html>

The javascript file(1)

// radio_click.js
//      An example of the use of the click event with radio buttons,
//      registering the event handler by assignment to the button attributes

// the event handler for a radio button collection
function colorChoice(color){
// put the DOm address of the elements array in a local variable
var dom = document.getElementById("myForm");

// determine which button was pressed
for(var index = 0; index < dom.colorButton.length; index++){
    if(dom.colorButton[index].checked){
        color = dom.colorButton[index].value;
        break;
    }
}

//Produce an alert message about the chosen airplane
switch(color){
    case 1:
        alert("Roses are red...");
        break;
    case 2: 
        alert("Violets are blue...");
        break;
    case 3:
        alert("Green doesn't fit in this...");
        break;
    case 4:
        alert("Yellow for lemon");
        break;
    case 5:
        alert("What rhymes with orange?");
        break;
    default:
        alert("Welp, that didn't work");
        break;
}
}

And javascript file(2) below

// radio_clickr.js
// the event registering code for radio_click
var dom= document.getElementById("myForm");
dom.elements[0].onclick = colorChoice;
dom.elements[1].onclick = colorChoice;
dom.elements[2].onclick = colorChoice;
dom.elements[3].onclick = colorChoice;
dom.elements[4].onclick = colorChoice;

All the files are located in the same folder, is perhaps my location path wrong?

Upvotes: 0

Views: 1756

Answers (2)

Anders
Anders

Reputation: 8577

The for loop in your code is completely unnecesarry. When the function is called, it already gets the number of the clicked radio button as a parameter. Then you loop through the buttons (with errors pointed out in other answers) to get the same information again.

The best way to find out the value of the clicked radio button is, however, not any one of the two you are using. Instead, you can use the variable this that contains a reference to the DOM element that fired the event. It has a property value with the desired information. So your code could look like below.

HTML:

<label><input type="radio" name="colorbutton" value="1" onclick="colorChoice()"/>Red</label>

JS:

function colorChoice(){

    //Produce an alert message about the chosen airplane
    switch(this.value){
        case '1':
        alert("Roses are red...");
        break;
        //And so on....
    }
}

Upvotes: 0

Samir Selia
Samir Selia

Reputation: 7065

There are few changes which needs to be done in your code.

  • colorButton object is not defined
  • Change switch case values from numeric to string.

Below is the modified code. Only function colorChoice is changed.

function colorChoice(color){
    // put the DOm address of the elements array in a local variable
    var dom = document.getElementById("myForm");
    var colorButton = document.getElementsByName("colorbutton");

    // determine which button was pressed
    for(var index = 0; index < colorButton.length; index++){

        if(colorButton[index].checked){
        color = colorButton[index].value;
        break;
        }
    }

    //Produce an alert message about the chosen airplane
    switch(color){
        case '1':
        alert("Roses are red...");
        break;
        case '2': 
        alert("Violets are blue...");
        break;
        case '3':
        alert("Green doesn't fit in this...");
        break;
        case '4':
        alert("Yellow for lemon");
        break;
        case '5':
        alert("What rhymes with orange?");
        break;
        default:
        alert("Welp, that didn't work");
        break;
    }
}

Upvotes: 1

Related Questions