Решение вашей проблемы может состоять в том, чтобы написать три div, которые вы хотите полностью отобразить в js следующим образом:
const divs = [
"
<div id="one">
...
</div>
",
"<div id="two">
...
</div>
",
"<div id="three">
...
</div>
"
]
Использование вашего randomButton
randomButton.addEventListener("click", Randomizer, false);
Вы просто нужно установить innerHTML вашего результата div в соответствующий div массива divs:
function Randomizer() {
var resultHTML = divs[Math.floor(Math.random() * array.length)];
document.getElementById("#placeofresult").innerHTML(resultHTML);
}
Другое решение - установить стиль ваших divs для отображения none и отобразить только случайно выбранный div после нажмите кнопку
Ваш html:
<div id="placeofresult">
<div id="one" style="display:none">
...
</div>
<div id="two" style="display:none">
...
</div>
<div id="three" style="display:none">
...
</div>
</div>
Ваш рандомизатор:
function Randomizer() {
var array = [one, two, three];
// Set all divs to hidden
array.forEach(function(id){
document.getElementById(id).style.display = "none";
})
var result = array[Math.floor(Math.random() * array.length)];
document.getElementById(result).style.display = "block";
}