Question

我有一个带有段落和按钮的简单HTML。我想在每次点击按钮时执行不同的命令。对于第一次单击，更改段落颜色，在第二次单击更改字体系列，在第三次单击复制innerHTML 5次（请说明如何执行此操作），在四次或更多次单击时，将innerHTML更改为“DONE”。

var clicks = 0;
var a = document.getElementById("output");

function go() {
    clicks ++;
    moves();
};

function moves() {
  if (clicks = 1) {
a.style.color = "red";
 }
   else if (clicks = 2) {
a.style.fontFamily = "sans-serif";
  }

 }

<html>
<head>
   <title></title>
 </head>
<body>
<button onclick=go();>ClickMe</button>
<p id="output">Change Me</p>
</body>
<script src="q2.js" type="text/javascript"></script>

</html>

Answer 1

你可以创建一个队列 - 由一个简单的数组实现 - 如下所示的函数（只是一个简单的例子，你可以基于）：

var changeColor = function() {
  a.style.color = "red";
};

var changeFont = function() {
  a.style.fontFamily = "sans-serif";
};

var moves = [changeColor, changeColor, changeFont, changeFont, changeFont];

function go() {
  var move = moves.shift(); // get and remove the first move from the queue
  if (move) move();
}

这个想法是按照您想要执行它们的顺序将移动存储在该队列中。因此，如果你想要执行4次某个函数，你可以在队列中放置4次，然后按照你想要的数量放入下一个函数，依此类推。

shift函数将执行下一步操作。您只需要调用该函数go即可执行下一步操作。

使用这种方法，您无需计算点击次数。

Answer 2

您使用=而不是==。=用于分配和比较，您必须使用==或===。你也不需要移动功能，我把它移到了功能

var clicks = 0;
var a = document.getElementById("output");

function go() {
    clicks ++;
    if (clicks == 1) {
       a.style.color = "red";
 }
   if (clicks == 2) {
      a.style.fontFamily = "sans-serif";
  }
   if (clicks == 3) {
      a.innerText = a.innerText+a.innerText+a.innerText+a.innerText;
  }
   if (clicks == 4) {
      a.innerText = "done";
  }
};

<body>
<button onclick=go();>ClickMe</button>
<p id="output">Change Me</p>
</body>

Answer 3

您可以使用类似函数的数组。请参阅注释，了解每个功能下的解释。

$(function () {
  // Let's start with an array of functions that needs to be executed.
  var fns = [function () {
    // First one.
    // Change Para Colour.
    $("#output").css("color", "#00f");
  }, function () {
    // Second one.
    // Change Para Font.
    $("#output").css("font-family", "monospace");
  }, function () {
    // Third one.
    // Copy the inner HTML 5 times. You can use something like String.repeat().
    $("#output").html($("#output").html().repeat(5));
  }, function () {
    // Fourth one.
    // Done.
    $("#output").html("Done.");
  }];
  var counter = 0;
  $("button").click(function () {
    if (counter >= 4)
      return false;
    fns[counter]();
    counter++;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>ClickMe</button>
<p id="output">Change Me</p>

Answer 4

您有正确的想法，但您错过了实际的click事件处理注册。

此外，如果您添加/删除CSS类，而不是修改单个样式，它更清晰，更易于维护。

最后，由于您具有特定的if逻辑，switch语句更易于阅读，性能稍好一些。

＆＃13;

var clicks = 1;
var o = document.getElementById("output");
var b = document.getElementById("btn");

// Store original text
var original = o.textContent;

// Set up a click event handler:
b.addEventListener("click", moves);

function moves() {

  switch (clicks) {
    case 1:
      o.classList.add("one");
      break;
    case 2:
      o.classList.add("two");
      o.classList.remove("one");
      o.textContent = repeatText(5, o.textContent);
      break;
    case 3:
      o.classList.add("three");
      o.classList.remove("two");
      o.textContent = original;    
      break;
    case 4:
      // Intentional fall-through to the default
    default:
      o.classList.remove("three"); 
      o.textContent = "Done";
      break;   
  }
  
  // Can't have a space before or after ++
  clicks++;

 }
 
 function repeatText(numTimes, data){
   var result = "";
   for(var i = 0; i < numTimes; i++){
     result += data;
   }
   return result;
 }

＆＃13;

.one {
  color:red;
}

.two {
  font-family:sans-serif;
}

.three {
  font-weight:bold;
}

＆＃13;

<button id="btn">ClickMe</button>
<p id="output">Change Me</p>

＆＃13;

Answer 5

使用重复制作5份副本并将其存储在变量中。

＆＃13;

const content = document.getElementById('content');

let copy5;
let count = 0;
content.addEventListener('click', function(e) {
  count += 1;
  if (count === 1) {
    content.style.color = 'green';
  }
  if (count === 2) {
    content.style.fontFamily = "Arial, Helvetica, sans-serif"
  }
  if (count === 3) {
    copy5 = content.innerText.repeat(5);
    console.log(copy5)
  }
  if (count === 4) {
    content.innerHTML = 'DONE';
    count = 0;
  }
})

＆＃13;

<div id="content">I have a simple HTML with a paragraph and button. I want to carry out different commands on every click of the button. For first click, change paragraph colour, on second click change font family, on third click copy the innerHTML 5 times(pls explain
  how to do this), on four or more clicks, change innerHTML to "DONE".</div>

＆＃13;

Answer 6

据我所知，从你的问题来看，下面的代码可以正常工作...在你的问题中它说“在第三次点击复制innerHTML 5次”，循环相同的功能5次。

var count = 0;
function go(){
    count++;
    switch(count){
        case 1: document.getElementById('output').style.color = 'green'; break;
        case 2: document.getElementById('output').style.fontFamily = 'sans-serif'; break;
        case 3: copyText('output'); break;
        case 4: document.getElementById('output').innerHTML = '"DONE"';
    }
}
function copyText(containerid){
    if (document.selection) { 
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select().createTextRange();
        document.execCommand("Copy"); 

    } else if (window.getSelection) {
        var range = document.createRange();
         range.selectNode(document.getElementById(containerid));
         window.getSelection().addRange(range);
         document.execCommand("Copy");
    }
}

第一次按钮单击，更改颜色，第二次单击更改字体系列

6 个答案: