Steps to create a custom function that can manage numerous onclick actions to toggle the visibility of a specific field

Question

Steps to create a custom function that can manage numerous onclick actions to toggle the visibility of a specific field

I'm relatively new to coding and JavaScript. I'm working on a basic webpage that involves showing and hiding parts of sentences for language learning purposes. Is there a way to create a single function that can show and hide the sentence when a button is clicked?

If I use document.getElementsByClassName() to get an array of buttons and iterate through them, I'm unsure how to connect them to one function that performs the showing and hiding functionality. I've seen examples using getElementById but I'm looking to achieve the same result with document.getElementsByClassName().

const a = document.getElementById("button1").addEventListener( "click" , function(){
  if(document.getElementById("para1").style.visibility === "hidden"){
    document.getElementById("para1").style.visibility = "visible";
  }else{
    document.getElementById("para1").style.visibility ="hidden";
  }

I've checked other questions related to this topic, but they seem too advanced for what I'm trying to accomplish. I understand this is basic stuff, but any guidance would be greatly appreciated.

I attempted the solution above as described, but I'm struggling to figure out how to connect one function to multiple buttons.

javascript function button

Answer 1

Answer №1

If you're looking to implement event bubbling, consider utilizing the mechanism explained in this resource: https://javascript.info/bubbling-and-capturing

Place the event on a top-level container
Determine the button triggered by the event
Retrieve the ID of the element to toggle
Toggle the visibility of the element

// Check out the code example here: https://jsfiddle.net/shiningfinger/b5uxcwpo/4/

const getControlElement = (element) => {
    if (
        element.tagName === "A" ||
        element.tagName === "BUTTON" ||
        (element.tagName === "INPUT" &&
            (element.type === "submit" || element.type === "button"))
    ) {
        return element;
    }

    const { parentElement } = element;
    if (!parentElement) return false;
    return getControlElement(parentElement);
};

document.addEventListener("click", (event) => {
    const controlElement = getControlElement(event.target);
    // Place element ID in data-toggling-element-id attribute
    const { togglingElementId } = controlElement.dataset;
    const togglingElement = document.getElementById(togglingElementId);

    if (!togglingElement) return;

    togglingElement.style.visibility =
        togglingElement.style.visibility !== "hidden" ? "hidden" : "visible";
});

Answer 2

If you're looking to implement event bubbling, consider utilizing the mechanism explained in this resource: https://javascript.info/bubbling-and-capturing

Place the event on a top-level container
Determine the button triggered by the event
Retrieve the ID of the element to toggle
Toggle the visibility of the element

// Check out the code example here: https://jsfiddle.net/shiningfinger/b5uxcwpo/4/

const getControlElement = (element) => {
    if (
        element.tagName === "A" ||
        element.tagName === "BUTTON" ||
        (element.tagName === "INPUT" &&
            (element.type === "submit" || element.type === "button"))
    ) {
        return element;
    }

    const { parentElement } = element;
    if (!parentElement) return false;
    return getControlElement(parentElement);
};

document.addEventListener("click", (event) => {
    const controlElement = getControlElement(event.target);
    // Place element ID in data-toggling-element-id attribute
    const { togglingElementId } = controlElement.dataset;
    const togglingElement = document.getElementById(togglingElementId);

    if (!togglingElement) return;

    togglingElement.style.visibility =
        togglingElement.style.visibility !== "hidden" ? "hidden" : "visible";
});

Steps to create a custom function that can manage numerous onclick actions to toggle the visibility of a specific field

Answer №1

Similar questions

Ways to show the existing value of a <select> in a label without altering the function

TypeScript and the Safety of Curried Functions

What is the best way to retrieve the name of a dynamic form in a Controller

Audio suddenly no longer working after transferring project to React

Exploring the secure synergy between Laravel 5.5 Passport client_secret and Vue JS authentication

Receiving and monitoring events triggered by a Vue component that was dynamically mounted

contenteditable -- Utilizing AngularJS to create a block element for the title only

Utilizing the Twitter API variable within ExpressJS while incorporating AngularJS

"Using Node.js for proxying requests and implementing OAuth authentication

Switch out single quotation marks and double quotation marks

Resizable dimensions for the dark mode switch

Formik's handleChange function is causing an error stating "TypeError: null is not an object (evaluating '_a.type')" specifically when used in conjunction with the onChange event in DateInput

Is it possible to nest Route components in react-router version 4.x?

Is Babel necessary for a Node.js server application, and what are the benefits of using it?

Having trouble displaying images in Express JS

Discovering whether the incoming request to an AngularJS application is a GET or POST request can be efficiently accomplished

Tips on Extracting Data from a JSON Object with an Embedded Array

I have implemented a code snippet that verifies if the incoming week aligns with the existing week, triggering an alert accordingly

Jump straight to the top of the page with just a click using the Google Maps Store Locator

When I run my app with the wxPython GUI I developed, the functions seem to not be executing as expected