change value of all buttons after onclick

[xelawho]

Hi,

I have a row of buttons that are made by innerhtml using this code:

 sidebar_html += '<div id="button"><input type="button" onclick="toggleRun('+poly_num+')" value="Start Bus" id="runBtn'+poly_num+'" style="width:120px; height:24px; text-align:center"></div><br />';

to fire this function:

function toggleRun(poly_num){
 var btn = document.getElementById('runBtn'+poly_num);
  if (document.getElementById('runBtn'+poly_num).onclick) {	
  if (run){
		run=false;
		document.getElementById('runBtn'+poly_num).value="Reload Page";
		startAnimation(poly_num);
		} else {
		run=true;
		document.getElementById('runBtn'+poly_num).value="Reload Page";
		window.location.reload();
		} 
}
}

the function can only run once, so the idea is that the button either runs it the first time or reloads the page.

at the moment, the way it's working is that the button that's clicked changes its value to "Reload Page" but the others keep their original value, even though it reloads if you click them.

So I'd like a way to change the value of the rest of the buttons when one is clicked. Is that possible?

Here's the page if I didn't explain myself well enough.

[Old Pedant]

function toggleRun(poly_num)
{
    var btn = document.getElementById('runBtn'+poly_num);
    if ( btn.onclick) 
    {    
        var inps = document.getElementsByTagName("input");
        for ( var i = 0; i < inps.length; ++i )
        {
            var inp = inps[i];
            if ( inp.value = "Start Bus" ) inp.value = "Reload Page";
        }

        if (run)
        {
            run=false;
            startAnimation(poly_num);
        } else {
            run=true;
            window.location.reload();
       } 
   }
}

???? Untested, but makes sense.

[Old Pedant]

But the code seems overly complex.

sidebar_html += 
    '<div id="button">'
  + '<input type="button" onclick="toggleRun(this,' + poly_num + ')"
  + ' value="Start Bus" '
  + ' style="width:120px; height:24px; text-align:center">'
  + '</div><br />';

...
function toggleRun(btn, pnum)
{
    var inps = document.getElementsByTagName("input");
    for ( var i = 0; i < inps.length; ++i )
    {
        var inp = inps[i];
        if ( inp.value = "Start Bus" ) inp.value = "Reload Page";
    }
 
   if (run)
   {
        run=false;
        startAnimation(pnum);
   } else {
        run=true;
        window.location.reload();
   } 
}

Unless you need the id's on the buttons for some other reason, get rid of them. Pass this along with the number. And what's the point of looking for the onclick property??? How else could you *get* to the function other than by a click on a button??

[xelawho]

Originally Posted by Old Pedant

But the code seems overly complex.

Well you know what they say- it takes someone smart to make something simple.

Thanks once again, Old Pedant. You missed an apostrophe on the third line of the sidebar_html there, but I guess I'll let that slide