Javascript 双击"；输入[]：焦点"；

“聚焦”按钮出现问题，该按钮具有输入“类型

我有一个按钮是

（css-

input[type=“submit”]

）。 此按钮具有主样式和悬停样式。 此外，我希望添加一个风格的重点（点击）与一些加载动画排序

问题是需要点击两次提交：第一次点击按钮，第二次点击样式，第一次点击显示。正因为如此，动作不会启动，所以加载动画会无限显示

我在CodePen代表这个问题，所以你可以自己检查。

在CodePen上，您需要单击“提交”按钮，然后将加载动画，您需要再次单击以执行提交操作。 在第二次尝试时，它不会重复，但如果重新加载代码段或页面，它会再次发生

我还在这里复制代码：

函数ShowResult（）{
setTimeout（函数（）{
var result=document.getElementById（“结果”）；
如果（result.style.display==“无”）{
result.style.display=“block”；
}否则{
result.style.display=“无”；
}
}，2000）；//延迟2秒
}
函数ShowMain（）{
var result=document.getElementById（“结果”）；
if（result.style.display==“block”）{
result.style.display=“无”；
}否则{
result.style.display=“block”；
}
}

@导入url（'https://fonts.googleapis.com/css?family=Titillium+Web&display=swap'）；
身体{
背景：#222；
}
梅因先生{
显示器：flex；
证明内容：中心；
宽度：100%；
身高：100%；
z指数：1；
过渡：所有0.5s缓解；
}
#结果{
显示：无；
宽度：100%；
身高：100%；
背景图像：线性渐变（至底部，#333，#444）；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
z指数：50；
动画：fadein 0.25s线性；
动画填充模式：正向；
}
输入[type=“submit”]{
字体系列：“titilliumweb”，无衬线；
字体大小：32px；
背景:#fff0；
颜色：#fff；
边框：1px实心#fff；
边界半径：4px；
填充：5px10px 5px10px；
利润率最高：5%；
盒影：0px 0px 8px 0px#fff0；
过渡：所有0.25秒缓解；
}
输入[type=“submit”]：悬停{
字体系列：“titilliumweb”，无衬线；
字体大小：32px；
背景:#fff0；
颜色：#56ef56；
边框：1px实心#56ef56；
边界半径：4px；
填充：5px10px 5px10px；
利润率最高：5%；
盒影：0px 0px 8px 0px#56ef56；
光标：指针；
过渡：所有0.25秒缓解；
动画：辉光1s线性无限；
}
输入[type=“submit”]：焦点{
背景：#262626；
位置：固定；
排名：0；
左：0；
底部：0；
右：0；
z指数：10；
宽度：100%；
身高：100%；
背景图片：url(https://i.imgur.com/gVX3yPJ.gif);
背景重复：无重复；
背景尺寸：200px；
背景位置：50%50%；
颜色：#fff0；
边界：0；
边际上限：0；
盒影：0px 0px 0px 0px#fff0；
过渡：所有0.25秒缓解；
大纲：0；
}
p{
字体系列：“titilliumweb”，无衬线；
字体大小：50px；
字号：600；
文本对齐：居中；
颜色：#45cb45；
利润率最高：1%；
}
img{
宽度：60px；
高度：60px；
动画：线性无限；
}
#btn关闭{
显示：块；
字体系列：“titilliumweb”，无衬线；
字体大小：24px；
文本转换：大写；
背景:#3535；
颜色：#fff；
边框：1px实心#ff444400；
边界半径：4px；
填充：5px10px 5px10px；
保证金：0自动；
利润率最高：2.5%；
盒影：0px 2px 4px 0px#0000；
过渡：所有0.25秒缓解；
}
#btn关闭：悬停{
显示：块；
字体系列：“titilliumweb”，无衬线；
字体大小：24px；
文本转换：大写；
背景:#3535；
颜色：#ff4444；
边框：1px实心#ff444400；
边界半径：4px；
填充：5px10px 5px10px；
保证金：0自动；
利润率最高：2.5%；
盒影：0px 2px 4px 0px#000；
光标：指针；
过渡：所有0.25秒缓解；
}
@关键帧淡入淡出{
0%{不透明度：0；}
100%{不透明度：1；}
}
@关键帧发光{
0%{box shadow:0px 0px 8px 0px#56ef56；}
50%{box shadow:0px 0px 8px 0px#56ef5600；}
100%{box shadow:0px 0px 8px 0px#56ef56；}
}
@关键帧衰减{
0%{不透明度：1；}
50%{不透明度：0；}
100%{不透明度：1；}
}

提交！

关

罪魁祸首是ShowResult（）函数中的这种if条件

if (result.style.display === "none") {

当第一次调用它时，display属性并不像您所期望的那样是none——它只是一个空字符串。稍后，您会明确地将其设置为“无”，这就是为什么之后它会工作

要修复此问题，请使if条件也查找空字符串

if (result.style.display == "none" || result.style.display == "") {