試圖讓圖像顯示依賴於以前的功能

的結果我非常新的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>

來源

2014-01-09 user3178070

您的意思是javascript沒有Java –

只是一個快速的評論，使用'break'來提早退出'for'循環，而不是操縱循環索引。 –

console.log（picData [i] [1]）在for循環中。你在控制檯中看到什麼？ –

更改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;

這是很多更具可讀性，並使其更加清楚你實際上在做什麼。

來源

2014-01-09 15:24:27

我建議使用更有意義的名稱，例如'pick_random_image'而不是'MyFunction'。根據OP的說法，現在似乎是瞭解正確命名的重要性的好時機:)。 –

@kuroineko：公平的一點。 –

試圖讓圖像顯示依賴於以前的功能

回答

相關問題