Question

182

How do I display randomly-chosen text with an associated image?

rated 0 times [ 189] [ 7] / answers: 1 / hits: 21961 / 11 Years ago, sat, july 13, 2013, 12:00:00

I'm a beginner web designer and I need to know how can I link one thing to another. The thing is that I'm making different quotes change every time the site refreshes.
And I need to do the same thing with images that are located in a different div tag. The reason I need to link them is because the image needs to coordinate with the quote.
For example: quote 0 with image 0.

Here is the javascript code:

var quotes=new Array();

quotes[0] = text1;

quotes[1] = Text2;

quotes[2] = text3;

quotes[3] = text4;



var q = quotes.length;

var whichquote=Math.round(Math.random()*(q-1));

function showquote(){document.write(quotes[whichquote]);}

showquote();

And this is the code that is located the javascript text:

<script language=javascript type=text/javascript src=quotes.js></script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

vanessag

Add To Favorites

Follow

Total Points: 170

Total Questions: 98

Total Answers: 88

Location: El Salvador

Member since Sun, Sep 12, 2021

3 Years ago

answered 11 Years ago jesseh · Accepted Answer

Some notes on that code. Don't take these the wrong way, you're new to JavaScript! Everyone was once, having people point things out is one way we learn.

There's almost never any reason to use new Array. Use an array literal. In this case:
```
var quotes = [

    text1,

    Text2,

    text3,

    text4

];
```

The language attribute was deprecated in the 90's, and the default value of type on script is text/javascript. So just <script src=...></script> is all you need.

Your random number is wrong. Math.random returns a number from 0 (inclusive) to 1 (exclusive), so you want to just multiply by the number of images, not the number minus one.

document.write is best avoided. There's very, very little reason to use it in modern web programming.

Here's one way to approach doing what you described: Live Example | Live Source

(You have to refresh it a lot, because it only has two entries, so you have pretty good odds of seeing the same one.)

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>Random Text Plus Image</title>

</head>

<body>

  <div id=quote></div>

  <script>

    (function() {

      var quotes = [

        {

          text: text1,

          img:  http://i.stack.imgur.com/FqBE6.jpg?s=32&g=1

        },

        {

          text: text2,

          img:  https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG,

        }

      ];

      var quote = quotes[Math.floor(Math.random() * quotes.length)];

      document.getElementById(quote).innerHTML =

        '<p>' + quote.text + '</p>' +

        '<img src=' + quote.img + '>';

    })();

  </script>

</body>

</html>

What I did there:

I output an element, the <div id=quote></div>, to hold the quote and image. This is instead of the document.write.

I used an array literal, but my array literal contains object literals (the {...} things with text: text1 and such in them). So my array contains objects, where each object has the properties text (the text of that quote) and img (the URL of the image to use).

I fixed the random thing.

When outputting the text (which I assume is HTML markup) and the image, I do that by setting innerHTML on the quote div I output above the code.

I put all of my code in an enclosing function that I call immediately. This prevents creating any global variables.

Hope this helps.