View Full Version : setting a variable using a radio button

12-09-2010, 10:56 PM

I have a variable:

var step = 5;

that is referenced by this function:

function animate(d) {
if (d>eol) {
var p = poly.GetPointAtDistance(d);
if (k++>=180/step) {
if (supportsCanvas) {
if (poly.GetIndexAtDistance(d)>lastVertex) {
lastVertex = poly.GetIndexAtDistance(d);
if (lastVertex == poly.getVertexCount()) {
lastVertex -= 0;
while (poly.getVertex(lastVertex-2).equals(poly.getVertex(lastVertex-1))) {
angle = bearing(poly.getVertex(lastVertex-2),poly.getVertex(lastVertex-1) );


setTimeout("animate("+(d+step)+")", tick);
} else {

and I would like for the user to have the option of setting that variable using radio buttons- say to 5, 7 or 10

is it possible?

Old Pedant
12-10-2010, 12:06 AM
<label><input type="radio" name="stepsize" onclick="step=5"> step 5</label>
<label><input type="radio" name="stepsize" onclick="step=7"> step 7</label>
<label><input type="radio" name="stepsize" onclick="step=10"> step 10</label>

12-10-2010, 01:11 AM

just one more dumb question -

should I be doing something with the original

var step = 5;


I commented it out and now I get a "step is not defined" error...

here's the page (http://xelawho.com/map/bus2.htm) if you want to have a look

12-10-2010, 01:56 AM
no, cancel that - I think google maps was just having a moment.

Thanks again, Old P.

Old Pedant
12-10-2010, 02:04 AM
The variable *MUST* be defined in the global scope of JavaScript.

That is, *OUTSIDE* of any function.

<script type="text/javascript">
// Global variable that controls how fast the bus goes
var steps = 5; // 5 is the default

... other code ...

12-10-2010, 04:14 AM
right. got it. thanks again.

12-10-2010, 07:53 PM
just one thing:

this works great in FF and as well as it ever did in IE, but the buttons have absolutely no effect in Chrome.

is there some reason for that, or some way around it?

Old Pedant
12-10-2010, 08:40 PM
Do the buttons *CHANGE* the value????

Is that where the problem is, or is the problem that the value is just being ignored?

To find out, DEBUG! This time, using alert()'s.

var shown = false; // added flag to help debugging

function animate(d) {
if ( ! shown ) {
alert("In animate, step is " + step );
shown = true; // so this doesn't happen every time!
// continue with rest of code...
if (d>eol) {
... etc. ...

Old Pedant
12-10-2010, 08:42 PM
And/or do it here:

<input type="radio" name="stepsize"
onclick="alert('before:' + step); step=10; alert('after:' + step);">
step 10

12-10-2010, 08:49 PM
Do the buttons *CHANGE* the value????

No, they don't - according to the alerts, Chrome is still working off the global var, regardless of what button is selected.

Old Pedant
12-10-2010, 09:06 PM
Okay, I have to see this for myself!

Back shortly.

Old Pedant
12-10-2010, 09:14 PM
Well, it's something about your page, I guess.

Maybe change the variable name??? Just in case it's mixed up with an internal name????

Because this code worked in all browsers I tried (IE/FF/Chrome):

<script type="text/javascript">
var steps = 5;

function showit()
document.getElementById("SHOW").innerHTML = steps;
<body onload="setInterval(showit,250);">
Current value of steps is <span id="SHOW"></span>
<label><input type="radio" name="xyz" onclick="steps=5"> Five </label>
<label><input type="radio" name="xyz" onclick="steps=12"> Twelve </label>
<label><input type="radio" name="xyz" onclick="steps=12345678"> Big number </label>


Old Pedant
12-10-2010, 09:15 PM
You'll notice that I purposely decoupled the setting of the value (in the radio buttons) from the display (done via the code invoked by setInterval, similar to what your code does, at least).

12-10-2010, 09:31 PM
Maybe change the variable name??? Just in case it's mixed up with an internal name????

yup. that got it. thanks. :thumbsup:

and now if I could just get this function (http://xelawho.com/map/moving2.htm) to restart with the onclick, I'd be extremely happy...