How do I refresh variables on a web page?

[kjtocool]

This may be a simple question:  How do I refresh the variables on a web page, without re-loading the rest of the page?  For example:

 

Say I have this in the head:

<script language="javascript" type="text/javascript">
<!-- 

var movie_1 = "Movie 1";
var movie_2 = "Movie 2";
var movie_3 = "Movie 3";
var movie_4 = "Movie 4";
var movie_5 = "Movie 5";

  function setMovieNames() {
movie_1 = "Movie 7";
movie_2 = "Movie 2";
movie_3 = "Movie 3";
movie_4 = "Movie 4";
movie_5 = "Movie 5";
  }

//-->
</script>

 

And then something like this in the Body:

<script language="javascript" type="text/javascript">
<!-- Prints the #1 Movie Name

document.write(movie_1);

//-->
</script>

<script language="javascript" type="text/javascript">
<!-- Prints the #2 Movie Name

document.write(movie_2);

//-->
</script>

<script language="javascript" type="text/javascript">
<!-- Prints the #3 Movie Name

document.write(movie_3);

//-->
</script>

<script language="javascript" type="text/javascript">
<!-- Prints the #4 Movie Name

document.write(movie_4);

//-->
</script>

<script language="javascript" type="text/javascript">
<!-- Prints the #5 Movie Name

document.write(movie_5);

//-->
</script>

 

 

How do I get it so that the web page will update those variables anytime the function to set the names is called?

[kjtocool]

So ... doing a little research, the best option I could come up with was:

 

function setMovieNames() {
  	with (document.form1) {
  		textfield.value = "New";

}
  }

 

First off I had to modify the function like above.  Secondly I had to make all the fields I wanted to update text fields.  And lastly I had to modify the css so that the text boxes are essentially invisible (no background or border).

 

.textbox {
background:none;
border:none;
}

 

I'll continue working, if I find any other ways, I'll update.  Please feel free to give any input, I'm pretty new to javascript.

[rhodesa]

instead of text fields, you can just use any element: span, p, div, td, whatever

the, just use innerHTML on it:

 

<span id="movie_1"></span>
<span id="movie_2"></span>
<span id="movie_3"></span>
<span id="movie_4"></span>
<span id="movie_5"></span>

 

function setMovieNames() {
document.getElementById('movie_1').innerHTML = movie_1;
document.getElementById('movie_2').innerHTML = movie_2;
document.getElementById('movie_3').innerHTML = movie_3;
document.getElementById('movie_4').innerHTML = movie_4;
document.getElementById('movie_5').innerHTML = movie_5;
  }

[kjtocool]

Good deal!  Thanks, I'll try that tonight.