隨機圖像，刷新後隨機文本顯示

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>