Nrthugu

I'm trying to make a function in order to hide the boxes with their corresponded number, but I have no idea on how to do it. I tried to figure out how to do it, but every method I come up with ends up on an error.

I'm using jQuery library and Bootstrap.

CSS :

.random {

    width: 100 px;

    height: 100 px;

    background - color: lightgreen;

    margin: 30 px;

}

HTML :

<div class="container">

    <div class="row">

        <div class="col">

            <div class="container text-center">

                <div id="box_1" class="random">Box 1</div>

                <div id="box_2" class="random">Box 2</div>

                <div id="box_3" class="random">Box 3</div>

                <div id="box_4" class="random">Box 4</div>

                <div id="box_5" class="random">Box 5</div>

                <div id="box_6" class="random">Box 6</div>

                <div id="box_7" class="random">Box 7</div>

                <div id="box_8" class="random">Box 8</div>

                <div id="box_9" class="random">Box 9</div>

                <div id="box_10" class="random">Box 10</div>

            </div>

        </div>

        <div class="col">

            <button onclick="NumberFunction(Math.floor(Math.random() * 10) + 1)" class="mt-5 btn btn-outline-danger">Reveal a random box</button>

        </div>

    </div>

</div>

JavaScript :

$(document).ready(function() {

    $(".task_hidden").hide();

    var box_1 = $('#box_1');

    var box_2 = $('#box_2');

    var box_3 = $('#box_3');

    var box_4 = $('#box_4');

    var box_5 = $('#box_5');

    var box_6 = $('#box_6');

    var box_7 = $('#box_7');

    var box_8 = $('#box_8');

    var box_9 = $('#box_9');

    var box_10 = $('#box_10');

});



function NumberFunction(random) {

    console.log(random);

    if (random = 1) { box_1.hide(); }

    if (random = 2) { box_2.hide(); }

    if (random = 3) { box_3.hide(); }

    if (random = 4) { box_4.hide(); }

    if (random = 5) { box_5.hide(); }

}

Unlike other answers, with each click, a box will be deleted (this is sure to happen) but in other answers may be a few clicks to remove a box.

$(document).ready(function(){



    var listOfRemovedNumbers =;

    var lengthBoxs = $('[id^=box_]').length;



    function getRandomNumber(){

      do {

        var randomNumber = Math.floor(Math.random() * 10) + 1;

      } while(listOfRemovedNumbers.includes(randomNumber) );

      return randomNumber;

    }



    $('.btn').click(function(){

        var randomNumber = getRandomNumber();

        $('#box_'+randomNumber).remove();

        listOfRemovedNumbers.push(randomNumber);

        if ((listOfRemovedNumbers.length == lengthBoxs ))

          $('.btn').attr("disabled", "disabled").html('All Removed');

    })



})

$(document).ready(function(){

	

  var listOfRemovedNumbers =;

  var lengthBoxs = $('[id^=box_]').length;



  function getRandomNumber(){

    do {

      var randomNumber = Math.floor(Math.random() * 10) + 1;

      } while(listOfRemovedNumbers.includes(randomNumber) );

      return randomNumber;

    }



   $('.btn').click(function(){

      var randomNumber = getRandomNumber();

      $('#box_'+randomNumber).remove();

        listOfRemovedNumbers.push(randomNumber);

        if ((listOfRemovedNumbers.length == lengthBoxs ))

    	  $('.btn').attr("disabled", "disabled").html('All Boxs are Removed');

    })

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="container">

  <div class="row">

    <div class="col">

      <div class="container text-center">

        <div id="box_1" class="random">Box 1</div>

	    <div id="box_2" class="random">Box 2</div>

	    <div id="box_3" class="random">Box 3</div>

	    <div id="box_4" class="random">Box 4</div>

	    <div id="box_5" class="random">Box 5</div>

	    <div id="box_6" class="random">Box 6</div>

	    <div id="box_7" class="random">Box 7</div>

	    <div id="box_8" class="random">Box 8</div>

	    <div id="box_9" class="random">Box 9</div>

	    <div id="box_10" class="random">Box 10</div>

	  </div>

	</div>

	<div class="col">

	  <button class="mt-5 btn btn-outline-danger">Reveal a random box</button>

    </div>

  </div>

</div>

Your code was not working fine because you had declared variables box_1, box_2 inside the ready function which were not able outside it i.e. not available in NumberFunction function. Also, you were assigning variables in if rather than comparing. = is assignment and == or === is for comparison.

You can improve your code to following:

$(document).ready(function() {

  $(".task_hidden").hide();

});



function NumberFunction(random) {

  $("#box_" + random).hide();

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">

  <div class="row">

    <div class="col">



      <div class="container text-center">



        <div id="box_1" class="random">Box 1</div>

        <div id="box_2" class="random">Box 2</div>

        <div id="box_3" class="random">Box 3</div>

        <div id="box_4" class="random">Box 4</div>

        <div id="box_5" class="random">Box 5</div>

        <div id="box_6" class="random">Box 6</div>

        <div id="box_7" class="random">Box 7</div>

        <div id="box_8" class="random">Box 8</div>

        <div id="box_9" class="random">Box 9</div>

        <div id="box_10" class="random">Box 10</div>



      </div>



    </div>

    <div class="col">



      <button onclick="NumberFunction(Math.floor(Math.random() * 10) + 1)" class="mt-5 btn btn-outline-danger">Reveal a random box</button>

    </div>

  </div>

</div>