私の機能が正しく動作しない理由を誰かが理解できるかどうか疑問に思っていました。私が達成しようとしているのは、ボタンをクリックするとテキストが表示され、もう一度クリックすると非表示になるなどです。
function hideshow (){
var showhide=document.getElementById('text');
if(showhide.style.display="none")
{
showhide.style.display="block";
}
else{
showhide.style.display="none";
}
}
これまでのところ、一度クリックするとテキストが表示されるようになりましたが、もう一度クリックしてもテキストには影響しません。
私はそれがそうであるべきだと信じています：
function hideshow (){
var showhide = document.getElementById('text');
if (showhide.style.display == "none")
{
showhide.style.display = "block";
}
else{
showhide.style.display = "none";
}
}
したがって、比較するときは「=」の代わりに「==」を使用してください。「=」演算子は値を割り当てます。JavaScript には「===」演算子もあります。違いは、「==」は値をキャストするのに対し、「===」は厳密に比較することです。
例えば：
0 == false; // will return true
0 === false; // will not
だからあなたも使うことができます
if (showhide.style.display === "none")
演算子の詳細については、こちらをご覧ください。
ステートメントで使用する必要があり===ますif。=は代入演算子です:
function hideshow (){
var showhide=document.getElementById('text');
if(showhide.style.display==="none")
{
showhide.style.display="block";
}
else{
showhide.style.display="none";
}
}
または：
function hideshow (){
var showhide=document.getElementById('text');
showhide.style.display = showhide.style.display === "none" ?
"block" :
"none";
}
==演算子を使用して値を代入する代わりに、比較演算子を使用する必要があります=。
試す：
function hideshow() {
var showhide = document.getElementById('text').style;
(showhide.display = showhide.display == "none" ? "block" : "none" )
}
次を使用して、1 つのステートメントで割り当てと比較を行うことができます。
(showhide.display = showhide.display == "none" ? "block" : "none" )
^assign ^comparison
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function hideshow() {
var showhide=document.getElementById('text');
if(showhide.style.visibility=="hidden")
{
showhide.style.visibility="visible";
}
else{
showhide.style.visibility="hidden";
}
}
</script>
</head>
<body>
<div id="text">Text</div>
<button onclick="hideshow()">hideshow</button>
</body>
</html>
function hideShow() {
el.style.display != "none" ? "none" : "block";
}