在不同的元素上创建多个数组

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就比添加新的图像元素更快更清晰。

定义

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' 
});