CODEWITHSUNDEEP
javascriptdom
SPG
SPG

Reputation: 6197

javascript DOM problem

<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById('txt').value=c;
if(c == 100) return;
c=c+1;
t=setTimeout("timedCount()",30);
}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}
</script> 
</head>

<body onload="doTimer()">
<form>
<input type="button" value="Start count!">
<input type="text" id="txt">
</form>
<p>Click on the button above. The input field will count forever, starting at 0.</p>
</body>
</html>

I want to change 

<input type="text" id="txt">

into

<div type="text" id="txt">

It doesn't work. I think the problem is 

document.getElementById('txt').value=c;

But I tried

document.getElementById('txt').innerHTML=c;

It still doesn't work. Could someone tell me why? Cheers!!!

Upvotes: 0

Views: 260

Answers (3)

Brian
Brian

Reputation: 2778

Setting the value of the textbox is going to populate the text in the textbox. If you want to replace an input with a div you should use:

element.replaceChild(newDiv, oldTextbox);

Try:

var div = document.createElement("DIV");
div.id = "txt";
div.innerText = "Hello world!";

var tb = document.getElementById("txt");
tb.parentElement.replaceChild(div, tb);

Upvotes: 2

cwallenpoole
cwallenpoole

Reputation: 82078

Basically, you're asking about doing this:

var d = document.createNode("div")
d.setAttribute("id", "txt")
d.setAttribute("type", "text");
var input = document.getElementById( "txt" );
input.parentElement.replaceChild( d, input );

But I think you're better off:

function timedCount()
{
    document.getElementById('txt').value=c;
    if(c == 100) return;
    c=c+1;
    t=setTimeout("timedCount()",30);
}

function doTimer()
{
   if (!timer_is_on)
  {
      // set the input to readOnly, this allows JS to update it without 
      // letting the user modify the value.
      document.getElementById('txt').readOnly = true
      timer_is_on=1;
      timedCount();
  }
}

Upvotes: 0

noscript
noscript

Reputation: 77

Try changing <div type="text" id="txt"> to <div id="txt">

Upvotes: 0

Related Questions