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

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

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

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

HTML

但是后来，我在页面中添加了更多的

标记和其他

标记，方法是为父

添加一个ID，然后尝试仅调用该ID中的

，但没有成功

HTML

---

你有什么想法吗？

试试这样的方法：

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

var quotes=[]；
引号[0]=“text1”；
引号[1]=“Text2”；
引号[2]=“text3”；
引号[3]=“text4”；
var q=quotes.length；
var whichquote=Math.floor（Math.random（）*q）；
函数showquote（）{
document.getElementById（'img'+whichquote.）.style.display=''；
document.getElementById（'quote'）.innerHTML=quotes[whichquote]；
}
showquote（）；

我会用一种稍微不同的方式来处理它

HTML:

---

类名似乎是最好的选择。请注意，您提供的代码将

getElementByClass

放在我认为您需要的

GetElementsByCassName

位置，顺便说一句，每个元素都应该有一个唯一的ID。如果您像

['text1'、'text2'、'text3'、'text4']

那样创建数组，则可以节省空间。这几乎不是一个更好的解决方案。每当你添加更多的引号时，你就必须添加和id。你可以使用一个普通类和按索引定位元素，使其更加灵活。这不是更好，但我认为他/她在寻找“简单且类似于我的”，而不是“最佳且干净”。谢谢你，Eldorado。我试图替换你的代码，但什么都没有显示！我想知道为什么？哦，我忘了在showquote（）函数中编辑元素ID-将其替换为getElementById（'img'+whichquote），它应该可以工作。谢谢你，Eldorado。但是对不起，它不起作用。在

标记中，我们有id=“img0”、id=“img1”、id=“img2”和id=“img3”，但是javascript调用id-“img”作为代码：getElementById（'img'），我认为它不会匹配谢谢你，Andrew！我试图替换您的代码，但是

quote img

未定义，

quote

也未定义。这意味着没有图像和文本显示。我想知道为什么只有在加载文档后才调用showquote（），对吗？如果HTML解析器还没有机会看到div和img标记，则document.getElementById（）调用将失败……是的，这是正确的，我相信这是一种正确的方法，但是缺少了一些东西。找到了。更改

var，其中quote=Math.round（Math.random（）*（q-1））

to

var，其中quote=quotes[Math.round（Math.random（）*（q-1））。加分：解释错误是什么以及如何修复。宾果。非常感谢你！
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();

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

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

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

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

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>

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

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