根据数据目标操作元素 onclick

Question

So I'm trying to make a button which toggles the visibility of a div element. But the approach would be getting the value of data-target of the button and manipulate the correspoding div element that has an id equal to the data-target value. I'm doing this so I could reuse the javascript function to different buttons that has their own corresponding div element to toggle visibility.

so far here is my html code

<header id="header">
    <div class="header">
        <div class="nav-container">
            <a href="{{ route('home') }}" class="nav-brand">
                <img src="{{ asset('logo_brandmark.png') }}" alt="logo_brandmark.png" class="nav-brandmark"><span class="nav-wordmark">{{ config('app.name', 'app name') }}</span>
            </a>
            <button class="btn btn-primary" data-target="navAuth" onclick="btnToggleVisibility(this)"><i class="fa fa-bars" aria-hidden="true"></i></button>
        </div>
        <div class="collapse" id="navAuth">
            <a href="{{ route('login') }}" class="auth-link btn btn-primary">{{ __('Login') }}</a>
            <a href="{{ route('register') }}" class="auth-link btn btn-info">{{ __('Register') }}</a>
        </div>
    </div>
</header>

and this is the external javascript

function btnToggleVisibility(obj) {
    var targetElement = obj.getAttribute('data-target');

    targetElement.classList.toggle('show');
}

window.btnToggleVisibility = btnToggleVisibility;

when I click on the button, it shows this error

Answer 1

you forgot the element that corresponds to the id value

function btnToggleVisibility(obj) {
    var targetElement = document.getElementById(obj.getAttribute('data-target'));

    targetElement.classList.toggle('show');
}

window.btnToggleVisibility = btnToggleVisibility;

Answer 2

You can also read data-* attribute values using the dataset property that is available on the element.

You could also restructure how you're going about this so that you're not defining or attaching the toggle directly on elements using the global onclick event handler. Might make future changes simpler for you if things are in a centralised location.

For example, you could achieve your outcome as follows:

// the CSS class we'll toggle
.hidden {
    visibility: hidden;
}

// the html
<button type="button" class="toggler" data-target="#div-1">Show/Hide</button>
<div class="hidden" id="div-1">
    <p>This is the content that will be toggled</p>
</div>

document.addEventListener('DOMContentLoaded', (e) => {
    // define the function that will toggle the targets visibility using the .hidden class
    function toggleTargetVisibility(e) {
        // get all elements that match the target data-* attribute value
        // there may or may not be more than one element
        let div = document.querySelectorAll(e.dataset.target);

        // toggle the .hidden class for each found element
        div.forEach(function(el) {
            el.classList.toggle('hidden');
        })
    }

    // get all elements that will be responsible for triggering the toggle function
    let togglers = document.querySelectorAll('.toggler');

    // attach the onclick event to each found toggler element
    togglers.forEach(function(toggler) {
        toggler.addEventListener('click', function(e) {
            toggleTargetVisibility(e.target);
        });
    })
})