Show and hide elements html and javascript

Question

I have two files one is the javascript and one is the HTML. and I want to show and hide an element but when I try this its won't work. Also, I use the latest JQuery and a chrome extension I also tried the inner HTML method and nothing.

function updateLabel() {
var x = true; // this is for the localstorage anternative
  if (x //localStorage.getItem("EnabledAllSites")) {
    $("#toggle").hide(0);
    $("#toggle_check").show(0);
    x = false; // this is for the localstorage anternative
  } else {
    $("#toggle").show(0);
    $("#toggle_check").hide(0);
  }
}
updateLabel();
function toggle() {
  /*var background = chrome.extension.getBackgroundPage();
  localStorage.setItem("EnabledAllSites", /* this is a boolean*///!background.enabled);
  updateLabel();
  /*chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.update(tabs[0].id, { url: tabs[0].url });
  });*/
}
$("#toggle").click(function () {
  toggle();
});

$("#toggle_check").click(function () {
  toggle();
});

 <body>
    <header style="display: flex; justify-content: space-between">
    <!--- this is what i want to hide and show --->
      <button
        style="
          background-color: none;
          border: none;
          width: 42px;
          font-size: 18px;
        "
        id="toggle_check"
      >
        <div>✅</div>
      </button>
<!--- this is what i want to hide and show --->
      <button
        style="
          background-color: none;
          border: none;
          width: 42px;
          font-size: 18px;
        "
        id="toggle"
      >
        <div>❌</div>
      </button>
    </header>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./popup.js"></script>

Just try; $(“toggle_check”).hide(); – oguzhancerit Dec 08 '20 at 14:43 — oguzhancerit, Dec 08 '20 at 14:43

AGE · Accepted Answer · 2020-12-08T15:36:56.917

You had a number of issues:

Bad comments which where interfering with the if statement, it clearly throws an error when you run the snippet. Check for errors please.
You have what seems to be over complicated logic for doing something that should be otherwise straight forwards. Try to consider the flow of your function calls and improve by simplifying.
Note the use of CSS, it is a powerful tool and you should leverage it.
Consider improving your naming convention which would provide more meaning to your logic. For that reason I have modified the name of the variables and functions.

Below is a snippet which improves on your logic and does not throw errors. You may proceed from here.

var checkmarkId = "#button_checkmark",
    closeId = "#button_close";
    
function showAndHide() {
    $(closeId).hide();
    $(checkmarkId).show();
}

$(checkmarkId).click(showAndHide);

$(closeId).click(showAndHide);

header {
  display: flex;
  justify-content: space-between;
}

#button_checkmark {
  background-color: none;
  border: none;
  font-size: 18px;
  width: 42px;
}

#button_close {
  background-color: none;
  border: none;
  font-size: 18px;
  width: 42px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <header>
        <!-- this is what i want to hide and show -->
        <button id="button_checkmark">
          <div>✅</div>
        </button>
        <!-- this is what I want to hide and show -->
        <button id="button_close">
          <div>❌</div>
        </button>
    </header>
</body>

Show and hide elements html and javascript

1 Answers1