JavaScript - Javascript Str_replace Help Only Replaces First Instance?

function ajax_object() {
	this.receive = function(serverAJAXpage, whileLoading, onDone, dataIntoDivID) { 
		this.xmlHttp = createAjaxObject();
		this.serverAJAXpage = serverAJAXpage;
		this.xmlHttp.open("GET", this.serverAJAXpage, true);
		this.xmlHttp.send();
		this.xmlHttp.onreadystatechange = function() {	
			if (this.readyState == 1) { 
				eval(whileLoading);
				//document.getElementById(mydiv).innerHTML=this.responseText;
			}
			if (this.readyState == 4) { 
				eval(onDone);
				if (typeof dataIntoDivID != "undefined") {
					document.getElementById(dataIntoDivID).innerHTML = this.responseText;
				}
				
			}
		}
	}
	
}
function createAjaxObject() {
	var xmlHttp=null;
	try {
	  	xmlHttp=new XMLHttpRequest();
	}
	catch (e) {
	  	try {
	    	xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	    }
	  	catch (e) {
	    	xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	    }
	}
	return xmlHttp;
}

<script>
	var onlineUsersAJAX = new ajax_object(); onlineUsersAJAX.receive('ajax/onlineUsers.php', '', '', 'onlineUsers');
	var recentPostsAJAX = new ajax_object(); recentPostsAJAX.receive('ajax/recentPosts.php', '', '', 'recentThreads');
</script>

<div id="iAmTheTargetId">
</div>
<div id="iWillHoverOverYouId">
</div>
<script type="text/javascript">
	var element = new hoverBox('iAmTheTargetId','iWillHoverOverYouId');
</script>

<div id="iAmTheTargetId" onmouseover="element.activate()" onmouseout="element.deactivate()" onmousemove="element.update(event)>
</div>
<div id="iWillHoverOverYouId">
</div>
<script type="text/javascript">
	var element = new hoverBox('iAmTheTargetId','iWillHoverOverYouId');
</script>

/*
 * triggerId
 * the element in which the attributes will be applied to
 * 
 * hoverBoxid
 * the element in which will hover around the triggerId
 */
function hoverBox(triggerId,hoverBoxid){
	this.triggerElement = document.getElementById(triggerId);
	this.hoverBoxElement = document.getElementById(hoverBoxid);
	 
	if(this.triggerElement == null || this.hoverBoxElement){
		return null;
	}
	
	self = this;
	alert(this.triggerElement);
	this.triggerElement.addEventListener('mouseover',function(){self.activate();},false);
	this.triggerElement.addEventListener('mouseout',function(){self.deactivate();},false);
	this.triggerElement.addEventListener('mousemove',function(){self.update(event);},false);
}

hoverBox.prototype = {
		triggerElement : null,
		hoverBoxElement : null,
		state	: false
};

hoverBox.prototype.activate = function(){
	this.state = true;
};

hoverBox.prototype.deactivate = function(){
	if(this.state != false){
		this.hoverBoxElement.style.display = "none";
		this.state = false;
	}
};

hoverBox.prototype.update = function(evt){
	if(this.state != false){
	  	this.hoverBoxElement.style.display = "block";
	  	this.hoverBoxElement.style.position = "absolute";
	  	this.hoverBoxElement.style.top = (evt.clientY + 5)+ "px";
	  	this.hoverBoxElement.style.left = (evt.clientX + 10)+ "px";
	}
};

<div id="target" onmouseover="aHoverBox.activate()" onmouseout="aHoverBox.deactivate()" onmousemove="aHoverBox.update(event)">
</div>
<div id="hover">
</div>

<script type="text/javascript">
	var aHoverBox = new hoverBox('iAmTheTargetId','iWillHoverOverYouId');
</script>

onmouseover="aHoverBox.activate()" onmouseout="aHoverBox.deactivate()" onmousemove="aHoverBox.update(event)"

function Core(){

var obj = {a : 'a', b : 'b'};
var num = 1;
var string = 'aff';

console.log(typeof arguments);//Object
console.log(arguments instanceof Array);//false
var args1 = Array.prototype.slice.call(arguments);
console.log(args1);
var args2 = Array.prototype.slice.call(obj);
console.log(args2);
var args3 = Array.prototype.slice.call(num);
console.log(args3);
var args4 = Array.prototype.slice.call(string);
console.log(args4);

Core('dom','event','ajax');

function Core(){

var obj = {a : 'a', b : 'b'};
var num = 1;
var string = 'aff';

var args = arguments.slice(0); 
var args2 = obj.slice(0);
var args3 = num.slice(0);
var args4 = string.slice(0);
//right now none of the above would work but it's more convenient than using the call alternative. 

}
Core('dom','event','ajax');

function addText(smiley) {
    document.getElementById('message').value += " " + smiley + " ";
    document.getElementById('message').focus();
    return false;
}

 $(parent.chtifrm.document.body).append('<div id=\"smly\" style=\"cursor:pointer;float:left;top:200px;display:none;position:absolute;\"><\/div>');

parent.chtifrm.document.getElementById('chatbox_option_disco').style.display == 'none'

<script type="text/javascript"><!--
$('#button-cart').bind('click', function() {
	$.ajax({
		url: 'index.php?route=checkout/cart/update',
		type: 'post',
		data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea, .date_data input[type=\'text\']'),
		dataType: 'json',
		success: function(json) {
			$('.success, .warning, .attention, information, .error').remove();
			
			if (json['error']) {
				if (json['error']['warning']) {
					$('#notification').html('<div class="warning" style="display: none;">' + json['error']['warning'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
				
					$('.warning').fadeIn('slow');
				}
				
				for (i in json['error']) {
					$('#option-' + i).after('<span class="error">' + json['error'][i] + '</span>');
				}
			}	 
						
			if (json['success']) {
				$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
					
				$('.success').fadeIn('slow');
					
				$('#cart_total').html(json['total']);
				
				$('html, body').animate({ scrollTop: 0 }, 'slow'); 
			}	
		}
	});
});
//--></script>

<html>

<form action="bacakomik.php" method='post'>
<select name="kodekomik">
<option value='../komik1/|23'>Judul Komik1</option>
<option value="../komik2/|20">Judul Komik2</option>
<option value="../komik3/|10">Juduk Komik3</option>
<option value="../komik4/|20">Judul Komik4</option>
</select>
<input type="submit" />
</form>
<?php
echo ('<select>');
echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>');
echo ('</select>');
?>
</html>

<?php
$dirkomik = $_POST['kodekomik'];
$exploded = explode("|", $dirkomik);
echo ($exploded[0]); //picture directory
echo ("<br>");
echo ($exploded[1]); //total page in the comic
$pagecount = (int)$exploded[1];
//Take last posted value, process it right away
echo ('<FORM name="guideform"> ');
echo ('<select name="guidelinks">');
$i=1;
do  {
echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>');
$i= $i+1;
}while($i <= $pagecount); //Printing option and select
echo ("</select>");
?>
<input type="button" name="go" value="Go!" onClick="document.getElementById('im').src=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value+'.png';"> </FORM>
<img src="img0.jpg" id="im">