Clicking on different elements in an array using JavaScript to toggle the visibility of a div

Question

Clicking on different elements in an array using JavaScript to toggle the visibility of a div

Here is a problem I've encountered. This code selects a random element from an array to hide/show a div by toggling it. The issue is that I want it to always open a new one while hiding the previous one with the same button click. Currently, it shows a new element but fails to hide the previous one.
It doesn't have to be randomly selected, but it must consistently open a new element while hiding the others. I'm a bit stuck on this and could use some guidance.

If you have any hints or suggestions, I would greatly appreciate your input. Thank you for your attention!

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";
                }
        }


    }

javascript arrays onclick

Answer 1

Answer №1

This piece of code provides a solution for your current task

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>

Answer 2

This piece of code provides a solution for your current task

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>

Answer 3

Answer №2

Until now, I have found this method to be effective in resolving my issue, although it does not involve using the array directly. This may pose challenges in terms of maintenance.
The approach involves modifying the div name by appending the final segment to it. I have hidden all the div elements in the CSS using display = none.

Thank you

document.getElementById("rojo").addEventListener("click", show);

function show (){

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

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

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

Answer 4

Until now, I have found this method to be effective in resolving my issue, although it does not involve using the array directly. This may pose challenges in terms of maintenance.
The approach involves modifying the div name by appending the final segment to it. I have hidden all the div elements in the CSS using display = none.

Thank you

document.getElementById("rojo").addEventListener("click", show);

function show (){

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

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

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

Clicking on different elements in an array using JavaScript to toggle the visibility of a div

Answer №1

Answer №2

Similar questions

"Implementing a function in React to update the state based on target name and value received from

Issue with React.js button functionality not functioning as expected

Shuffle the setInterval function: How to consistently rewrite with random intervals?

Getting React Developer Tools to Function with Webpack

Angular: Retrieving the Time Format from the Browser

Display a JavaScript object as a table in an HTML document using HTML elements

Combining and overriding two JavaScript objects in real time

Reduce the length of the text and display it upon hovering with the mouse

Is jQuery validation compatible with mobile phone numbers?

Adjust the checked state of the checkbox based on the outcome of the promise's data

Error message "Illegal string offset" encountered while using a foreach loop

Displaying the items in an array using the Arrays.toString() method

Issue with automatic form submission

Using Javascript to display or conceal a specific child element within a loop, based on which parent element has been clicked

Utilizing jQuery for manipulating href attributes

Issue with Ajax reload functions malfunctioning

Testing HTTP requests on a form click in Vue.js 2 - Let's see how

Count the number of times an iteration occurs in AngularJS/JavaScript

What is the best way to include the input object in a JSON array?

Prevent excessive clicking on a div element