這是一個代碼，我為一個隨機報價生成器，我想做一個類似的，但這次有圖像。我想在我的頁面上放一個資源，它會向你推薦一本書。你必須點擊一個按鈕，它會隨機顯示一本書的封面。
對于報價生成器，我是這樣做的:
HTML:
<div class="quotes">
<h1 class="quote-generator">Simple Quote Generator</h1>
<div id="quoteDisplay"></div>
<button onclick="newQuote()" class="button-quote">New Quote</button>
<script src="./js/quotes.js"></script>
</div>Java Script語言
var quotes = [
'One must always be careful of books,<br>and what is inside them,<br>for words have the power to change us.<br>—Cassandra Clare',
'Only the very weak-minded refuse to be<br>influenced by literature and poetry.<br>—Cassandra Clare',
'I am not afraid of storms,<br>for I am learning how to sail my ship.<br>—Louisa May Alcott',
'Nice things don\'t happen in storybooks.<br>Or when they do happen, something bad happens next.<br>Because otherwise the story would be boring, and no one would read it.<br>—Holly Black',
'You don\’t forget the face of the person who was your last hope.<br>—Suzanne Collins',
'You look best when you\'re you.<br>—Lynn Painter',
'“Everything\’s a game, Avery Grambs.<br>The only thing we get to decide in this life<br>is if we play to win.<br>—Jennifer Lynn Barnes',
'“Why do I have to tell a story?” I asked.<br>“Because if you don\’t tell the story,<br>someone else will tell it for you.”<br>—Jennifer Lynn Barnes',
'I mean, there\’s a reason all books end right after the couple gets together.<br>No one wants to keep reading long enough to see the happily ever after turn into an unhappily ever after. Right?<br>—Alex Light',
'Break my heart,<br>break it a thousand times,<br>it was only ever yours to break anyway.<br>—Kiera Cass',
]
function newQuote() {
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}我怎樣才能把變量引號中的引號變成圖像呢？
這可以像下面這樣實現(xiàn)。我稍微改進了邏輯，以確保同一本書不會被提供兩次。
請讓我知道這是否有幫助。
var images = [
'https://m.media-amazon.com/images/I/81jRqrKKObL._AC_UL800_FMwebp_QL65_.jpg',
'https://m.media-amazon.com/images/I/81JgX8VgZiL._AC_UL800_FMwebp_QL65_.jpg',
'https://m.media-amazon.com/images/I/71CBWHK035L._AC_UL800_FMwebp_QL65_.jpg',
'https://m.media-amazon.com/images/I/91pXKpUfGgL._AC_UL800_FMwebp_QL65_.jpg',
];
let lastBook = -1; // this is to prevent offering the same book twice
function newBook() {
let randomNumber;
do {
randomNumber = Math.floor(Math.random() * (images.length));
} while (randomNumber === lastBook);
lastBook = randomNumber;
document.getElementById('bookCover').src = images[randomNumber];
}<div class="quotes">
<h1 class="quote-generator">Simple Book Generator</h1>
<div id="quoteDisplay">
<img id="bookCover" style='width: 100px' src=''>
</div>
<button onclick="newBook()" class="button-quote">New Book</button>
<script src="./js/quotes.js"></script>
</div>將數(shù)組轉(zhuǎn)換為對象數(shù)組。所以你也可以在對象中存儲圖像。 請讓我知道這對你是否有效。
<div class="quotes">
<h1 class="quote-generator">Simple Quote Generator</h1>
<div >
<img src=""/>
<p id="quoteDisplay"></p>
</div>
<button onclick="newQuote()" class="button-quote">New Quote</button>
</div>
let quotes = [
{
data: `Only the very weak-minded refuse to be<br>influenced by literature and poetry.<br>—Cassandra Clare`,
img: '1.jpg'
},
{data:`I am not afraid of storms,<br>for I am learning how to sail my ship.<br>—Louisa May Alcott`,
img: '2.jpg'
},
{data:`Nice things don\'t happen in storybooks.<br>Or when they do happen, something bad happens next.<br>Because otherwise the story would be boring, and no one would read it.<br>—Holly Black`,
img: '3.jpg'
{data:`You don\’t forget the face of the person who was your last hope.<br>—Suzanne Collins`,
img: '4.jpg'
{data:`You look best when you\'re you.<br>—Lynn Painter`,
img: '5.jpg'
{data:`“Everything\’s a game, Avery Grambs.<br>The only thing we get to decide in this life<br>is if we play to win.<br>—Jennifer Lynn Barnes`,
img: '6.jpg'
{data: `“Why do I have to tell a story?” I asked.<br>“Because if you don\’t tell the story,<br>someone else will tell it for you.”<br>—Jennifer Lynn Barnes`,
img: '7.jpg'
{data: `I mean, there\’s a reason all books end right after the couple gets together.<br>No one wants to keep reading long enough to see the happily ever after turn into an unhappily ever after. Right?<br>—Alex Light`,
img: '8.jpg'
{data: `Break my heart,<br>break it a thousand times,<br>it was only ever yours to break anyway.<br>—Kiera Cass`,
img: '9.jpg'
}
];
function newQuote(){
let randomNumber = Math.floor(Math.random()*9);
const target = document.getElementById('quoteDisplay');
target.innerHTML = quotes[randomNumber].data;
document.getElementsByTagName('img')[0].src= quotes[randomNumber].img;
}