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

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

var点击次数=0；
var a=document.getElementById（“输出”）；
函数go（）{
点击++；
移动（）；
};
函数移动（）{
如果（单击次数=1）{
a、 style.color=“红色”；
}
否则如果（单击次数=2）{
a、 style.fontframy=“无衬线”；
}
}

点击我
更改我

您可以创建一个由以下函数组成的队列（通过简单数组实现）（这只是一个简化的示例，您可以基于此）：

其思想是按照您希望执行的顺序将移动存储在该队列中。因此，如果您希望某个函数执行4次，则将其放入队列中4次，然后按您想要的数量放入下一个函数，以此类推

shift

函数获取要执行的下一个移动。您只需调用该函数，

go

，即可执行下一步操作

---

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

您使用的是

=

而不是

=

，

=

用于赋值和比较，您必须使用

=

或

==

。 另外，你不需要移动函数，我将它移动到go函数

var点击次数=0；
var a=document.getElementById（“输出”）；
函数go（）{
点击++；
如果（单击==1）{
a、 style.color=“红色”；
}
如果（单击==2）{
a、 style.fontframy=“无衬线”；
}
如果（单击==3）{
a、 innerText=a.innerText+a.innerText+a.innerText+a.innerText；
}
如果（单击==4）{
a、 innerText=“完成”；
}
};

点击我
更改我
您可以使用函数数组之类的东西。请参阅每个函数下的注释以了解解释


$（函数（）{
//让我们从需要执行的函数数组开始。
var fns=[函数（）{
//第一个。
//改变颜色。
$（“#输出”）.css（“颜色”，“#00f”）；
}，函数（）{
//第二个。
//更改段落字体。
$（“#输出”）.css（“字体系列”、“单空格”）；
}，函数（）{
//第三个。
//将内部HTML复制5次。您可以使用类似String.repeat（）的内容。
$（“#输出”）.html（$（“#输出”）.html（）。重复（5））；
}，函数（）{
//第四个。
//完成了。
$（“#输出”）.html（“完成”）；
}];
var计数器=0；
$（“按钮”）。单击（函数（）{
如果（计数器>=4）
返回false；
fns[计数器]（）；
计数器++；
});
});

点击我
Change Me
您的想法是正确的，但是您缺少实际的
单击事件处理注册

此外，如果您添加/删除CSS类，而不是修改单个样式，那么它更干净、更易于维护

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


var=1；
var o=document.getElementById（“输出”）；
var b=document.getElementById（“btn”）；
//存储原始文本
var original=o.textContent；
//设置单击事件处理程序：
b、 addEventListener（“单击”，移动）；
函数移动（）{
开关（咔哒声）{
案例1：
o、 类列表。添加（“一”）；
打破
案例2：
o、 添加（“两个”）；
o、 类列表。删除（“一”）；
o、 textContent=repeatText（5，o.textContent）；
打破
案例3：
o、 添加（“三”）；
o、 类列表。删除（“两个”）；
o、 text内容=原件；
打破
案例4：
//故意违约
违约：
o、 类列表。删除（“三”）；
o、 textContent=“完成”；
打破
}
//前后不能有空格++
点击++；
}
函数repeatText（numTimes，data）{
var结果=”；
对于（变量i=0；i

.one{
颜色：红色；
}
.二{
字体系列：无衬线；
}
.三{
字体大小：粗体；
}
点击我
更改Me
使用repeated创建5个副本并将其存储在变量中


const content=document.getElementById（'content'）；
让我们复制5；
让计数=0；
content.addEventListener（'click'，函数（e）{
计数+=1；
如果（计数==1）{
content.style.color='绿色'；
}
如果（计数==2）{
content.style.fontframy=“Arial，Helvetica，无衬线”
}
如果（计数==3）{
copy5=content.innerText.repeat（5）；
console.log（copy5）
}
如果（计数=4）{
content.innerHTML='DONE'；
计数=0；
}
})
我有一个带有段落和按钮的简单HTML。我想在每次点击按钮时执行不同的命令。第一次点击，更改段落颜色，第二次点击更改字体系列，第三次点击复制innerHTML 5次（请解释
如何做到这一点），单击四次或更多次，将innerHTML更改为“完成”。
据我从您的问题中了解，以下代码可以很好地为您工作。。。在你的问题中，它说“第三次点击复制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");
    }
}

是
=
或
=
，而不是
=
。例如，当您执行
if（clicks=1）
时，您将
clicks
设置为
1
，而不是对其进行比较。我还修复了
=
problems@Santi我还添加了一些对我的解决方案的解释。谢谢你的提及：）是的，这正是我想要的。我知道我做得对，只是错过了一些非常简单的事情。谢谢：）
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");
    }
}