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

admin管理员组

文章数量:1344328

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>

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>

• javascript
• quotes
• dynamic-linking
• page-refresh

Share Improve this question Follow edited Jul 13, 2013 at 17:45 T.J. Crowder 1.1m200200 gold badges2k2k silver badges1.9k1.9k bronze badges asked Jul 13, 2013 at 17:25 nastiarknastiark 311 gold badge11 silver badge44 bronze badges 5

• It doesn't sound like you need link JavaScript to JavaScript. It sounds like you have to coordinate the JavaScript and whatever it is generating the images. – T.J. Crowder Commented Jul 13, 2013 at 17:29
• Thank you! And do you know how can I do that? – nastiark Commented Jul 13, 2013 at 17:30
• FYI (because you're new at JavaScript): There's almost never any reason to use new Array. Use an array literal. In this case: pastie/8137855 Separately, 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. Sorry, and your random number is wrong. You want =Math.round(Math.random() * q), not q-1. – T.J. Crowder Commented Jul 13, 2013 at 17:30
• @ user: It's impossible to say, you haven't shown anything telling us how the images are chosen. – T.J. Crowder Commented Jul 13, 2013 at 17:31
• The thing is that I still don't know how can I put the images, and I can't find a tutorial. – nastiark Commented Jul 13, 2013 at 17:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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.

1. There's almost never any reason to use new Array. Use an array literal. In this case:

   var quotes = [
       "text1",
       "Text2",
       "text3",
       "text4"
   ];
   

2. 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.

3. 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.

4. 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:  "https://i.sstatic/FqBE6.jpg?s=32&g=1"
        },
        {
          text: "text2",
          img:  "https://www.gravatar./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.

Assuming you have something like the following html:

<div id="quote"></div>
<div>
    <img class="image" src="http://www.placehold.it/100x50&text=1" />
    <img class="image" src="http://www.placehold.it/100x50&text=2" />
    <img class="image" src="http://www.placehold.it/100x50&text=3" />
    <img class="image" src="http://www.placehold.it/100x50&text=4" />
</div>

and css

.image {
   display: none;
}

Then you need to do something like this in your showquote function:

function showquote(){
   document.getElementById('quote').innerHTML = quotes[whichquote];
   document.getElementsByTagName('img')[whichquote].style.display="block";
}

See the fiddle here: http://jsfiddle/fYPY7/

本文标签： javascriptHow do I display randomlychosen text with an associated imageStack Overflow