Button on click get div element with it´s child elements addressed. The function should be required inside the div and not be toggled

Question

Here is the html div box which should be manipulated. The class "feedback-box-no" should be shown when clicked button "no".

 <div class="button-position">
          <input type="button" class="button-style-1" value="JA?" id="buttonYes">
          <input type="button" class="button-style-2" value="NEIN?" id="buttonNo">
          <div class="feedback-box-no">
            <p class="feedback-text">
             This is the text of the feedback div!
            </p>
          </div>
        </div>

The div style is hidden by default:

.feedback-box-no {
    position: absolute;
    width: 320px;
    height: 140px;
    left: 29px;
    top: 104px;
    background-color: #597359;
    border-radius: 15px;
    visibility: hidden;

    /* -webkit-animation: feedback-no 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    -moz-animation: feedback-no 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    -ms-animation: feedback-no 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    -o-animation: feedback-no 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation: feedback-no 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-iteration-count: 1; */
}

/* @keyframes feedback-no {
    from {
        top: 1500px;
        visibility: visible;
    }
    to {
        top: 104px;
        visibility: visible;
    }
} */

The JS:

The event target manipulation only worked by changing the button style element. But I want the new div to be shown. Till here I got any console error: Which says: Cannot read properties of null (reading 'style') at HTMLInputElement.

const clickedNo = document.querySelector('#buttonNo');

clickedNo.addEventListener('click', (event, eventChange) => {

    const event = document.createEvent('HTMLEvents');
    event.initEvent(eventChange, true, false); 
    const getFeedback = event.querySelector('feedback-box-no');
    getFeedback = event.currentTarget;
    getFeedback.style.visibility = "visible";

});

Answer 1

one way to do it

 const toggleVisibilityByClass = (elementClass) => { const elements = document.querySelectorAll(`.${elementClass}`); elements.forEach(el => { el.style.visibility = 'visible'; }); }

 .feedback-box-no { position: absolute; width: 320px; height: 140px; left: 29px; top: 104px; background-color: #597359; border-radius: 15px; visibility: hidden; /* -webkit-animation: feedback-no 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; -moz-animation: feedback-no 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; -ms-animation: feedback-no 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; -o-animation: feedback-no 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation: feedback-no 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation-iteration-count: 1; */ } /* @keyframes feedback-no { from { top: 1500px; visibility: visible; } to { top: 104px; visibility: visible; } } */

 <div class="button-position"> <input type="button" class="button-style-1" value="JA?" id="buttonYes" > <input type="button" class="button-style-2" value="NEIN?" id="buttonNo" onclick="toggleVisibilityByClass(`feedback-box-no`)"> <div class="feedback-box-no"> <p class="feedback-text"> This is the text of the feedback div! </p> </div> </div>

Answer 2

const clickedNo = document.querySelector('#buttonNo');

clickedNo.addEventListener('click', (eventChange) => {

    const elements = document.querySelectorAll('.feedback-box-no');
    elements.forEach(el => {
        el.style.visibility = 'visible';
    });

});