JS onclick mobile alternative - onclick deprecated on iOS and Android too

The HTML onClick is deprecated, It still continues to work in all major browsers but still its considered as a bad practice. Its good practice to have all the different code family separated. Seperate out your javascript from the HTML inline scripts, The maintenance becomes easy. So try binding the event using Javascript like below.

document.getElementById("applyEvent").addEventListener("click", function(){
    document.getElementById('hidden-div').style.display = 'block';
    this.style.display = 'none';
});
.hidden-div {
  display: none;
}
<div class="aplplyevent">
  <input type="hidden" name="type" value="" />
  <div class="hidden-div" id="hidden-div">
    Here is my form that is displayd on click and the button APPLY EVENT will disappear!(As long as my form already has a button!)
  </div>
  <span style="display:block">
  <button id="applyEvent" class="btn btn-applyevent">APPLY EVENT</button></span>

Also using Jquery the code would be minimal.I personally recommend using Jquery because its Awesome. So using Jquery the same code can be rewritten as below.

$('#applyEvent').on('click',function(){
  $('#hidden-div').show();
  $(this).hide();
});

I think its better to use jQuery. This might get thing done.

Html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="aplplyevent">
  <input type="hidden" name="type" value="" />
  <div class="hidden-div" id="hidden-div">
    Here is my form that is displayd on click and the button APPLY EVENT will disappear!(As long as my form already has a button!)
  </div>
  <span style="display:block"><button class="btn btn-applyevent" id="buton">APPLY EVENT</button></span>

JS

$(document).ready(function(){
  $("#buton").on('click touchstart',function(){
    $(this).hide();
    $(".hidden-div").css("display","block");
  });
});

Tags:

Javascript