Question

我尝试在用户点击按钮三次后禁用我的按钮，使用以下代码：

var count = 0;
function clickFunc() {
    count += 1;
    var click = document.getElementById('clicks').innerHTML = count;
    var btn = document.querySelector('.btn');
}

if(count >= 3) {

    btn.disabled = true;
}

为什么我的btn.disabled = true;语句从未执行过？

Answer 1

var count = 0;
function clickFunc() {
    count += 1;
    var click = document.getElementById('clicks').innerHTML = count;
    var btn = document.querySelector('.btn');
    if(count >= 3) {
        btn.disabled = true;
    }
}
clickFunc();
clickFunc();
clickFunc();

在第三次通话中，它将被禁用。

Answer 2

通过在if内移动clickFunc()语句，每次单击该按钮时都会调用它，并在那时进行检查。编写代码时，请尝试在脑海中运行它。 If语句应放在最符合逻辑的地方。

var count = 0;
function clickFunc() {
count += 1;
var click = document.getElementById('clicks').innerHTML = count;
var btn = document.querySelector('.btn');

if(count >= 3) 
     btn.disabled = true;
}

Answer 3

这是一个简单的例子。

$(document).ready(function() {

var count=0;

 //called when button is clicked.
 function clickFunc() {
count += 1;
 //lets say id of button is btn
 if(count>3){
 $('#btn').prop('disabled', true);
 }
}


});

或者你可以在函数中移动if语句。

希望有任何帮助！

Answer 4

＆＃13;

var count = 0;
function clickFunc() {
  count += 1;
  var click = document.getElementById('clicks').innerHTML = count;
  var btn = document.querySelector('.btn');
  if(count >= 3) { // placed inside the click function
    btn.disabled = true;
  }
}

＆＃13;

<div id="clicks">0</div>
<br/>
<button class="btn" onclick="clickFunc()">Click Me</button>

＆＃13;

Answer 5

您想将它用作简单模块吗？你在使用jQuery吗？

HTML

<body>
    <button>Click!</button>
</body>

JS

var myCounter= (function() {
    var clicksleft= 3;

    var startCount= function(onFinish) {
        var me= this;
        clicksleft = clicksleft - 1;

        if(clicksleft===0) {
            onFinish();
        }
    };

    return {
        startCount: startCount
    }
})();


jQuery(function ($) {
    $('button').click(function() {
        myCounter.startCount(function() {
            $('button').attr('disabled','disabled');
        });
    });
});

Answer 6

＆＃13;

<html>
<head>
	<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script>
	   $(function(){
	  var count = 3,
		  $btn = $('input[type="submit"]'); //Or which ever you want
		  //Change the label of $btn
		  $btn.val($btn.val()+' ('+count+')')
		  
	  $btn.click(function(){
		  $btn.val($btn.val().replace(count,count-1));
		  count--;
		  if(count==0) {
				return !$btn.attr('disabled','disabled');
		  }
	  })
	})
	</script>
	<title>Javascript</title>
</head>

<body>
	<input type="submit" value="Test">
</body>
</html>

＆＃13;

如何在点击一下后制作禁用按钮

6 个答案: