CODEWITHSUNDEEP
javascriptjqueryhtml
Dante
Dante

Reputation: 5

In what order do these javascript functions run?

I have a button that adds 1 to a variable, but I want to hide the button after a user clicks it to stop them from adding more than one. The button either doesn't hide or it doesn't add one. Please Help. I have tried a few things but nothing is working, its the same problem, either one or the other works but never both.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript"></script>
    <script>   
  var num = 1;
  window.addEventListener("load", function() { // on page loade
    document.getElementById("join").addEventListener("click", function(event) {
      num++;
      show()
    })
    show(); // first time
  })
  const pad = (num, howMany, what) => (Array(howMany).join(what) + num).slice(-howMany);

  function show() {
    document.getElementById('followers').innerHTML = pad(num, 10, "0")
  }

  </script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
    $(".btn1").click(function(){
      $(this).hide();
    });
  });
  </script>


</head>
<body>
  <div class="counter-wrap">
  <div id="followers" class="counter">0,000</div>
  <div class="measure-wrap">
    <span class="text-uppercase letter-spacing" style="top: 4px;">People</span>
  </div>
</div>
<div id="idid">
TEst
<p>This is a paragraph.</p>
</div>
<button id="btn" class="button button2 btn1">Hide</button>
</body>
<style type="text/css">

  .button {
      opacity: 1;
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 25%;
      border-radius: 30px;
        text-align: center;
        text-decoration: none;
        background-color: #1D1D1D;
        border: none;
        color: white;
        padding: 15px 42px;
        font-size: 25px;
        cursor: pointer;
        outline: none;
    }
.button2 {
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    }
.button:active {
        background-color: #080808;
      box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
      transform: translateY(4px);
    }
.counter-wrap {
    text-align: center;
    padding: .75rem 2rem 1.25rem;
    display: inline-block;
    margin: 0 auto;
    background: url(../images/counter-starburst-blue.svg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 70px auto;
    width: 100%;
}
*, ::after, ::before {
    box-sizing: border-box;
}
.letter-spacing {
    letter-spacing: 2px;
}
.text-uppercase {
    text-transform: uppercase!important;
    font-family: Montserrat,sans-serif;
    color: #4d4f54;
}
.counter {
    display: inline-block;
    margin: 1.25rem .75rem .25rem .75rem;
    font-size: 2rem;
    line-height: .875;
    font-weight: 900;
    color: #273654;
}

</style>
</html>

Upvotes: 0

Views: 83

Answers (1)

giraffesyo
giraffesyo

Reputation: 5352

You aren't selecting an element that you have on the page. Using the querySelector method you can select the first element that matches the selector you provide. 

$(document).ready(function() {
  $(".btn1").click(function() {
    $(this).hide();
  });
});

var num = 1;
window.addEventListener("load", function() { // on page loade
  document.querySelector(".btn1").addEventListener("click", function(event) {
    num++;
    show()
  })
  show(); // first time
})
const pad = (num, howMany, what) => (Array(howMany).join(what) + num).slice(-howMany);

function show() {
  document.getElementById('followers').innerHTML = pad(num, 10, "0")
}
.button {
  opacity: 1;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 25%;
  border-radius: 30px;
  text-align: center;
  text-decoration: none;
  background-color: #1D1D1D;
  border: none;
  color: white;
  padding: 15px 42px;
  font-size: 25px;
  cursor: pointer;
  outline: none;
}

.button2 {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.button:active {
  background-color: #080808;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transform: translateY(4px);
}

.counter-wrap {
  text-align: center;
  padding: .75rem 2rem 1.25rem;
  display: inline-block;
  margin: 0 auto;
  background: url(../images/counter-starburst-blue.svg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 70px auto;
  width: 100%;
}

*,
 ::after,
 ::before {
  box-sizing: border-box;
}

.letter-spacing {
  letter-spacing: 2px;
}

.text-uppercase {
  text-transform: uppercase!important;
  font-family: Montserrat, sans-serif;
  color: #4d4f54;
}

.counter {
  display: inline-block;
  margin: 1.25rem .75rem .25rem .75rem;
  font-size: 2rem;
  line-height: .875;
  font-weight: 900;
  color: #273654;
}
<html>

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

<body>
  <div class="counter-wrap">
    <div id="followers" class="counter">0,000</div>
    <div class="measure-wrap">
      <span class="text-uppercase letter-spacing" style="top: 4px;">People</span>
    </div>
  </div>
  <div id="idid">
    TEst
    <p>This is a paragraph.</p>
  </div>
  <button id="btn" class="button button2 btn1">Hide</button>
</body>

</html>

Upvotes: 1

Related Questions