Can’t manage to hide window using if on javascript

First of all a little background so that you guys don´t respond so harshly, I´ve been learning code for the past month and a half. I´ve been having trouble hiding a window that shows up if your browser language is not in English. I know there are other ways to go around it but I would like to know why it isn´t working, I just don´t want to give up on it and try to understand it. I want the window to disappear when I press the no button. HERE IS AN IMAGE OF THE WINDOW https://imgur.com/gallery/iTEX0I0 Here is the code:

var lang = navigator.language;
if ("" + lang == "es-US") {
  var div = document.getElementById("win");
}
var button = document.getElementById("buttonn")
buttonn.onclick = function() {
  var div = document.getElementById("win");
  if (div.style.display !== "none") {
    div.style.display = "none";
  }
}

<body>
  <div class="container">
    <div class="window" id="win">
      <div class="layover">
        <div class="h2">
          <h2>Oops!</h2>
        </div>
        <div class="yesandno">
          <figure class="yes">
            <button onclick="window.location.href= 'espanol.html';">Si</button>
          </figure>
          <figure class="no">
            <button onclick id="buttonn">No</button>
          </figure>
        </div>
        <div class="langmessage">
          Hemos detectado que el idioma de su ordenador se encuentra en español. ¿Le gustaría utilizar la versión en español de nuestro sitio web?
        </div>
      </div>
    </div>

Answer

I think there’s a typo on line 6, change buttonn to button, see if that works.
I have added the snippet that works fine, according to your need.

var button = document.getElementById("buttonn");
buttonn.onclick = function() {
	var div = document.getElementById("win");
    if (div.style.display !== "none") {
        div.style.display = "none";
    }
}

<!DOCTYPE html>
<html>
<body>

<button type="button" id="buttonn">No</button>
<div id='win' style="height: 200px; width: 200px; border: 1px solid black"></div>



</body>
</html>

Advertisement

Answer