随机图像，刷新后随机文本显示

Question

我有这些语法来刷新浏览器后显示随机文本和图像。一切正常。请看一下。

的JavaScript

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.getElementsByTagName('img')[whichquote].style.display="block"; 
    document.getElementById('quote').innerHTML = quotes[whichquote]; 

} 
showquote(); 

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> 

CSS

.image { 
    display: none; 
} 

但后来，我增加了许多更<img scr.../>标签（未涉及到这个JavaScript的目的）在页面的不同位置，然后随机图像没有出现。

我尝试了一种不同的方法，将document.getElementById更改为document.getElementByClassName，如下面的语法，它不起作用。

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

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

} 
showquote(); 

然后，我尝试在每个<img..>标签添加一个id =“imgShow”

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

而不是document.getElementsByTagName，我如下更改为document.getElementById，但随机图像不显示，要么。

任何想法？

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

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

} 
showquote(); 

我也尝试通过添加ID父<div>区分随机<img src>标签与页面内的其他<img src>标签，然后试图调用只有<img>该ID里面，但没有成功。

HTML

<div id="quote"></div> 
<div id="RefreshImg"> 
    <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> 

的JavaScript

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

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

} 
showquote(); 

你有什么想法？

Answer 1

我会去一个稍微不同的方式。

HTML：

<div id='quote'></div> 
<img id='quote-img'> 
<!-- by giving the img tag an id, we can leave other img tags throughout 
    the document untouched when we set our random image --> 

JavsScript：

var quotes = [ 
    {img: "http://www.placehold.it/100x50&text=1", quote: "text1"}, 
    {img: "http://www.placehold.it/100x50&text=2", quote: "text2"}, 
    {img: "http://www.placehold.it/100x50&text=3", quote: "text3"}, 
    {img: "http://www.placehold.it/100x50&text=4", quote: "text4"} 
    /* 
     I've moved the quotes and matching images into objects inside an array 
     That way, we keep stuff neatly together, and it allows for a great deal 
     of flexibility when it comes to adding or removing stuff. 
    */ 
]; 

function showquote() { 
    var q = quotes.length; 
    // var whichquote=Math.round(Math.random()*(q-1));  // Logical error... 
    var whichquote=quote[Math.round(Math.random()*(q-1))]; // ... fixed. 

    /* 
     I've moved the quote selection logic into the showquote function. 
     Again, it allows for more flexibilty: now you could theoretically call 
     showquote multiple times (maybe through setTimeout for example) and 
     end up with a different random quote+image each time. 
    */ 

    document.getElementById('quote').innerHTML = whichquote.quote; 
    document.getElementById('quote-img').src = whichquote.img; 
}; 
showquote(); 

Answer 2

尝试这样：

var quotes = []; 
quotes[0] = "text1"; 
quotes[1] = "Text2"; 
quotes[2] = "text3"; 
quotes[3] = "text4"; 

var q = quotes.length; 
var whichquote = Math.floor(Math.random()*q); 

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

<div id="quote"></div> 
<div> 
<img id="img0" style="display:none;" src="http://www.placehold.it/100x50&text=1" /> 
<img id="img1" style="display:none;" src="http://www.placehold.it/100x50&text=2" /> 
<img id="img2" style="display:none;" src="http://www.placehold.it/100x50&text=3" /> 
<img id="img3" style="display:none;" src="http://www.placehold.it/100x50&text=4" /> 
</div>