По нажатию кнопки между элементами массива JS, чтобы показать и скрыть div

Question

все Этот код выбирает случайный элемент в массиве, который будет скрывать / показывать div.Дело в том, что мне нужно, чтобы он всегда открывал новый и скрывал предыдущий с той же кнопкой.Я сделал, что он показывает новый, но он не скрывает предыдущий.
Не обязательно быть случайным, но он должен всегда открывать новый элемент и скрывать их.Я немного застрял

Буду признателен за подсказки.Большое спасибо за ваше внимание

document.getElementById("rojo").addEventListener("click", show);
var secret =  ["h-ma-1","h-ma-2","h-ma-3" ];
var s = secret[RndInt(0, 2)];

function RndInt(min, max) {
return Math.floor(Math.random() * (max - min+ 1) ) + min;}


function show (){

        for ( var i=0 ; i<=0 ; i++ ){
                if 
            (document.getElementById(s).style.display == "block")
                {
            document.getElementById(s).style.display = "none";
                }
                else 
                {
            document.getElementById(s).style.display = "block";
                }
        }


    }

Answer 1

Пока это помогает мне решить мою проблему, но это не делается с помощью самого массива.И поэтому может быть трудно поддерживать в обслуживании
Это делается путем непосредственного изменения имени div путем добавления последней части имени.Я просто поместил все div в css как diplay = none.

Спасибо

document.getElementById ("rojo"). AddEventListener ("клик", показать);

function show (){

        for ( var i=-0 ; i<12 ; i++ ){
                s="h-ma-"+i;

        document.getElementById(s).style.display = "none";

        }
        document.getElementById("h-ma-"+Math.ceil(Math.random()*11)).style.display = "block";

                }

Answer 2

Этот код может помочь вам с вашей задачей

document.getElementById("rojo").addEventListener("click", show);
var secret = ["h-ma-1", "h-ma-2", "h-ma-3"];
var s = secret[RndInt(0, 2)];

const DEFAULT_VISIBILITY = 'block';

const mapToggle = {
  'block': 'none',
  'none': 'block'
};

function getCurrentVisibility(node) {
  return node.style.display;
}

function getElementFromId(id) {
  return document.getElementById(id);
}

function toggleVisibility(node) {
  node.style.display = mapToggle[getCurrentVisibility(node) ||  DEFAULT_VISIBILITY];
}

function toggle(ids) {
  ids.forEach((id) => {
    var node = getElementFromId(id);
    if (node) {
      toggleVisibility(node);
    }
  });
}

function RndInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}


function show() {
  toggle(secret);
}

<div id="h-ma-1">h-ma-1</div>

<div id="h-ma-2">h-ma-2</div>

<div id="h-ma-3">h-ma-3</div>

<button id="rojo">toggle</button>