在JavaScript中实现图像
在JavaScript中实现图像
提问于 2019-07-21 22:58:12
我正在摆弄JS，并制作了一个用于练习的随机单词生成器(foodinator)。我如何使用它来实现镜像？碟子1应该始终与图像1一起显示，碟子2与图像2一起显示，依此类推。
HTML (index.html)
<div class="wrapper">
<div class="title">
<h1><u>What are you going to eat?</u></h1>
</div>
<div id="foodDisplay">
</div>
<div class="button">
<button onclick="newFood()">
New Dish!
</button>
</div>
</div>JavaScript (scripts.js)
var foods = [
'Dish 1',
'Dish 2',
'Dish 3',
'Dish 4',
'Dish 5',
'Dish 6',
'Dish 7',
'Dish 8',
'Dish 9',
'Dish 10'
];
function newFood() {
var randomNumber = Math.floor(Math.random() * (foods.length));
document.getElementById('foodDisplay').innerHTML = foods[randomNumber];
}当点击按钮时，它会从列表中随机挑选一道菜，这是可行的。我希望它能显示出正确的图像。我知道这是非常基础的知识，我希望有人能给我指引正确的方向。提前谢谢。
回答 2
Stack Overflow用户
发布于 2019-07-21 23:10:38
提示:创建一个具有两个值的对象，就像一个( key & value )结构。
var foods = [
{name: 'Dish 1', image: 'image_dish_1.jpg'},
.
.
.
];我们的函数需要稍微修改一下：( ES6 )
function newFood() {
var randomNumber = Math.floor(Math.random() * (foods.length));
var food = foods[randomNumber];
document.getElementById('foodDisplay').innerHTML = `
<img alt="${food.name}" src="${food.image}" />
`;
}我们的函数需要稍微修改一下：( ES5 )
function newFood() {
var randomNumber = Math.floor(Math.random() * (foods.length));
var food = foods[randomNumber];
var imgElement = document.createElement('img');
imgElement.src = food.image;
imgElement.alt = food.name;
document.getElementById('foodDisplay').innerHTML = imgElement.outerHTML;
}Stack Overflow用户
发布于 2019-07-22 14:03:42
我使用了占位符作为图像的路径，但您可以根据自己的情况更改它。它应该会让你了解如何在你的div中插入图片。
var foods = [
'Dish 1',
'Dish 2',
'Dish 3',
'Dish 4',
'Dish 5',
'Dish 6',
'Dish 7',
'Dish 8',
'Dish 9',
'Dish 10'
];
function newFood() {
var randomNumber = Math.floor(Math.random() * (foods.length));
var img = '<img src="//lorempixel.com/400/200/food/' + foods[randomNumber] + '/" alt="' + foods[randomNumber] + '">';
document.getElementById('foodDisplay').innerHTML = img;
}<div class="wrapper">
<div class="title">
<h1><u>What are you going to eat?</u></h1>
</div>
<div id="foodDisplay"></div>
<div class="button">
<button onclick="newFood()">
New Dish!
</button>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57134346
复制相关文章
相似问题