StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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:</p> <pre><code>function planeChoice(element) { // element refers to the clicked radio button var plane = element.value; switch (plane) { //... } } </code></pre> <p>For that to work, you have to pass <code>this</code> to your function:</p> <pre><code><input type="radio" name="planeButton" value="152" onclick="planeChoice(this)" /> </code></pre> <p><code>this</code> refers to the HTML element you attach the event handler to, so in this case it refers to the <code><input></code> element.</p> <hr> <p>To learn more about events, I suggest to read the articles on <a href="http://quirksmode.org" rel="nofollow">http://quirksmode.org</a>, starting with <a href="http://www.quirksmode.org/js/introevents.html" rel="nofollow"><em>Introduction to Events</em></a> and <a href="http://www.quirksmode.org/js/events_early.html" rel="nofollow"><em>Early event handlers</em></a>.</p> <hr> <p><strong>Two suggestions for further improvement:</strong></p> <p>(A) You can use a <strong>map</strong> (which is just an plain object in JavaScript) instead of a <code>switch</code> statement to determine the corresponding message:</p> <pre><code>var map = { "152": "A small two-place-airplane for flight training", "172": "The smaller of two four-place airplanes" // ... }; </code></pre> <p>A map is also easier to maintain (to extend).</p> <p>Once you have the value of the radio button, you can access the message with:</p> <pre><code> alert(map[plane]); </code></pre> <p>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.</p> <p>(B) You can use <strong>event delegation</strong> instead of binding the <em>same</em> event handler to every element (this works through <a href="http://www.quirksmode.org/js/events_order.html" rel="nofollow"><em>event bubbling</em></a>). The <code>click</code> event handler is attached to the <code><form></code> element:</p> <pre><code><form onclick="planeChoice(event)" ...> </code></pre> <p>Or even better, get a reference to the form element and attach the event handler via JavaScript:</p> <pre><code>document.getElementById("myForm").onclick = planeChoice; </code></pre> <p>The passed event object holds information about which element was clicked:</p> <pre><code>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 } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload