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();

我还尝试通过为父<img src>添加ID来区分随机<img src>标记与页面内的其他<div>标记，然后尝试仅调用{{1}在那个ID里面，但没有成功。

HTML

<img>

的JavaScript

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

你有什么想法吗？

Answer 1

尝试这样的事情：

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>

Answer 2

我会以稍微不同的方式解决这个问题。

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();

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

2 个答案: