Question

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

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

更具可读性，让您更清楚自己的实际行动。

尝试根据先前函数的结果显示图像

1 个答案: