JavaScript - Simple Html Inline (in The Line) Insertion Of A Js Var

<?php
	$tabs = array();

	function tabs_header()
	{
	?>
	<style type="text/css">
	.tab {
		border-bottom: 1px solid black;
		text-align: center;
		font-family: arial, verdana;
	  }
	.tab-active { 
		border-left: 1px solid black; 
		border-top: 1px solid black; 
		border-right: 1px solid black; 
		text-align: center; 
		font-family: arial, verdana; 
		font-weight: bold;
	  }
	.tab-content { 
		padding: 5px; 
		border-left: 1px solid black; 
		border-right: 1px solid black; 
		border-bottom: 1px solid black;
	  } 
	</style> 
	<?php
	}

	function tabs_start()
	{  
      ob_start(); 
	}

	function endtab() 
	{ 
	  global $tabs;

	  $text = ob_get_clean();
      $tabs[ count( $tabs ) - 1 ][ 'text' ] = $text;

	  ob_start();
	}

	function tab( $title ) 
	{
	  global $tabs;

	  if ( count( $tabs ) > 0 )
		endtab();
		$tabs []= array(
		  title => $title,
		  text => ""
		);
	  }

	  function tabs_end( )
	  {
		global $tabs;

		endtab( );
		ob_end_clean( );

		$index = 0;
		if ( $_GET['tabindex'] )
			$index = $_GET['tabindex'];

	  ?>
	  <table width="100%" cellspacing="0" cellpadding="0">
	  <tr>
	  <?php
		$baseuri = $_SERVER['REQUEST_URI'];
		$baseuri = preg_replace( "/\?.*$/", "", $baseuri );
		$curindex = 0;
		foreach( $tabs as $tab )
		{
		   $class = "tab";
		   if ( $index == $curindex )
		   $class ="tab-active";
		?>
		<td class="<?php echo($class); ?>">
		<a href="<?php echo( $baseuri."?tabindex=".$curindex ); ?>">
		<?php echo( $tab['title'] ); ?>
		</a>
		</td>
		<?php
			$curindex += 1;
		 }
		?>
		</tr>
		<tr><td class="tab-content" colspan="<?php echo( count( $tabs ) + 1 ); ?>">
		<?php echo( $tabs[$index ]['text'] ); ?>
		</td></tr>
		</table>
		<?php
		}
		?>

<div id="energyFeedback" style="width:300px; height:10px; border:1px solid #666;">
<div id="energyFeedbackBar" style="width:100%; background-color:#999; height:100%;"></div></div>
<div id="gameContainer" style="position:absolute; top:30px;">
<div id="meadow" style="width:300px; height:300px; background-color:#957E52; position:absolute; left:0px; top:0px;">
<div id="bunny" style="position:absolute; height:10px; width:10px; background-color:#FCC;"></div>
</div>
</div>

//The bunny will start in the center of the meadow... therefore 15units in x & 15units in y directions
var bunny = {name: "Bunny", x: 15, y: 15, energy: 1000};
//as plants are created, they will get pushed into this array:
var allPlants = [];

//Graphic stuff
// Create a reference to the HTML element on screen so that you can move it around
bunny.graphic = document.getElementById('bunny');
energyFeedbackBar.graphic = document.getElementById('energyFeedbackBar');

//growthFactor will determine how likely a plant is to grow. Modify this value to answer the question above.
var growthFactor = 0.5;

//make a list of directions of travel for our Bunny
var directions = [
	n = {x: 0, y: -1, name: "North"},    
	e = {x: 1, y: 0, name: "East"},       
	s = {x: 0, y: 1, name: "South"},      
	w = {x: -1, y: 0, name: "West"},];	

//setInterval will make the program run every 100ms (in this case)
var int = setInterval(Simulation,100);

//intervalCount will keep track of our units of time expended
var intervalCount = 0;

//clear the interval (once the angriest bunny has been determined)
function stopInt() {
	clearInterval(int);
};

//this function gives a random element from an array (directions in our case)
function randomElement(_array) {
	if (_array.length == 0)
		throw new Error("The array is empty.");
	return _array[Math.floor(Math.random() * _array.length)];
};

//the moveBunny function will take the bunny and and move it in a random direction
function moveBunny() {
	// if the bunny is still alive...
	if (bunny.energy > 0) {
		//choose a random direction by running our "directions" array through our randomElement function.
		var directionOfMovement = randomElement(directions);
		//the bunny's position is changed by adding a random value to his x and y coordinates
		var newPosX = bunny.x + directionOfMovement.x;
		var newPosY = bunny.y + directionOfMovement.y;
		//we must constrain the bunny's movement to within the 30 by 30 meadow
		if (newPosX < 0 || newPosX > 30) {
			//basically, if the bunny lands beyond 30px or before 0px in the x or y directions, 
			//	their value gets reset to the min or max distances.
			if (newPosX > 30) {
				bunny.x = 30;
			}
			else {
				bunny.x = 0;
			}
		}
		//If they fall within the meadow, the bunny's x and y value are now updated to the new value.
		else {
			bunny.x = newPosX;
		}
		if (newPosY < 0 || newPosY > 30) {
			if (newPosY > 30) {
				bunny.y = 30;
			}
			else {
				bunny.y = 0;
			}
		}
		else {
			bunny.y = newPosY;
		}
	}
	else{
		stopInt();
	};
	//move bunny graphically on the browser.
	bunny.graphic.style.left = (bunny.x * 10) + 'px';
	bunny.graphic.style.top = (bunny.y * 10) + 'px';
	console.log(bunny.name + " moved to x: " + bunny.x + ", y: " + bunny.y + ", " + directionOfMovement.name);
	//bunny's health is reduced by 1 unit per movement.
	bunny.energy -= 1;
	//represent this graphically in the browser by adjusting the width of the energyFeedbackBar to represent the bunny's current energy level.
	energyFeedbackBar.graphic.style.width = (bunny.energy/10)*3;
	console.log(bunny.name + " has " + bunny.energy + " units of energy left.");
};


function createPlant() {
	//*********************************Here is where the problem begins...***********************************
	//the plant needs to appear on the screen as a small green square (approx 5 by 5px) within the 30 by 30px meadow.
	//Every plant created must be pushed onto the array 'allPlants' so that it can be compared to the position of the bunny.
	//I thought that maybe divs could be dynamically generated but I'm not sure if this is the most effective way, or if I'm even doing this properly. I tried this below:
	
	/*var plant = document.createElement("div");
	plant.id = "plant" + intervalCount;
	plant.style.x = Math.floor(Math.random()*30) + "px";
	plant.style.y = Math.floor(Math.random()*30) + "px";
	plant.style.width = 5 + "px";
	plant.style.height = 5 + "px";
	plant.style.background = "#090";
	document.documentElement.appendChild(plant);
	console.log("plant created at x: " + plant.x +" and y: " + plant.y);*/
};

//Simulation will determine whether a plant grows, 
//...moves the bunny
//... and compares the position of the bunny to the position of all the plants.
function Simulation(){
	//To keep track of time, add to the intervalCount
	intervalCount++;
	//state time in the console
	console.log("Time: " + intervalCount +" units");
	//grow a plant randomly (dependant on the growth factor)
	if (Math.random() < growthFactor) {
		createPlant();
	}
	//move the bunny
	moveBunny();
	// Compare bunny's position to the plants' positions, if there are plants.
	if (allPlants.length >= 1) {
		for (var j = 0; j < allPlants.length; j++) {
			// compare x and y co-ordinates
			if (bunny.x == allPlants[j].x && bunny.y == allPlants[j].y) {
				console.log("The bunny ate a plant!");
				//increase bunny's energy
				bunny.energy = bunny.energy + 10;
				
				// *********Here the plant must also be removed from allPlants and removed visually from the meadow***********
			};
		};
	};
};

<html>
<head>
<script>
function processform()
{
if ( document.form1.item1.value == "") 
{
alert("No Item Chosen")
}
else 
{
chosen = ""
len = document.form1.c1.length

for (i = 0; i <len; i++) {
if (document.form1.c1[i].checked) {
chosen = document.form1.c1[i].value
}
}

if (chosen == "") {
alert("No Color Chosen")
}
}
else {

itemname = document.form1.item1.value;
itemcolor = document.form1.c1.value;
itemsize = document.form1.size.value;
document.form1.txtarea1.value = "Thank you for purchasing a " + itemsize + " " + itemcolor + " " + itemname;
}
}


</script>
</head>
<body>
<h1>Store</h1>
<br/><br/>




<form name="form1">

<h4>What item would you like to buy?</h4>


<input type="text" name="item1" value="" /><br />

<br/><br/>

<h4>Color</h4>

<input type="radio" name="c1" value="blue" /> Blue<br />
<input type="radio" name="c1" value="red" /> Red<br />
<input type="radio" name="c1" value="green" /> Green<br />
<input type="radio" name="c1" value="yellow" /> Yellow<br />

<br/><br/>

<h4>Size</h4>

<select name="size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="extra large">Extra Large</option>
</select>





<br/><br/>

<button onclick="processform()">Purchase</button>

<br/><br/>

<textarea rows="2" cols="40" name = "txtarea1">  </textarea> 
</form>


</body>
</html>

var xmlHttp;

function ajax_compatible() 
{
   // Post: Returns an object if browser is AJAX compatible else false.
   
   if (window.XMLHttpRequest)
   {
      // users web browser can support AJAX
      return ( new XMLHttpRequest() );
   }
   else if (window.ActiveXObject)
   {
      // users web browser is IE6 and IE5
      return ( new ActiveXObject("Microsoft.XMLHTTP") );
   }
   else {
       alert("Unfortunately your browser does not support AJAX.");
      return null;
   }
}


function get_cookie(cookie_name) 
{ 
	if (document.cookie.length > 0) 
	{ 
	  c_start = document.cookie.indexOf(cookie_name + "="); 
	  
	  if (c_start != -1) 
	  {  
		c_start = c_start + cookie_name.length+1; 
		c_end   = document.cookie.indexOf(";",c_start) 
		
		if (c_end == -1) 
		{
		   c_end = document.cookie.length;
		}
		
		return unescape(document.cookie.substring(c_start,c_end)) 
	  }  
	} 
	return "" 
} 


function add_comment()
{
   // Post: Add user comment & rating to database and update new table row.
   // DO WE NEED TO SEND COOKIE ASWELL OR IS IT ALREADY DONE???
   
   xmlHttp = ajax_compatible();
   
   if (xmlHttp == null) {
       return;
   }
   
   var url = 'http://localhost:8000/cgi-bin/main.py';
   
   alert("add_comment() running");
   
   // Extract CGI variables to pass onto python script
   var id = document.getElementById('videoID').value;
   var video_id = 'videoID=' + id;
   var rating   = 'rating=' + document.getElementsByName('rating').value;
   var comment  = 'comment=' + document.getElementById('comment').value;
   var add_rating = 'addRating=' + document.getElementById('addRating').value;
   //var cookie = document.cookie;
   
   cgi_var = video_id + '&' + rating + '&' + comment + '&' + add_rating; // + '&' + cookie;
   
   // open python script 
   xmlHttp.open('POST',url,true);
   xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
	   
   // Error is in below line
   xmlHttp.onreadystatechange = state_changed(id); 
   // if I use the following line then it works
   // xmlHttp.onreadystatechange = test; 
   xmlHttp.send(cgi_var);
}


function state_changed(element_id)
{
   // Post: Use one function that will be used for each page update.
   //       This function sends the text returned by the python server script
   //       onto the browser(HTML element with the id 'element_id') to be displayed.
   
   if (xmlHttp.readyState == 4) 
	{
	   document.getElementById(element_id).innerHTML = xmlHttp.responseText;
	}

}

function test()
{
   // Post: used to test where the problem occurs
   // This function works
   
   if (xmlHttp.readyState == 4) 
	{
	   document.getElementById('result').innerHTML = xmlHttp.responseText;
	}

}

import java.io.*;
import java.util.*;

public class Words
{
ArrayList<String> words;

public Words()
{
words = getData("wordlist.txt");
}

public void displayWords()
{
for(int i=0; i<words.size(); i++) {
System.out.println(words.get(i));
}
}

public ArrayList<String> getData(String filename)
{
ArrayList<String> list = new ArrayList<String>();
File myFile = new File(filename);
if(myFile.exists() && myFile.length()>0) {
try {
BufferedReader in = new BufferedReader( new FileReader(myFile) );
String word = in.readLine();
while( word != null ) {
list.add(word);
word = in.readLine();
}
} catch( Exception e )
{} 
}
return list;
}
}

<input id="name" name="name" type="text" class="validate['required','length[3,-1]','nodigit']" size="20" value="Mr., Ms., Pastor..."onBlur="if(document.getElementById('name').value=='') {document.getElementById('name').value='Mr., Ms., Pastor...'};" onfocus="document.getElementById('name').value=''"; />

<html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
</head>
<body>

<img src="http://www.w3schools.com/Css/klematis.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

<img src="http://www.w3schools.com/Css/klematis2.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

</body>
</html>

<html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByTagName("img");
  x.style.opacity=1; x.filters.alpha.opacity=100;
  }
</script>
</head>
<body>

<img src="http://www.w3schools.com/Css/klematis.jpg" width="150" height="113" alt="klematis"
onmouseover="getElements()"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

<img src="http://www.w3schools.com/Css/klematis2.jpg" width="150" height="113" alt="klematis"
onmouseover="getElements()"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

</body>
</html>