closed jscript for loop to switchstatement

replace for loop with a switch statement someh开发者_Python百科ow?

---

You don't have to loop over all radio buttons to find the clicked one. You can pass the clicked element directly to your function:

function planeChoice(element) {
    // element refers to the clicked radio button
    var plane = element.value;

    switch (plane) {
         //...
    }
}

For that to work, you have to pass this to your function:

<input type="radio"  name="planeButton"  value="152"
       onclick="planeChoice(this)" />

this refers to the HTML element you attach the event handler to, so in this case it refers to the <input> element.

---

To learn more about events, I suggest to read the articles on http://quirksmode.org, starting with Introduction to Events and Early event handlers.

---

Two suggestions for further improvement:

(A) You can use a map (which is just an plain object in JavaScript) instead of a switch statement to determine the corresponding message:

var map = {
   "152": "A small two-place-airplane for flight training",
   "172": "The smaller of two four-place airplanes"
   // ...
};

A map is also easier to maintain (to extend).

Once you have the value of the radio button, you can access the message with:

 alert(map[plane]);

You are not limited to store only primitive values (like strings), you can also store functions and call them if you want to do some more complex things. But to learn more about functions and how you can use them, you should read a JavaScript guide.

(B) You can use event delegation instead of binding the same event handler to every element (this works through event bubbling). The click event handler is attached to the <form> element:

<form onclick="planeChoice(event)" ...>

Or even better, get a reference to the form element and attach the event handler via JavaScript:

document.getElementById("myForm").onclick = planeChoice;

The passed event object holds information about which element was clicked:

function planeChoice (event) {
    event = event || window.event; // for IE
    var target = event.target || event.srcElement; // for IE

    if(target.type === "radio") { // if a radio button is clicked
        var plane = target.value;
        // ... further code
    }
}

---

Can I suggest you try using jQuery? It's a useful (and popular) JavaScript library that will help reduce and simplify the code you need.

For example, the above code could be simplified to this in jQuery:

$('#myForm input:radio').click(function(){
    switch (this.value) {
        case "152": 
            alert("A small two-place-airplane for flight training");
            break;
        // More Options go here...
        default:
            alert("Error in JavaScript function planeChoice");
            break;
    }
});

It would also eliminate the need to use click handlers on each radio button.