異なる要素に複数の配列を作成する

Question

ユーザーがボタンをクリックしてイメージを表示するサブミットボタンをクリックできるようにするアプリケーション内の関数を設定しようとしていますが、アレイから画像をランダムに選択します。

どうすればいいですか？バニラJavascriptを使用して

<div id='prefPage'> 
 

 
    <header id='header2pref'> 
 

 
    <div id='title2pref'>PREFERENCES</div> 
 
    
 
    </header> 
 

 
    <div id='body'> 
 
    <div id='leftAlign'> 
 
    <div id="foodpicloc"> 
 

 

 

 
    </div> 
 
      
 
      
 
      
 
    </div><button id='myBtn2'>SET PREFRENCES</button> 
 

 

 
     
 
    <div id='rightAlignPref'> 
 

 
    <div id=fixed> 
 

 
    <div> 
 
    
 
    <button id="button1">BURGER</button> 
 
    <button id="button2">HOTDOG</button> 
 

 
    </div> 
 
       
 
    </div> 
 

 
    </div> 
 

 
    </div> 
 

 
    </div> 
 

 

 

 
var button1 = document.getElementById("button1"); 
 
var button2 = document.getElementById("button2"); 
 

 
var preference = document.getElementById("preference"); 
 
var foodpic = document.getElementById("foodpiclocation"); 
 
var foodpic; 
 

 
button1.addEventListener('click', function() { 
 
    foodpicurl = 'burger.svg'; 
 
}); 
 

 
button2.addEventListener('click', function() { 
 
    foodpicurl = 'hotdog.svg'; 
 
}); 
 

 
preference.addEventListener('click', function() { 
 
    var foodpic = document.createElement('img'); 
 
    foodpic.src = foodpicurl; 
 

 
    foodpiclocation.innerHTML = ''; 
 
    foodpiclocation.appendChild(foodpic); 
 
});

Answer 1

クリーンソリューション。注：私はあなたのHTMLの最初にあなたのHTMLコード<div id="foodpicloc"><img id="foodpic"></div>にこれを追加することをお勧めします。イメージのsrcを変更すると、イメージが変更されるたびに新しいイメージ要素を追加するよりも素早くクリーンです。

あなたは素晴らしいことだ、あなたのHTMLコードを揃えることができるかどう

function mapClickToImage(imageSelector, updateBtnSelector, btnSectorToImageSrcMapping) { 

    var currentImageSrc = null; 
    var imageElement = document.querySelector(imageSelector); 
    for (var btnSelector in btnSectorToImageSrcMapping) { 

    var buttonElement = document.querySelector(btnSelector); 
    buttonElement.addEventListener('click', function() { 
    currentImageSrc = btnSectorToImageSrcMapping[btnSelector]; 
    }); 

    var updateButtonElement = document.querySelector(updateBtnSelector); 
    updateButtonElement.addEventListener('click', function() { 
    if (currentImageSrc) { 
     imageElement.src = currentImageSrc; 
    } 
    }); 
} 

使用

mapClickToImage('#foodpic', '#preference', { 
    '#button1': 'burger.svg', 
    '#button2': 'hotdog.svg' 
});