Javascript几次点击后显示div [英] Javascript show div after a few clicks

问题描述

我是Javascript新手，找不到我的问题的答案。如果您点击一次按钮5次后，我的JavaScript可能会查看div吗？如果是这种情况，我怎么能做到这一点？

谢谢！

解决方案

没有jQuery：

document.addEventListener（DOMContentLoaded ，function（event）{var button = document.getElementById（'click_me'）; var elem = document.getElementById（'message'）; var count = 0; button.addEventListener（'click'，function（e）{e。 （）; count ++; if（count == 5）{elem.style.display ='block';}}，false）;}）;

  #message {background：＃0f0;显示：无; padding：10px;}  

< button type =button id =click_me>点击我< / button>< div id =message> Hello World< / div>

 < （）（）; count（）; if（count == 5）{$（'）; #message'）。show（）;}}）;}）;  

  #message {background：＃0f0;显示：无; padding：10px;}  

< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>< button type =buttonid =click_me> Click Me< /按钮>< div id =message> Hello World< / div>

I'm new in Javascript and I can't find the answer for my question. Is it possible that my javascript views a div after if you clicked on a button 5 times? If this is the case, how can I make this possible?

Thanks!

解决方案

Without jQuery:

document.addEventListener("DOMContentLoaded", function(event) {
   var button = document.getElementById('click_me');
   var elem = document.getElementById('message');
   var count = 0;

   button.addEventListener('click', function(e) {
       e.preventDefault();
       count++;
  
       if(count == 5){
           elem.style.display = 'block';
       }
    }, false); 
});

#message {
  background: #0f0;
  display: none;
  padding: 10px;
}

<button type="button" id="click_me">Click Me</button>
<div id="message">Hello World</div>

With jQuery:

$(function() {
  var count = 0;
  
  $('#click_me').click(function(e) {
    e.preventDefault();
    count++;
    
    if(count == 5) {
      $('#message').show();
    }
  });
});

#message {
  background: #0f0;
  display: none;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="click_me">Click Me</button>
<div id="message">Hello World</div>

这篇关于Javascript几次点击后显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！