12

I have this in HTML

<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" onclick="getElementById('hidden-div').style.display = 'block'; this.style.display = 'none'">APPLY EVENT</button></span>

This in CSS:

.hidden-div {
  display: none;
} 

On desktop devices works fine but on iOS and Adroid my main button "APPLY EVENT" do not disappear and I have 2 buttons, the main button(who stop to dissapear) and the form button.

iOS since v8 and now Android too seems to stop support for "onclick".

Can someone please help me? I'm beginner in JS!

JSFiddle Here

4
  • Not for nuthin, but I don't think it's deprecated. It's just considered "bad practice".
    – durbnpoisn
    Commented Mar 13, 2016 at 13:55
  • @Reddy - I do not know JQuery! I need to implement this function on my website, a WordPress CMS. Any solution is appreciated!
    – Marius
    Commented Mar 13, 2016 at 13:58
  • @mariusfv I understand. I gave my answer, Let me know if it helps Commented Mar 13, 2016 at 14:07
  • @Teo Mihaila, what are hoping to find from this? When I came here I was hoping for two solutions. First with attaching the event listener to the DOM object and the second using jQuery to do the same. Both answers can be found here. Also the onclick is not really depreciated. So why have you placed this bounty?
    – TheChetan
    Commented Jun 4, 2019 at 17:27

3 Answers 3

7

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();
});
2
  • 3
    Where is it stated that "onclick" is deprecated? I would appreciate a link - I can't find anything. Thx. Commented Apr 14, 2017 at 21:53
  • @HumbleBeginnings deprecated from usage as per coding standards. But still works in all major browsers. Sorry for the confusion.. Commented Apr 19, 2017 at 13:38
4
+50

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");
  });
});
1
  • Thanks @bibash-adhikari your code works! For this who want to use in WordPress should replace in JS first $ with jQuery.
    – Marius
    Commented Mar 14, 2016 at 10:48
3

I switched to using an anchor tag instead of buttons with a javascript function in the href attribute. Like this:

<a href="javascript: myFunction();" style=" border: #000000 1px solid; padding: 2px; text-decoration: none; background: #FF0000; color: #FFFFFF; "> click this button </a>

Its supported on all browsers I checked i.e PC IE, PC Firefox, PC Chrome, and mobile browsers both on IOS and Android. The style tag is just to make the link look like a button. The reason I did this is because I had multiple buttons on my webpage, all generated on the fly, and generating javascript code to register each one seemed like throwing a lot of extra code to the browser.

P.S my HTML code looked like below:

<script type="text/javascript">
function myFunction(a){
// do something
}
</script>

<div id="a1">
<p> text here </p>
<a href="javascript: myFunction('a1')"> Button text </a>
</div>

<div id="a2">
<p> text here </p>
<a href="javascript: myFunction('a2')"> Button text </a>
</div>

<div id="a3">
<p> text here </p>
<a href="javascript: myFunction('a3')"> Button text </a>
</div>

and so on...

I'm pretty sure there is a better way to do what I was trying to do, but this worked for me for now.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.