JavaScript:如何在单击后禁用按钮

时间:2018-02-15 18:51:46

标签: javascript html

您好我有一个问题如何升级我的脚本,它可以在您按下其中五个后禁用其余按钮?现在它只计算它们。

我的代码:

$configFiles = (Get-ChildItem "C:\RDP LINKS\" *.rdp) 
foreach ($file in $configFiles)
    {
    (get-content $file) -replace 'administrator@testdomain.local', 'administrator@test2domain.local' | set-content $file
}

链接到js: https://jsfiddle.net/57js0ps7/6/

3 个答案:

答案 0 :(得分:1)

这是尽可能少的编辑代码,但不可读。

https://jsfiddle.net/90yw1buf/

HTML

<input type="Button" class="bt" onclick="window.increment(event)" value="1"/>
<input type="Button" class="bt" onclick="window.increment(event)" value="2"/>
<input type="Button" class="bt" onclick="window.increment(event)" value="3"/>
<input type="Button" class="bt" onclick="window.increment(event)" value="4"/>
<input type="Button" class="bt" onclick="window.increment(event)" value="5"/>
<input type="Button" class="bt" onclick="window.increment(event)" value="6"/>
<input type="Button" class="bt" onclick="window.increment(event)" value="7"/>
<input type="Button" class="bt" onclick="window.increment(event)" value="8"/>


<div>
    <p>You've choose <a id="clicks">0</a> slot/s.</p>
</div>

JS

window.increment = function(event) {
  var btn = event.target;
  btn.clicks = ((btn.clicks || 0) + 1) % 2;
  window.clicks = (window.clicks || 0) + btn.clicks * 2 - 1;
  document.getElementById("clicks").innerText = window.clicks;
  var buttons = document.getElementsByClassName("bt");
  var i;
  if(window.clicks > 4) {
    for (i = 0; i < buttons.length; i++) {
      if(buttons[i].clicks != 1) {
          buttons[i].disabled = true;
      } else {
        buttons[i].disabled = false;
      }
    }
  } else {
      for (i = 0; i < buttons.length; i++) {
      buttons[i].disabled = false;
    }
  }
}

答案 1 :(得分:0)

我认为这就是你要找的东西?

&#13;
&#13;
var clickedCount = 0;
var arr = [0,0,0,0,0,0,0,0];
function count (buttonNo) {
  if (arr[buttonNo-1] == 0) {
    clickedCount ++;
    arr[buttonNo-1] = 1
  }
  if (clickedCount >=5) {
    var buttons = document.getElementsByTagName('button');
    for (var i=0; i < buttons.length; i++) {
      if(arr[i]==0){
        buttons[i].disabled = 'disabled';
      }
    }
  }
}
&#13;
<div>
<button onclick="count(1)">button1</button>
  <button onclick="count(2)">button2</button>
  <button onclick="count(3)">button3</button>
  <button onclick="count(4)">button4</button>
  <button onclick="count(5)">button5</button>
  <button onclick="count(6)">button6</button>
  <button onclick="count(7)">button7</button>
  <button onclick="count(8)">button8</button>

</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

尽量不要污染全局范围(window),因为它是页面上所有脚本共享的空间,您应该保持共享空间清洁,因为您不知道其他脚本可能分配全局变量称为“点击”。阅读关于如何避免将事物放在全球范围内的一些好主意的关闭和范围。

您应该使用类而不是ID,因为ID必须是唯一的,但类不必是。

最好使用addEventListener将事件侦听器放在元素上,因为元素只能有一个“onclick”函数,但它们可以拥有所需数量的事件侦听器。

最后,不要使用锚点(<a>)标记,除非它是可点击的,如果是,则需要包含href属性。

(function(){
  var clicks = 0;
  var buttons = Array.from(document.getElementsByClassName("bt"));
  buttons.forEach(btn=>{
    btn.addEventListener("click", ()=>{
      clicks++;
      document.getElementById("clicks").innerText = clicks;
      btn.disabled = true;
      if(5 === clicks) buttons.forEach(b=>b.disabled = true); 
    }, false)
  });
})();
<input type="Button" class="bt" value="2"/>
<input type="Button" class="bt" value="3"/>
<input type="Button" class="bt" value="4"/>
<input type="Button" class="bt" value="5"/>
<input type="Button" class="bt" value="6"/>
<input type="Button" class="bt" value="7"/>
<input type="Button" class="bt" value="8"/>            
<div>
    <p>You've choose <span id="clicks">0</span> slot/s.</p>
</div>

相关问题