Fatal编程技术网

HTML和Javascript更改可见性

javascript html

HTML和Javascript更改可见性,javascript,html,Javascript,Html,我已经试着搜索过很多次了。我已经接近了，但还没有弄明白这一点。我想做的是当用户达到一定的点击量时，会弹出一个按钮 <!DOCTYPE html> <html> <head> <title>++ Increment</title> </head> <body> <h1>Click the Button</h1> <input type="button" id="countB

我已经试着搜索过很多次了。我已经接近了，但还没有弄明白这一点。我想做的是当用户达到一定的点击量时，会弹出一个按钮

<!DOCTYPE html>
<html>
<head>
  <title>++ Increment</title>
</head>
<body>
  <h1>Click the Button</h1>
  <input type="button" id="countButton" onclick="hi()" value="Click Me!"/>
  <p class="ClickCount">Clicks: <a id="amount">0</a></p>
  <input type="button" id="countButton" onclick="store()" value="Store"/>
  <input type="button" style="visibility:hidden;" value="Button" id="Sir" />
</body>
</html>
我想我需要在hi（）函数之外分配count变量，但我不知道如何从mobile执行（或者如果可能的话）

，所以请原谅我的伪代码

如果使用jquery，则可以将值存储在 $（btn）.数据（'点击'）

否则，在hi函数上方定义一个全局变量

然后你需要把你的if逻辑（点击>20次）放在你的hi函数中，所以请原谅我的伪代码

如果使用jquery，则可以将值存储在 $（btn）.数据（'点击'）

否则，在hi函数上方定义一个全局变量

然后，您需要将if（单击>20）的逻辑放入hi功能中

尝试以下操作：

<!DOCTYPE html>
<html>
<head>
  <title>++ Increment</title>
</head>
<body>
  <h1>Click the Button</h1>
  <input type="button" id="countButton" value="Click Me!"/>
  <p class="ClickCount">Clicks: <a id="amount">0</a></p>
  <!-- <input type="button" id="countButton" onclick="store()" value="Store"/> -->
  <input type="button" style="visibility:hidden;" value="Button" id="Sir" />
  <script>
        var count = 0;
        var clickbutton = document.getElementById("countButton");
        var showbutton = document.getElementById("Sir");
        var amountstatus = document.getElementById("amount");

        clickbutton.onclick = function(){
            if(count < 3){
                count++;
                amountstatus.innerHTML = count;
            }
            else{
                showbutton.style.visibility = "visible";
            }
        }
  </script>
</body>
</html>


++增量
点击按钮
点击次数：0

var计数=0；
var clickbutton=document.getElementById（“countButton”）；
var showbutton=document.getElementById（“Sir”）；
var amountstatus=document.getElementById（“金额”）；
clickbutton.onclick=函数（）{
如果（计数<3）{
计数++；
amountstatus.innerHTML=计数；
}
否则{
showbutton.style.visibility=“可见”；
}
}
选中此复选框，我将此
放在注释中，这就是为什么您不能有两个同名的id。

尝试以下操作：

<!DOCTYPE html>
<html>
<head>
  <title>++ Increment</title>
</head>
<body>
  <h1>Click the Button</h1>
  <input type="button" id="countButton" value="Click Me!"/>
  <p class="ClickCount">Clicks: <a id="amount">0</a></p>
  <!-- <input type="button" id="countButton" onclick="store()" value="Store"/> -->
  <input type="button" style="visibility:hidden;" value="Button" id="Sir" />
  <script>
        var count = 0;
        var clickbutton = document.getElementById("countButton");
        var showbutton = document.getElementById("Sir");
        var amountstatus = document.getElementById("amount");

        clickbutton.onclick = function(){
            if(count < 3){
                count++;
                amountstatus.innerHTML = count;
            }
            else{
                showbutton.style.visibility = "visible";
            }
        }
  </script>
</body>
</html>


++增量
点击按钮
点击次数：0

var计数=0；
var clickbutton=document.getElementById（“countButton”）；
var showbutton=document.getElementById（“Sir”）；
var amountstatus=document.getElementById（“金额”）；
clickbutton.onclick=函数（）{
如果（计数<3）{
计数++；
amountstatus.innerHTML=计数；
}
否则{
showbutton.style.visibility=“可见”；
}
}
检查我将此
放在注释中，这就是为什么您不能有两个同名的id。

您好，请尝试以下代码：

var计数=0；
函数hi（）{
计数+=1；
document.getElementById（“金额”）.innerHTML=count；
如果（计数>=20）{
document.getElementById（“Sir”）.style.visibility=“可见”；
}

}
您好，请尝试以下代码：

var计数=0；
函数hi（）{
计数+=1；
document.getElementById（“金额”）.innerHTML=count；
如果（计数>=20）{
document.getElementById（“Sir”）.style.visibility=“可见”；
}
}
var计数=0；
函数存储（）{
警报（计数）；
}
函数hi（）{
计数+=1；
document.getElementById（“金额”）.innerHTML=count；
如果（计数>=4）document.getElementById（'Sir'）.style.display='inline block'；
}
#Sir{显示：无；}
单击按钮
点击次数：0


var计数=0；
函数存储（）{
警报（计数）；
}
函数hi（）{
计数+=1；
document.getElementById（“金额”）.innerHTML=count；
如果（计数>=4）document.getElementById（'Sir'）.style.display='inline block'；
}
#Sir{显示：无；}
单击按钮
点击次数：0
我同意扎克的观点。将值存储在数据属性中是最好的方法。下面是我如何编写代码的

$（函数（）{
$（“#计数按钮”）。在（“单击”，函数（）上）{
var clicks=$（this）.data（“clicks”）；
点击++；
//显示单击。
$（“#金额”）.html（点击次数）；
$（此）。数据（“点击”，点击）；
//检查是否应显示安全气囊系统（sir）按钮。
如果（单击次数>=20）{
$（“#Sir”）.css（“可见性”、“可见”）；
}
});
});


++增量
点击按钮
点击次数：0


我同意扎克的观点。将值存储在数据属性中是最好的方法。下面是我如何编写代码的



$（函数（）{
$（“#计数按钮”）。在（“单击”，函数（）上）{
var clicks=$（this）.data（“clicks”）；
点击++；
//显示单击。
$（“#金额”）.html（点击次数）；
$（此）。数据（“点击”，点击）；
//检查是否应显示安全气囊系统（sir）按钮。
如果（单击次数>=20）{
$（“#Sir”）.css（“可见性”、“可见”）；
}
});
});


++增量
点击按钮
点击次数：0


您的条件在函数hi（）之外，因此在加载文件时会检查一次，在调用hi（）时会检查一次

因此，您可以将您的条件放在hi（）中


您的条件在函数hi（）之外，因此在加载文件时会检查一次，而在调用hi（）时不会检查

因此，您可以将您的条件放在hi（）中


试着把
if（count>=20）{…}
放在函数内部
hi
试着把
if（count>=20）{…}
放在函数内部
hi
我相信“最佳”是一种观点；特别是因为我个人不相信使用元素存储变量，并且必须引用元素才能检索变量是最好的解决方案（至少如果可以轻松避免的话）。如果可以将数据与影响它的对象保持链接，为什么还要添加另一个任意变量？我认为问题是，如果可以创建一个简单的变量来存储值，为什么要将数据与元素绑定？什么是武断的？我相信“最好”是一种意见；特别是因为我个人不相信使用元素来存储变量并且必须引用元素才能检索它是最好的选择

var count = 0;
function hi() {
  count += 1;
  document.getElementById("amount").innerHTML = count;

  if (count >= 20) {
    document.getElementById("Sir").style.visibility = "visible";
  }
}