让按钮每6次点击执行一次不同的操作

时间:2019-06-26 17:37:53

标签: javascript

不幸的是,我真的不知道自己在做什么……我创建了一个按钮,该按钮使用随机选择的HTML代码段刷新了我的网站的一部分。现在,我希望此按钮每单击6次就可以选择一个特定的代码段。如果我继续单击,它将再次选择随机代码段,直到再次单击6次为止。

function loadExternalHTMLPage() {
  var xmlhttp;
  var pagesToDisplay = [
    'advice001.html',
    'advice002.html',
    'advice003.html',
    'advice004.html',
    'advice005.html',
    'advice009.html',
    'advice012.html',
    'advice013.html',
    'advice014.html',
    'advice015.html',
  ];
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("contentArea").innerHTML = xmlhttp.responseText;
    }
  }
  var randomnumber = Math.floor(Math.random() * pagesToDisplay.length);
  xmlhttp.open("GET", pagesToDisplay[randomnumber], true);
  xmlhttp.send();
}

2 个答案:

答案 0 :(得分:0)

您提出的HTTP请求似乎与您的问题陈述无关,因此,我将仅着重于每6次点击的区别:

您可以使用全局计数器变量并使用余数运算符(%)来检测该计数是否为6的倍数:

var clickCount = 0;

document.querySelector("button").addEventListener("click", function () {
    clickCount++;
    if (clickCount % 6) {
        console.log("not the 6th time");
    } else {
        console.log("the 6th time");
    }
});
<button>click me</button>

if ... else构造是您需要扩展以执行两种情况下想要执行的操作的地方。

答案 1 :(得分:0)

 This should work. Store a variable outside function. Increment it on random number selection. When number of times is equal to 6, equate the number to 0.

   var number_times = 0;
    function loadExternalHTMLPage() {
      var xmlhttp;
      var pagesToDisplay = [
      'advice001.html',
      'advice002.html',
      'advice003.html',
      'advice004.html',
      'advice005.html',
      'advice009.html',
      'advice012.html',
      'advice013.html',
      'advice014.html',
      'advice015.html',];
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          document.getElementById("contentArea").innerHTML = xmlhttp.responseText;
        }
      }
      var randomnumber;
      if( number_times > 5 ){
        randomnumber = 6;
        number_times = 0
      } else {
        randomnumber = Math.floor(Math.random() * pagesToDisplay.length);
        number_times++;
      }


      xmlhttp.open("GET", pagesToDisplay[randomnumber], true);
      xmlhttp.send();

    }