Question

So thanks to stack overflow, I’ve determined that document.write is clobbering my webpage/program every time it runs. I often see the answer is to use innerhtml and document.getElementById, however, in the following case, I can’t wrap my head around how it would be used below, seeing as how you have to assign an id for it to replace. I want the whole thing below to redraw in a single div. All it does is take that array, spit it out vertically, and highlight the number that matches the variable “speed”. That variable will change when you rerun the speedcounter function, so that the number that is highlighted will also change.

Is there a better way to do this?

And thanks for looking.

function speedcounter() {

var spx;
var speed = 3;
var sp=["0","3","4","4","4","5","6","7","8"];

document.write('   <h2>Speed</h2></br>');
document.write('<input type="button" onclick="addspeed();" value="+"><br />');   

 for (spx=8; spx>=0; spx--) {
    if (spx == speed) { 
      document.write('<font color=#00FF00>');
     }
    document.write(sp[spx]); 
    document.write('<font color=#000000><br />');
    }
 document.write ('<input type="button" onclick="remspeed();" value="-">');    
 }

Answer 1

If you don’t want to use jQuery for whatever reason, here’s a javascript-only solution.

I created a div

<div id="speed"></div>​

and then use document.getElementById() and innerHTML to add HTML to it. I kept your code structure to illustrate how it would be done. I’m using += to add on to the existing HTML in the div. At the top of the function, I clear it. If you don’t do that you’ll get multiple copies of the output every time you call the function.

function speedcounter() {
document.getElementById('speed').innerHTML = "";
var spx;
var speed = 3;
var sp=["0","3","4","4","4","5","6","7","8"];

document.getElementById('speed').innerHTML += '<h2>Speed</h2></br>';
document.getElementById('speed').innerHTML += '<input type="button" onclick="addspeed();" value="+"><br />';

 for (spx=8; spx>=0; spx--) {
    if (spx == speed) { 
        document.getElementById('speed').innerHTML += '<span style="color:#00FF00">' + sp[spx] + '</span><br />';
    } else {
        document.getElementById('speed').innerHTML += sp[spx] + "<br />"; 
    }
 }
 document.getElementById('speed').innerHTML += '<input type="button" onclick="remspeed();" value="-">';    
}

speedcounter();

I also removed your font tag and replaced it with a span and inline CSS to set the color.

Demo