How i make an element to be shown or not?-CodePudding

anchorArrows is an element that if I click the checkbox it must be shown and if it's not checked it must be hidden. The classList hidden and show are CSS classes with opacity 0 and 1

    let q = document.getElementById("Q").value;
    let q2 = document.getElementById("q2").value;
    const anchorArrows = document.getElementById("anchor");
    
    if((chkQ.checked == true) && (chkQ2.checked == false)){

        anchorArrows.classList.add("show");
        anchorArrows.classList.remove("hidden");
        if(q > 0){
            flechas(0,"x");
        }else{
            flechas(180,"x");
        }
    }else{
        anchorArrows.classList.remove("show");
        anchorArrows.classList.add("hidden");
    }

    if((chkQ2.checked == true) && (chkQ.checked == false)){
        anchorArrows.classList.add("show");
        anchorArrows.classList.remove("hidden");
        if(q > 0){
            flechas(0,"y");
        }else{
            flechas(180,"y");
        }
    }else{
        anchorArrows.classList.remove("show");
        anchorArrows.classList.add("hidden");
    }

CSS:

    .hidden{
        opacity: 0;
    }

    .show{
        opacity: 1;
    }

CodePudding user response：

You need to use else if and one else. The issue you have is the first if can be true, but the second else will wipe away the class.

if (chkQ.checked && !chkQ2.checked) {
  anchorArrows.classList.add("show");
  anchorArrows.classList.remove("hidden");
  if (q > 0) {
    flechas(0, "x");
  } else {
    flechas(180, "x");
  }
} else if (chkQ2.checked && !chkQ.checked) {
  anchorArrows.classList.add("show");
  anchorArrows.classList.remove("hidden");
  if (q > 0) {
    flechas(0, "y");
  } else {
    flechas(180, "y");
  }
} else {
  anchorArrows.classList.remove("show");
  anchorArrows.classList.add("hidden");
}

And to get rid of repeated code

let isValid = false;

if ((!chkQ.checked && chkQ2.checked) || (chkQ.checked && !chkQ2.checked)) {
  isValid = true;
  const num =  q > 0 ? 0 : 180;
  const code = chkQ.checked ? "x" : "y";
  flechas(num, code);
} 

anchorArrows.classList.toggle("show", isValid);
anchorArrows.classList.toggle("hidden", !isValid);

CodePudding user response：

Personally, I wouldn't use classes to change opacity, as multiple variables can affect the outcome of it. Instead, I would put opacity in the original Id/Class in the CSS, and use .style.opacity to change it.

For Example:

CSS:
#box {
     opacity:1;
}

HTML:
<div id="box"></div>

Javascript:
document.getElementById('box').style.opacity = .5;

In your code, it would be anchorArrows.style.opacity = 1; for show, and anchorArrows.style.opacity = 0; for hidden.