Multiple document.write not working
I have a remote script called load.php
which is called with an argument id
. Then it adds id
to multiple links and displays them on a named page display.html
(which calls load.php
).
However, display.html only shows the first link and all other links are missing.
Code for display.html
<head>
<script type="text/javascript" src="http://example.come/load.php?id=1"></script>
</head>
Code for load.php
<?php
$pid = "-1";
if (isset($_GET['id'])) {
$pid = $_GET['id'];
}
?>
var firstlink='<a href="http://www.example.com/loader.html?parameter=<?php echo $pid?>"><img src="firstimage.jpg" alt="First Link!" width="150" height="125" border="0"></a><br/><br/>';
document.write(firstlink);
var secondlink='<a href="http://www.example.com/loader2.html?parameter=<?php echo $pid?>"><img src="secondimage.jpg" alt="Second Link!" width="150" height="125" border="0"></a><br/><br/>';
document.write(secondlink);
var thirdlink='<a href="http://www.example.com/loader3.html?parameter=<?php echo $pid?>"><img src="thirdimage.jpg" alt="Third Link!" width="150" height="125" border="0"></a><br/><br/>';
document.write(thirdlink);
EDIT: Accidentally gave the same links in all 3 downloaders. These are 3 different links.
source to share
You shouldn't use document.write
! There are better tools for that.
What you have to do is use appendChild
, insertAdjacentHTML
or just just write .innerHTML
to add your elements - after waiting for the DOM to be ready, i.e.
Here's an easy way to fix this problem:
<?php
$pid = "-1";
if (isset($_GET['id'])) {
$pid = $_GET['id'];
}
?>
window.addEventListener('load', function(){
var firstlink='<a href="http://www.example.com/loader.html?parameter=<?php echo $pid?>"><img src="firstimage.jpg" alt="First Link!" width="150" height="125" border="0"></a><br/><br/>';
window.document.body.innerHTML += firstlink;
var secondlink='<a href="http://www.example.com/loader.html?parameter=<?php echo $pid?>"><img src="secondimage.jpg" alt="Second Link!" width="150" height="125" border="0"></a><br/><br/>';
window.document.body.innerHTML += secondlink;
var thirdlink='<a href="http://www.example.com/loader.html?parameter=<?php echo $pid?>"><img src="thirdimage.jpg" alt="Third Link!" width="150" height="125" border="0"></a><br/><br/>';
window.document.body.innerHTML += thirdlink;
});
source to share
After the first one, document.write()
all the content of the web page is overwritten and the script is aborted.
Use the following:
var firstlink='<a href="http://www.example.com/loader.html?parameter=<?php echo $pid?>"><img src="firstimage.jpg" alt="First Link!" width="150" height="125" border="0"></a><br/><br/>';
var secondlink='<a href="http://www.example.com/loader.html?parameter=<?php echo $pid?>"><img src="secondimage.jpg" alt="Second Link!" width="150" height="125" border="0"></a><br/><br/>';
var thirdlink='<a href="http://www.example.com/loader.html?parameter=<?php echo $pid?>"><img src="thirdimage.jpg" alt="Third Link!" width="150" height="125" border="0"></a><br/><br/>';
document.write(firstlink + secondlink + thirdlink);
source to share