real-time text update via javascript

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

real-time text update via javascript

Post by microthick »

In the past, whenever implementing things like "Price Calculators" in JavaScript, my calculated "Cost" would appear in a text form field so that I could update the cost as the user fills out the form, rather than having to submit the page.

Is it possible to update text on the screen using JavaScript without displaying the calculated value in a form field?

I assume it has to be done by using the DOM but I don't have much experience in that area.

Might someone be able to prototype an example?
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post by Gen-ik »

Using object.innerHTML will do the trick but not all browsers can use it which is a damn shame. I think it's IE5.5 (or higher) and NS6 (or higher)... not sure about the other "lesser" browsers out there.

Here's an example using innerHTML though.

Code: Select all

<html>
<head>

<script language="javascript">

function UpdateSpan(text)
&#123;
     if(!document.body.innerHTML) return; // Stops the function if innerHTML can't be used

      if(document.layers)
      &#123;
            document.TheSpan.innerHTML = text;
      &#125;
      elseif(document.getElementById)
      &#123;
            document.getElementById('TheSpan').innerHTML = text;
      &#125;
      elseif(document.all)
      &#123;
            document.all.TheSpan.innerHTML = text;
      &#125;
&#125;

</script>

</head>
<body>

<span id="TheSpan">Some text</span>
<br>
<a href="javascript:UpdateSpan('some new text')">insert new text</a>

</body>
</html>
.......haven't tested it but it should do the trick.
Post Reply