Button on click get div element with it´s child elements addressed. The function should be required-CodePudding

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

 <div >
          <input type="button"  value="JA?" id="buttonYes">
          <input type="button"  value="NEIN?" id="buttonNo">
          <div >
            <p >
             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";

});

CodePudding user response：

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 >
    <input type="button"  value="JA?" id="buttonYes" >
    <input type="button"  value="NEIN?" id="buttonNo" onclick="toggleVisibilityByClass(`feedback-box-no`)">
    <div >
        <p >
            This is the text of the feedback div!
        </p>
    </div>
</div>

CodePudding user response：

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

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

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

});