To start off I'm terrible at Js and super new at it. I'm trying to make a random image pop up when the site goes to a 404. I can't tell if my website is actually running the code or not because console.log wasn't working. Because of that I took all my CSS and js and put it all into the same HTML file to see if that was the problem (it wasn't) Any help is much appreciated :)
HTML:
<html>
<head>
<?php include $_SERVER["DOCUMENT_ROOT"]."/php/ballsdeep1headndnav.php"; ?>
<link rel="stylesheet" href="../main.css" />
<style>
.yikes {
background-color: black;
}
.white {
color: white;
}
.cute_block {
border: blue;
border: 10px;
margin: 50px;
}
label {
margin: 10px;
}
input {
margin: 10px;
color: black;
}
</style>
<title>Yikes.</title>
</head>
<body class="yikes">
<h1 class="center white">
<404>
</h1>
<div id="getMeme()"></div>
<p class="white cute_block center">We have no clue how you ended up here</p>
<form class="white cute_block center">
<label for="how">How did you get here</label>
<input type="text" id="how" name="how"><br><br>
<label for="else">Anything else?</label>
<input type="text" id="else" name="else"><br><br>
<input type="submit" value="Submit">
</form>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script>
function getMeme() {
var meme = new Array('images/no_more-ico.png', 'images/nothing.png', 'images/phpfiles.png', 'images/sike.png');
var pp = Math.floor(Math.random() * meme.length);
document.getElementById("result").onload = '<img src="' + meme[pp] + '" />';
}
</script>
</html>
Using your code, you would need to ensure the function getMeme is called/invoked. Furthermore, you would need to update the function to modify the innerHTML of the element with id result instead of assigning to it's event handler onload.
See demo below:
I've included a console.log for debugging purposes on stackoverflow as images shared in the question are not available.
<head>
<?php include $_SERVER["DOCUMENT_ROOT"]."/php/ballsdeep1headndnav.php"; ?>
<link rel="stylesheet" href="../main.css" />
<style>
.yikes {
background-color: black;
}
.white {
color: white;
}
.cute_block {
border: blue;
border: 10px;
margin: 50px;
}
label {
margin: 10px;
}
input {
margin: 10px;
color: black;
}
</style>
<title>Yikes.</title>
</head>
<body class="yikes">
<h1 class="center white">
<404>
</h1>
<span id="result"></span>
<p class="white cute_block center">We have no clue how you ended up here</p>
<form class="white cute_block center">
<label for="how">How did you get here</label>
<input type="text" id="how" name="how"><br><br>
<label for="else">Anything else?</label>
<input type="text" id="else" name="else"><br><br>
<input type="submit" value="Submit">
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script>
function getMeme() {
var meme = new Array('images/no_more-ico.png', 'images/nothing.png', 'images/phpfiles.png', 'images/sike.png');
var pp = Math.floor(Math.random() * meme.length);
console.log("chose meme",meme[pp]); //line included for debugging purposes on stackoverflow as images shared in question are not available
//update `innerHTML` of target element
document.getElementById("result").innerHTML = '<img src="' + meme[pp] + '" />';
}
//call function to getMeme at the end of the page
getMeme();
</script>
</body>
</html>
Related
I am not an expert in HTML, CSS, or JavaScript, but I have this website that needs to be responsive on all devices. However, it does not seem like it is working for some reason and instead creates major gaps of white space when I view the website on a mobile web browser:
Here is the code for it:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<style media="screen">
body {
background-color: #f0f0f0;
font: 1em verdana, arial, helvetica, sans-serif;
line-height: 0px;
}
h1,h2 {
font-size: 2em;
color: #f00;
text-align: center;
text-shadow: 0 0 0.06em #000,0 0 0.12em #000;
}
.af-textWrap {
display: block;
text-align: center;
color: #b7b7b7;
}
.af-element {
text-align: center;
}
#awf_field-90534028,
#awf_field-90534029 {
display: block;
width: 98%;
max-width: 28.125em;
margin: auto;
text-align: left;
}
.image {
display: block;
width: 98%;
max-width: 30em;
height: auto;
margin: auto;
}
</style>
</head>
<body>
<div id="worked"></div>
<script src="https://fast.wistia.com/embed/medias/cj7247tp29.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_cj7247tp29 videoFoam=true" style="height:100%;width:100%"> </div></div></div>
<h1>Offer Ends In:</h1>
<h2 id="time"></h2>
<!-- AWeber Web Form Generator 3.0.1 -->
<form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
<input name="meta_web_form_id" type="hidden" value="604218668">
<input name="meta_split_id" type="hidden" value="">
<input name="listname" type="hidden" value="awlist4661276">
<input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&preview=true">
<input name="meta_adtracking" type="hidden" value="My_Web_Form">
<input name="meta_message" type="hidden" value="1">
<input name="meta_required" type="hidden" value="name,email">
<input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email...">
<div id="af-form-604218668" class="af-form">
<div id="af-body-604218668" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-90534028"></label>
<div class="af-textWrap">
<input id="awf_field-90534028" class="text" tabindex="500" name="name" type="text" placeholder="First Name...">
</div>
</div>
<div class="af-element">
<label class="previewLabel" for="awf_field-90534029"></label>
<div class="af-textWrap">
<input id="awf_field-90534029" class="text" tabindex="500" name="email" type="text" placeholder="Best Email...">
</div>
</div>
<div class="af-element buttonContainer">
<input id="af-submit-image-604218668" class="image" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image"/>
</div>
<div class="af-element privacyPolicy">
<p><strong>I respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></strong></p>
<div class="af-clear"> </div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="">
</div>
</form>
<!-- /AWeber Web Form Generator 3.0.1 -->
<script>
(function() {
'use strict';
var handler = function() {
if (--sec < 0) {
sec = 59;
if (--min < 0) {
min = 0;
sec = 0;
}
}
var min1 = '0' + min + 'm';
var min2 = min + 'm';
var sec1 = '0' + sec + 's';
var sec2 = sec + 's';
var col = ':';
document.getElementById('time').textContent = (min < 10 ? min1 : min2) + col + (sec < 10 ? sec1 : sec2);
};
var sec = 0;
var min = 15;
handler();
setInterval(handler, 1000);
}());
</script>
</body>
</html>
Looks like your iframe is injected by JavaScript so I personally suggest adding a setInterval() to your code to monitor the iframe element. Once the iframe element is available, get the body in the iframe and set it's margin to 0.
$(function() {
$('#test').append('<iframe src="http://www.w3schools.com"></iframe>');
var timer = setInterval(function() {
$('iframe').load( function() {
$('iframe').contents().find("head").append($("<style type='text/css'>body{margin:0;}</style>"));
clearInterval( timer ); // Clear the interval
});
}, 10);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
</div>
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
document.getElementById("list").appendChild(newItem);
}
input[type="text"] {
text-align: center;
font-size: 15px;
width: 200px;
height: 60px;
}
input[type="button"] {
text-align: center;
font-size: 15px;
width: 200px;
height: 60px;
}
<!DOCTYPE html>
<html>
<head>
<title>2-DO 2DAY</title>
</head>
<body>
<center>
<h1><font size="7" color="1E00FF">2-DO 2DAY</font></h1>
<br/>
<p><font size="8" color="5572FF"><em>What To Do Today?</em></font></p>
<br/>
<br/>
<input type="text" id="box" value="Click To Add Task"/>
<br/>
<br/>
<input type="button" value="Add Task" onclick="addItem();"/>
<br/>
<div id="list"></div>
</center>
</body>
</html>
basically all this does is when my button is pressed, it gets information from the box that you type into then adds it to a list. So yeah now i will type a bunch of random words because it says this is too much code and not enough words.
a bat named Jeff flew into the whale blubber to clean himself.
Add <br> to your function as follows:
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value + '<br><br>';
document.getElementById("list").appendChild(newItem);
}
I think to achieve what you want you actually need to attach two <br>s. Be also aware of correct use of break tag. In HTML break is <br> in XHTML is <br />.
Run the code snippet below to see it in action.
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value + '<br><br>';
document.getElementById("list").appendChild(newItem);
}
input[type="text"] {
text-align: center;
font-size: 15px;
width: 200px;
height: 60px;
}
input[type="button"] {
text-align: center;
font-size: 15px;
width: 200px;
height: 60px;
}
<center>
<h1><font size="7" color="1E00FF">2-DO 2DAY</font></h1>
<br/>
<p><font size="8" color="5572FF"><em>What To Do Today?</em></font>
</p>
<br/>
<br/>
<input type="text" id="box" value="Click To Add Task" />
<br/>
<br/>
<input type="button" value="Add Task" onclick="addItem();" />
<br/>
<div id="list"></div>
</center>
Adding line breaks to the end of the appended item is a BAD suggestion - yes it works but you are adding the line-breaks for the single purpose of spacing displayed content. Better to put the appended items in a semantically correct block level element such as a <p> (or apply css to an inline level element display:block) and then add margins to provide the spacing:
function addItem() {
var newItem = document.createElement("p");
newItem.innerHTML = document.getElementById("box").value;
document.getElementById("list").appendChild(newItem);
}
//css
#list p{margin:15px 0}
also - just for correctness -you are appending an item to a div with an id of "list" - but this is not a list. Would suggest either changing the name to reduce confusion about a div being a "list" or forget about creating elements that are appended into the div - and just create an actual list and all you have to do is append <li>'s to that list.
function addItem() {
var newItem = document.createElement("li");
newItem.innerHTML = document.getElementById("box").value;
document.getElementById("list").appendChild(newItem);
}
//html
<ul id='list'></ul>
//css
#list li{display:block; margin:15px 0}
Try it like this:
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
newItem.classList.add('item');
document.getElementById("list").appendChild(newItem);
}
input[type="text"] {
text-align: center;
font-size: 15px;
width: 200px;
height: 60px;
}
input[type="button"] {
text-align: center;
font-size: 15px;
width: 200px;
height: 60px;
}
.item::after {
content: "\A\A";
white-space: pre;
}
<!DOCTYPE html>
<html>
<head>
<title>2-DO 2DAY</title>
</head>
<body>
<center>
<h1><font size="7" color="1E00FF">2-DO 2DAY</font></h1>
<br/>
<p><font size="8" color="5572FF"><em>What To Do Today?</em></font></p>
<br/>
<br/>
<input type="text" id="box" value="Click To Add Task"/>
<br/>
<br/>
<input type="button" value="Add Task" onclick="addItem();"/>
<br/>
<div id="list"></div>
</center>
</body>
</html>
So all you need is to add a class item to the element and add an pseudo class to item with the content of a line break.
I want to make a gallery for my website. I developed the code to add an image, but I want to add an edit button to images, like Facebook.
I want it so when you pass the mouse on the image, you can the see an edit button.
I've searched a lot but without anything helpful.
Here's my code:
<?php
if(isset($_POST['upload_img'])){
$file_name = $_FILES['images']['name'];
$file_type = $_FILES['images']['type'];
$file_size = $_FILES['images']['size'];
$file_tmp = $_FILES['images']['tmp_name'];
if($file_name){
move_uploaded_file($file_tmp,"img/$file_name");
}
}
?>
<html>
<head>
<title>Test upload img</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<label>Upload Image</label><br>
<input type="file" name="images"><br><br>
<input type="submit" value="upload img" name="upload_img">
</form>
<?php
$folder="img/";
if(is_dir($folder)){
if($handle = opendir($folder)){
while(($file=readdir($handle))!=false){
if($file==='.' || $file==='..')
continue;
echo'<img src="img/'.$file.'"width="150" height="150">
<form>
<input type="file" value="Edit">
</form>
';
}
closedir($handle);
}
}
?>
</body>
</html>
hope this help.
HTML:
<div class="image_container">
<input type="file" class="edit_btn" value="Edit">
<img src="img.jpg">
</div>
CSS:
.image_container{ position: relative; }
.edit_btn{ postion: asolute; top: 10px; right: 10px; background-color: #000; color: #fff; padding: 8px 15px; border: 0; display: none; }
.image_container:hover .edit_btn{ display: block; }
My Classic ASP cart page uses divs for a quantity selector within a form:
<form action="/update-cart/" method="post">
<div class="quantity-selector detail-info-entry">
<div class="detail-info-entry-title">Quantity</div>
<div class="entry number-minus"> </div>
<div class="entry number">1</div>
<div class="entry number-plus"> </div>
</div>
</div>
</form>
when - or + is clicked the 1 will update as expected. the code to do this is this:
$('.number-plus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)+1;
divUpd.text(newVal);
});
$('.number-minus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)-1;
if(newVal>=1) divUpd.text(newVal);
});
What is the easiest way to post the content of the div with class "number" above when a form is submitted. Do i use:
<input type="hidden" id="Num" name="Num" value="" />
Or another way. Either way, how can this be done easily as I cannot get the variable "newVal" to populate the hidden field.
Thanks
This demo has 2 features of note.
The following are done with HTML and inline JS (e.g. onchange='...)
<input>s .number-minus and number-plus
<output> .number displays the sum of .number-minus and .number-plus
As requested, the sum of .number-minus and .number-plus is stored in a <input [hidden]> named .secret. This value was derived from <output> value by using jQuery (overkill IMO). `
$(function() {
$('#pos, #neg').on('change', function(event) {
var cnt = $('#counter').val();
$('#secret').val(cnt);
console.log('Secret: ' + secret.value);
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript/jquery onChange function for div.text to update form hidden field value</title>
<meta name="description" content="SO33312004">
<style>
.detail-info-entry-title,
#pos,
#neg {
font-variant: small-caps;
}
.entry {
padding: 3px;
margin: 0 5px;
width: 48px;
line-height: 1.6;
border: 2px solid #00E;
border-radius: 8px;
display: table-cell;
}
#counter {
font-weight: 900;
margin: auto;
display: table-cell;
height: 24px;
}
#form33312004 {
color: #0CF;
background: hsla(180, 100%, 10%, 1);
width: 33%;
height: 30%;
text-align: center;
vertical-align: middle;
display: table-row;
}
.field {
width: 50px;
display: table-cell;
}
footer {
font-size: .75em;
text-align: center;
}
</style>
</head>
<!--http://stackoverflow.com/questions/33312004/javascript-jquery-onchange-function-for-div-text-to-update-form-hidden-field-val-->
<body>
<form id="form33312004" submit="return false" oninput="counter.value = parseInt(pos.value, 10) - parseInt(neg.value, 10)">
<fieldset class="quantity-selector detail-info-entry">
<legend class="detail-info-entry-title">Quantity</legend>
<div class="field">
<input type="number" id="pos" min="0" max="999" step="any" value="0" class="entry number-plus">
<label for="pos">Positive</label>
</div>
<output for='pos neg' id="counter" name="counter" class="entry number">0</output>
<div class="field">
<input type="number" id="neg" min="0" max="999" step="any" value="0" class="entry number-minus">
<label for="neg">Negative</label>
</div>
</fieldset>
<input id="secret" type="hidden">
</form>
<div class="field">
<footer>Observe the hidden input's value thru
<br/>the console. (<b>F12</b> then the <b>Console</b> tab).</footer>
<script sr="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
</body>
</html>
With pure JS:
document.getElementById("Num").value = < variable name >
With jQuery(not 100% sure)
$("Num").value(< variable name>)
So I solved the problem myself.
I added the following line:
$("#Num").val(newVal);
To both the jquery functions for the + and - divs as follows:
$('.number-plus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)+1;
divUpd.text(newVal);
$("#Num").val(newVal);
});
$('.number-minus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)-1;
if(newVal>=1) divUpd.text(newVal);
$("#Num").val(newVal);
});
I am sure I had tried this but after thought I may have omitted the $ at the beginning. Always something simple in the end
So I have been able to make some progress with my problem but have encountered something a little unexpected/confusing. I have been able to add my script to my web page, however, the two do not work together. Without the script, the page appears as I would like. With the script, the script runs and overrides the web page. What happens is a random picture shows up in the top left corner of the screen, but nothing from the html file appears. I have included all my code (html, javascript, css) and if anyone can provide some guidance it would be really greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="mplstyles.css" rel="stylesheet" type="text/css" />
<title>Monroe Public Library</title>
</head>
<body>
<div id="pageContent">
<div id="head">
<img src="mpl.jpg" alt="Monroe Public Library" />
</div>
<div id="links">
<ul class = "nav">
<span>Quick Links</span>
<li>Home Page</li>
<li>Online Catalog</li>
<li>Friends of MPL</li>
<li>New Books and Other Good Reading</li>
<li>Ohio Virtual Library</li>
<li>Internet Public Library</li>
<li>Services and Collection</li>
<li>Adult Programs</li>
<li>Teen Central</li>
<li>Children's Room</li>
<li>Computers at MPL</li>
<li>Computer Rules and Procedures</li>
<li>Staff Directory</li>
<li>Library Records</li>
</ul>
</div>
<div id="main">
<h2>Library Records</h2>
<p>To view the library records, enter your username and password.</p>
<form id="login" method="post" action="">
<p>
<label for="username" class="center" id="input"> Username:</label>
<input type="text" id="username" name="username" size="20" />
</p>
<p>
<label for="password" class="center" id="input"> Password:</label>
<input type="password" id="password" name="password" size="20" />
</p>
<p>
<label for="captcha" id="input">As a final security check, enter the 5 numbers you see displayed below.</label>
<input type="text" id="captcha" name="captcha" size="6" />
</p>
<p id="login"> </p>
<p id="login">
</p>
<script src="mpl.js"></script>
<p align="center"><img src="" alt="" name="number1" width="70" height="100" id="number1"><img src="" alt="" name="number2" width="70" height="100" id="number2"><img src="" alt="" name="number3" width="70" height="100" id="number3"><img src="" alt="" name="number4" width="70" height="100" id="number4"><img src="" alt="" name="number5" width="70" height="100" id="number5"></p>
<div id="images">
</div>
<p align="center">
<input type="submit" value="View Library Records" />
</p>
</form>
</div>
<div id="address">
<span class="addressBold">Monroe Public Library</span>
580 Main Street, Monroe, OH 45050
<span class="addressBold">Phone</span>(513) 555-0211
<span class="addressBold">Fax</span>(513) 555-0241
</div>
</div>
</body>
</html>
window.onload = function ()
{
//http://www.java-scripts.net/javascripts/Random-Image-Script.phtml
var pictureNumbers=new Array()
//specify random images below. You can have as many as you wish
pictureNumbers[1]="0.jpg"
pictureNumbers[2]="1.jpg"
pictureNumbers[3]="2.jpg"
pictureNumbers[4]="3.jpg"
pictureNumbers[5]="4.jpg"
pictureNumbers[6]="5.jpg"
pictureNumbers[7]="6.jpg"
pictureNumbers[8]="7.jpg"
pictureNumbers[9]="8.jpg"
pictureNumbers[10]="9.jpg"
var randomNumber = Math.floor(Math.random()*pictureNumbers.length)
if (randomNumber==0)
{
randomNumber=1
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==1)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==2)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==3)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==4)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==5)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==6)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==7)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==8)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==9)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==10)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
}
#charset "UTF-8";
/* CSS Document */
body
{
margin-top:0;
font-family:Georgia, "Times New Roman", Times, serif;
background-color:#FFC;
}
#head
{
background-color:orange;
}
#page
{
width: auto;
margin" 0 auto;
background-color: white;
border-top: none;
}
#links
{
position:absolute;
width:10em;
border: 1px solid blue;
top: 72px;
background-color: white;
}
#main
{
margin-left: 12em;
}
#login
{
padding-top: 1em;
padding-left: 2em;
padding-bottom: 5em;
border: 1px solid blue;
}
#address
{
padding-top: 2em;
padding-left: 2em;
border-top: 1px solid blue;
}
#pageContent #main h2 {
color: #00F;
}
#input
{
background-color: orange;
padding-right: 20%;
}
Your problem is document.write. You should either be creating an element and appending it to a parent element in the DOM, or changing the src attribute of an existing element.
Creating Elements and appending them
var parent = document.getElementById("parent"),
img = document.createElement("img")
img.setAttribute("src","your-file-name.jpg")
parent.appendChild(img)
Example
Here is a simplified example of what you are doing.
Fiddle: http://jsfiddle.net/L3WYH/1/
HTML
<div id="picture-frame"></div>
JS
var pictureNumbers = [],
pictureCount = 10
for ( var i = 1; i <= pictureCount; i++ )
pictureNumbers[i] = i + ".jpg"
var randomNumber = Math.ceil(Math.random()*(pictureNumbers.length - 1)),
element = document.getElementById("picture-frame"),
image = document.createElement("img")
image.setAttribute("src", pictureNumbers[randomNumber])
element.appendChild(image)
To expand on #Gary's comment to the original post:
The calls to document.write(...) are what's causing your problem. Upon firing the 'onload' event, the browser closes the document for writing. Any subsequent calls to document.write will literally overwrite the whole page.
To fix this, you will need to do one of two things:
Make your calls to document.write outside of the window.onload event
Do as #MBottens mentioned in his answer, where you append new <img> elements to a DIV tag.