G
GregR
So, you've all probably seen interfaces with a numeric field and
little up and down arrows to the right of the field to toggle the
numbers up and down. I'm trying to make one of those in Javascript
and HTML.
I have one working, but I'm using the "older" inline event handlers.
Basically, in the html, I have:
onclick="toggleUp( 'fieldId', toggleValue)" and
onclick="toggleDown( 'fieldId', toggleValue)"
....on the up and down arrow images respectively. I have an "Almost"
generic function that accepts these values and does the given
increment up or down. Works fine. Toggles the field, the other
dependant fields update as they should.
Problem 1.)
Now, I want to get the event handlers out of the HTML. I've not been
JS'ng long, and I've been reading up on event listeners and such and
I'm still a little fuzzy on how to just switch this code from inline
event handlers to event listeners that lie only in the JS file. It
needs to be pretty generic so that I can reuse it since I have several
different "forms" on different pages with these toggle fields, and
each form has at least 4 of these toggled fields on it.
So, how can I make a generic event handler that will listen for an
onclick on one of these images and know, 1. Which arrow was clicked
and 2. what field is associated with that arrow (up or down) so that
the correct field is incremented (up or down). Do I need an
differend listener for each field/arrow combo? Four fields, each
having two arrows = 8 event listeners? Or can I do it more
generically than that?
Problem 2.)
I also want to have the toggleUp() and toggleDown() functions generic
enough to work on any form. Right now, within each of these toggle
functions on the page I have working I include it to trigger the
function to recalculate all the fields when the toggleUp() is
triggered. For example:
function toggleUp(id,incr) {
var field = document.getElementById(id);
document.getElementById(id).focus();
var curValue = +(field.value);
var newValue = curValue + incr;
document.getElementById(id).value = newValue.toFixed(1);
recalcFormNameFields();
}
For the toggle function to be re-usable among forms, I need to get
that recalcForm4Fields() function call out of there, since each form
uses very different fields and equations. How can I trigger the
"correct" recalc function without putting it in the toggleUp()/
toggleDown() function itself?
Forgive me if these are basic questions. I've been a designer for
years and just started learning JS a few months ago...
Thanks for any input!!!
Greg
little up and down arrows to the right of the field to toggle the
numbers up and down. I'm trying to make one of those in Javascript
and HTML.
I have one working, but I'm using the "older" inline event handlers.
Basically, in the html, I have:
onclick="toggleUp( 'fieldId', toggleValue)" and
onclick="toggleDown( 'fieldId', toggleValue)"
....on the up and down arrow images respectively. I have an "Almost"
generic function that accepts these values and does the given
increment up or down. Works fine. Toggles the field, the other
dependant fields update as they should.
Problem 1.)
Now, I want to get the event handlers out of the HTML. I've not been
JS'ng long, and I've been reading up on event listeners and such and
I'm still a little fuzzy on how to just switch this code from inline
event handlers to event listeners that lie only in the JS file. It
needs to be pretty generic so that I can reuse it since I have several
different "forms" on different pages with these toggle fields, and
each form has at least 4 of these toggled fields on it.
So, how can I make a generic event handler that will listen for an
onclick on one of these images and know, 1. Which arrow was clicked
and 2. what field is associated with that arrow (up or down) so that
the correct field is incremented (up or down). Do I need an
differend listener for each field/arrow combo? Four fields, each
having two arrows = 8 event listeners? Or can I do it more
generically than that?
Problem 2.)
I also want to have the toggleUp() and toggleDown() functions generic
enough to work on any form. Right now, within each of these toggle
functions on the page I have working I include it to trigger the
function to recalculate all the fields when the toggleUp() is
triggered. For example:
function toggleUp(id,incr) {
var field = document.getElementById(id);
document.getElementById(id).focus();
var curValue = +(field.value);
var newValue = curValue + incr;
document.getElementById(id).value = newValue.toFixed(1);
recalcFormNameFields();
}
For the toggle function to be re-usable among forms, I need to get
that recalcForm4Fields() function call out of there, since each form
uses very different fields and equations. How can I trigger the
"correct" recalc function without putting it in the toggleUp()/
toggleDown() function itself?
Forgive me if these are basic questions. I've been a designer for
years and just started learning JS a few months ago...
Thanks for any input!!!
Greg