javascripthtmlonclick

Can I shorten a lot of OnClick into shorter code?


I am a beginner in javascript and I have this code This code shows the user to add new input but I think I can make it shorter but I can't find the right way?

showCurs.onclick = function() {
          curses.style.display="block";

        }
        hideCurs.onclick = function() {
          curses.style.display="none";
        }

        showaddcurs.onclick = function() {
          addc.style.display="block";
        }
        hideaddcurs.onclick= function() {
          addc.style.display="none";}
        
  
        showExp.onclick = function() {
        exp.style.display="block";
      }
        showaddexp.onclick = function() {
      adde.style.display="block";
      }
        
        hidexp.onclick = function() {
        exp.style.display="none";
        }

Solution

  • There are lots of ways to change your code to help eliminate duplicate parts. For example:

    [
      [showCurs, curses, "block"],
      [hideCurs, curses, "none"],
      [showaddcurs, addc, "block"],
      [hideaddcurs, addc, "none"],
      [showExp, exp, "block"],
      [showaddexp, adde, "block"],
      [hidexp, exp, "none"]
    ].forEach(([click, target, effect]) => {
      click.onclick = () => {
        target.style.display = effect;
      };
    });