试图根据前一个函数的结果显示图像答案

【问题标题】：Trying to get an image to show dependent on a result of a previous function试图根据前一个函数的结果显示图像
【发布时间】：2014-01-28 05:34:17
【问题描述】：

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

【问题讨论】：

你的意思是javascript没有Java
只是一个简短的评论，使用break 提前退出你的for 循环而不是操纵循环索引。
console.log(picData[i][1]) 在 for 循环中。您在控制台中看到了什么？

标签： javascript html list random

【解决方案1】：

将您的 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;

这更具可读性，让您更清楚您实际在做什么。

【讨论】：

我建议使用更有意义的名称，例如 pick_random_image 而不是 MyFunction。根据 OP 所说，现在似乎是学习正确命名重要性的好时机:)。