PDA

View Full Version : getElementById/innerhtml



Dilemma
May 8th, 2010, 12:47 PM
Hello.

I'm trying to change the text on my page dynamically using getElementById etc. Just not quite sure how to do it.



<script>

function changeIt() {
document.getElementById('change').innerHTML = '*i want the stuff below here (from 'var' to 'text')*';
}

var Result= ((correct / 5) * 100) + '%';
document.write('<p>Result<b>' + score + '</b></p>');

document.write('<p>some text</p>');
</script>


//
<div id = "change">
*all the info I'm going to replace*
</div>



Just need to know how to put the variables and stuff in the 'innerhtml' part?

Thanks.

Philip M
May 8th, 2010, 01:03 PM
You cannot do it like that.



<script type = "text/javascript">

function changeIt() {
var correct = 3; // assumed value
var Result= ((correct / 5) * 100) + '%';
document.getElementById('change').innerHTML = Result;
//document.write('<p>Result<b>' + score + '</b></p>'); // score is not defined
document.write('<p>some text</p>');

}
</script>

<input type = button value = "Change it" onclick = "changeIt(); return false">
<div id = "change">
*all the info I'm going to replace*
</div>

document.write statements must be run before the page finishes loading. Any document.write statement that runs after the page finishes loading will create a new page and overwrite all of the content of the current page. So document.write is at best really only useful to write the original content of your page. It cannot be used to update the content of your page after that page has loaded.


A politician is one who preaches doctrines he knows to be untrue to men he knows to be idiots." - H. L. Mencken - US editor (1880 - 1956)

Dilemma
May 8th, 2010, 01:12 PM
You cannot do it like that.


document.getElementById('change').innerHTML = Result;
//document.write('<p>Result<b>' + score + '</b></p>'); // score is not defined
document.write('<p>some text</p>');

document.write statements must be run before the page finishes loading. Any document.write statement that runs after the page finishes loading will create a new page and overwrite all of the content of the current page. So document.write is at best really only useful to write the original content of your page. It cannot be used to update the content of your page after that page has loaded.



Thanks Philip.

So how can I output the text in the document.write, with the result variable?



document.getElementById('change').innerHTML = 'Result: ' + Result;

?

Thanks.

Philip M
May 8th, 2010, 01:17 PM
Thanks Philip.

So how can I output the text in the document.write, with the result variable?



document.getElementById('change').innerHTML = 'Result: ' + Result;

?

Thanks.

I don't understand you. I thought I had explained that document.write cannot be used to update the content of your page after that page has loaded. Was that not clear?

Dilemma
May 8th, 2010, 01:21 PM
I don't undersatnd you. I thought I had explained that document.write cannot be used to update the page and cannot be used to update the content of your page after that page has loaded. Was that not clear?

Sorry, I just meant the text that I was using in the document.write. Not to actually try and output it again.

I was just asking if I could just put the html in the * innerhtml = ' ' *

But, don't worry. I've done it now and it worked.

Could I put an if/else in the innerhtml part?



if (Result > 5 ) {
('<p>Well done</p>'); }
else {
('<p>Unlucky</p>'); };

Philip M
May 8th, 2010, 02:02 PM
Could I put an if/else in the innerhtml part?



if (Result > 5 ) {
('<p>Well done</p>'); }
else {
('<p>Unlucky</p>'); };


No. You seem to be confused about HTML and scripts, and how they interact.


if (Result > 5 ) {
var c = "Well Done!"
}
else {
var c = "Unlucky";
}
document.getElementById('change').innerHTML = Result + " " + c;

Dilemma
May 8th, 2010, 02:13 PM
No. You seem to be confused about HTML and scripts, and how they interact.

Yeah, I think I'm starting to get it now! :p

Thanks for all of your help. Working exactly as I wanted it to now.

You rock! :thumbsup: