个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我是 javascript 的新手，所以请非常温和并尽可能多地解释事情；)
我正在尝试创建一个按钮，该按钮将从列表中随机选择一个名称并显示该人的图像(如果您知道这是做什么用的，则为英雄)。
到目前为止，我有一个运行随机选择名称功能的按钮，我只是很难显示图像...
<html>
<body>
<button onclick="myFunction()">Random</button>
<script>
function myFunction()
{
var strings = ['Axe', 'Bane', 'Batrider' ];
var randomIndex = Math.floor(Math.random() * strings.length);
var randomString = strings[randomIndex];
document.write(' ' + randomString);
}
</script>
<script type="text/javascript">
var picData = [
['Axe','http://ponky.org/~ropedy/DC/icons/heroes/Axe.png'],
['Bane','http://ponky.org/~ropedy/DC/icons/heroes/Bane.png'],
['Batrider','http://ponky.org/~ropedy/DC/icons/heroes/Batrider.png']
];
window.onload=myFunction(){
var cookieValue = 'Axe';
for(i=0; i < picData.length; i++){
if(cookieValue == picData[i][0]) {
document.getElementById('imgCont').src = picData[i][1];
i=picData.length;
}
}
}
</script>
<div>
<img id="imgCont" src="" alt="" />
</div>
最佳答案
将您的 window.onload 更改为如下内容:
window.onload = function() {
myFunction();
// then the rest of your stuff to set the .src
}
但看起来您真正想要做的是将用于设置 .src 的内容移动到一个单独的函数中，以便您可以调用它来响应您的按钮点击。
类似于:
var picData = [
['Axe','http://ponky.org/~ropedy/DC/icons/heroes/Axe.png'],
['Bane','http://ponky.org/~ropedy/DC/icons/heroes/Bane.png'],
['Batrider','http://ponky.org/~ropedy/DC/icons/heroes/Batrider.png']
];
function myFunction()
{
var randomIndex = Math.floor(Math.random() * picData.length);
var randomString = picData[randomIndex][0];
document.write(' ' + randomString); // Note: I'd generally avoid document.write
document.getElementById('imgCont').src = picData[randomIndex][1];
}
现在，如果您想在首次加载时给您一个随机图像并在您每次单击按钮时给您一个随机图像，您可以从 onload 和 onclick 调用它。
为了便于阅读和维护代码，我还将用对象文字数组替换您的一个或多个数组:
var picData = [
{name:'Axe', imageUrl:'http://ponky.org/~ropedy/DC/icons/heroes/Axe.png'},
{name:'Bane', imageUrl:'http://ponky.org/~ropedy/DC/icons/heroes/Bane.png'},
{name:'Batrider', imageUrl:'http://ponky.org/~ropedy/DC/icons/heroes/Batrider.png'}
];
为什么？因为现在而不是:
picData[randomIndex][1];
我会写:
picData[randomIndex].imageUrl;
这更具可读性，让您更清楚地了解您实际在做什么。
关于javascript - 尝试根据先前函数的结果显示图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21024088/
24
4
0
我的应用将 SceneKit 内容的“页面”与图像和文本交替。当我从图像页面前进到新的 SceneKit 页面时，前一个 SceneKit 页面中的内容会短暂显示，然后被新内容替换。时髦。 我只使用一
我正在尝试处理(在 C# 中)包含一些数字数据的大型数据文件。给定一个整数数组，如何对其进行拆分/分组，以便如果下一个 n(两个或更多)是负数，则前一个 n 元素被分组。例如，在下面的数组中，应该使用
刚接触promises，研究过。所以我的代码和我的理解: sql.connect(config).then(function(connection) { return connection.req
目前我在 if (roobaf) block 中有一些代码，这取决于 foo 和 bar 是否为假。我可以在 block 内再次检查这些条件，但感觉像是不必要的代码重复。 if (foo) {
我是一名优秀的程序员,十分优秀！