Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I would actually simplify it even further. If you aren't doing anything with the IDs outside of the NewVal functionality, you can remove the ID attribute. It does need to be unique per element if you are using it. However, keeping with the standard JavaScript syntax you are using, you can bind an event to all items named "pledge" by looping through the object collection from getElementsByName and binding the onChange event. Then, in an anonymous function for it, reference the element or the value, depending on your need:</p> <pre><code>function NewVal(val) { document.getElementById('example').value=val; } function NewValElement(ele){ document.getElementById('example').value=ele.outerHTML; } var pledges = document.getElementsByName('pledge'); for (var i = 0;i&lt;pledges.length;i++) { // do something with value /*pledges[i].onchange=function() { NewVal(this.value); };*/ // do something with element pledges[i].onchange=function() { NewValElement(this); }; } </code></pre> <p>This will make it easier to manage the event because you don't have to add the onchange to each. You don't need a keydown or anything either because the onchange is fired when the value changes for a select option or a radio group. </p> <p>Fiddle for working example: <a href="http://jsfiddle.net/9qfst/1/" rel="nofollow">http://jsfiddle.net/9qfst/1/</a></p> <p>The input shows the HTML of the element to show you that it has the element triggering the event. </p> <p><strong>Update</strong> I forked the fiddle and cleaned it up a bit to make the functionality behave the way I think you were looking for the sample to work. I looked at your full site too and see what you are trying to do. Now, I just kept what you had, more or less, and rewrote pieces to clean it up and make it work. It's all still using raw JavaScript, not a framework. I also have the script going in at the bottom of the body element, just before close, so I don't have an onLoad event or anything. I am also not calling the UpdatePrices for this example as it looked like it was just setting everything to 0.</p> <p>Now, this could be cleaned up even more, from what I can see in what you are doing, and there are alternative ways to do this, and also ways to use jQuery to simplify some of this. However, this seems to be working pretty well, from what I can tell. The only thing I didn't do is add in the AddOns that you have on your site. </p> <p>Check this out and let me know if you have more questions: <a href="http://jsfiddle.net/92DJ6/2/" rel="nofollow">http://jsfiddle.net/92DJ6/2/</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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