Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to pass a Javascript variable to HTML

Status
Not open for further replies.
Eutychus

Eutychus

Programmer
Nov 14, 2007
61
US
I am trying to randomly display an image file on a web page. The web page is HTML but the random number generator is Javascript. The files are named 1.png, 2.png, 3.png, etc. I found some code that is supposed to generate a random number and I know know to display an image by enclosing the path within quotes (see below). But I don't know how to get the image tag to recognize the path variable generated by Javascript. Here is the code:

<td valign="top" width="470" height="203">
<script type="text/javascript">
var randNum = Math.ceil(Math.random()*3);
</script>
<p align=center><img border="0" src="images/ads/1.png">
<br>Click for enlarged image </p>
</td>

I'm fairly new to HTML and am new to Javascript. If the variable were an ASP variable, I think I could do what I need to do. I want to make the src point to the randomly selected file number, something like this src="images/ads/" & randNum & ".png"
I don't know how to use the javascript variable. Perhaps there is another way by adding something to the javascript like

var myPath = ('/images/Ads/'+randomNumber+'.png');

then if src=myPath would work, I'd have a solution. However, I can't seem to get from the javascript variable to HTML. I've spent several hours trying to find a solution on the web, to no avail. I would be grateful for any help you can give.

Also, if I could get the random number from HTML itself, that would be fine, too. I'm not tied to Javascript.
Thanks!
 
Sort by date Sort by votes
HTML is a static language, it cannot do anything dynamic like generate numbers as such.

But to modify the image simply address the image object in JS.
I would also have this run wen page loads so:

Code: 
<html>
<head>
<script type="text/javascript">
function random_Image(){    
var randNum = Math.ceil(Math.random()*3);
var myImage=document.getElementById('randomImage');
myImage.src="images/ads/"+ randNum + ".png";
}
</script>
</head>
<body [blue]onload="[green]random_image();[/green]"[/blue]>
<p align=center><img border="0" src="images/ads/1.png" [red]id="randomImage"[/red]></p>
</body>
</html>




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Thank you for your response. I am still not getting results. I added the script as you said and preloaded it. I actually already have a preload so now it looks like this:

<body onload="preloadImages();" onload="random_image();" bgcolor="#F5F4E4">

However, when I use the line of code as below, it just uses the same file (1.png) as the source every time.

<p align=center><img border="0" src="images/ads/1.png" id="randomImage"></p>

I do not understand what you mean by "But to modify the image simply address the image object in JS." How do I do that? I tried changing the code to
<p align=center><img border="0" src="random_Image()" id="randomImage"></p>
This did not work. I get no image at all. Pardon my lack of understanding, but as I said I am new at this. Still, I do not know how to get HTML or the web page to recognize the file path to another file randomly selected. There are three files named 1.png, 2.png, and 3.png in the ads folder. I want them randomly selected for display. As the user clicks refresh, the image would/could change.

Thanks again for your help!
 
Upvote 0 Downvote
There can only be one onload event, however that event can have any number of functions or actions inside to be run.

Stick the function inside the onload event next to your other function, just separate them by semi colons.

Code: 
<body onload="[red]preloadImages();[/red] random_image();">

They get run in the order they appear.

Js is all about objects. To change the image src, you access the image object and change its src property.

Code: 
[green]//Your number randomizer[/green]
var randNum = Math.ceil(Math.random()*3);
[green]//Get the Image object to access by using its given ID[/green]
var myImage=document.getElementById('randomImage');
[green]//use the image object to change its src property by combining the random number to create the name of the file to load[/green]
myImage.src="images/ads/"+ randNum + ".png";


When run, this automatically changes the src of the image in question to the random image. Should there be any issues, or the browser used to open this does not support Javascript or has it turned off for any reason, the image has a base source to display (marked in blue below), rather than leaving a hole where an image should be.

Code: 
<img border="0" src="[blue]images/ads/1.png[/blue]" id="randomImage">


Also, its always a good idea to use your browser's error checker for JS. For Internet Explorer its the Yellow shield on the lower left side of the window. Double clicking it will bring up an error console with any JS errors should there be any. If there are no errors double clicking does nothing.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
I still do not get a random image to display. I believe I understand that the variable myImage.src is going to hold the path to the image (e.g., it might be "images/ads/1.png" or "images/ads/2.png" or "images/ads/3.png"). And I understand that the img tag src attribute will specify the source location of the image that will be displayed by the img tag.

But I still do not understand how to get the img src attribute to point to the variable myImage.src. I am back to my original question. How do I get HTML to display the image that is located in the source specified by the myImage.src variable? Right now, the only image that displays each time I refresh or load the page is the image specified in the src attribute in the img tag: <img border="0" src="images/ads/1.png" id="randomImage"> This is the tag that displays the image. It doesn't change.

BTW: I fixed the onload attribute in the body tag to match your example above.

Thanks for any help!
 
Upvote 0 Downvote
myImage.src is the src tag for your html image only accessed through Javascript. You use the document.getElementById function to get a reference to the image, and then access its properties One of which is its src attribute/tag.

It changes the actual src image to display the random image. Javascript however will not affect the actual src code of the page. It only affects the currently loaded code, the in-memory code if you will. Using the View source form the browser menu will still display the original source code.

Here's a full example:
Code: 
<html>
<head><title>Random Image</title>
<script type="text/javascript">
function random_image(){
var myImage=document.getElementById('randomImage');
var randNum = Math.ceil(Math.random()*4);
myImage.src="images/not/" + randNum + ".png"; 
}
</script>
</head>
<body onload="random_image();">
Hello
<img src='images/not/2.png' alt="Random Image" id="randomImage" style="border:2px solid gray; width:256px; height:256px;"/>
</body>
</html>
Works for me. Note that most ad-Blockers will automatically block images that have the word "ad" or "ads" in their path. As I was testing I happened to notice this in Firefox and Chrome, but not in IE since I have no ad-blocker in it.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
316
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
730
Mike Lewis
Mike Lewis
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
278
Rayj0000
Rayj0000
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
359
xwb
xwb
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
487
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top