Question

我想创建一个简单的脚本来隐藏和显示我网站上的元素，但它不起作用。哪里出错？

<!DOCTYPE html>
<html>
<head>

<style>
#hideMe { display:none; }
</style>

</head>
<body>

<button onclick="myFunction()">test</button>

<script>
var hideOrNot = true;
function myFunction() {
    if (hideOrNot == true){
        document.getElementById("hideMe").style.display:block;
        hideOrNot=false;
    }else{
        document.getElementById("hideMe").style.display:none;
        hideOrNot=true;
    }
 }
</script>
<h1 id="hideMe">text to show/hide</h1>

</body>
</html>

Answer 1

应该使用"="代替":"

应该是

document.getElementById("hideMe").style.display = 'block';

而不是

document.getElementById("hideMe").style.display:block;

<强>更新

您忘记在{条件旁边写右括号else，您的代码应该类似

var hideOrNot = true;
    function myFunction() {
    if (hideOrNot == true){
        document.getElementById("hideMe").style.display = 'block';
        hideOrNot=false;
    }else{
     //--^-- you forgot to write
        document.getElementById("hideMe").style.display = 'none';
        hideOrNot=true;
    }
}

DEMO

Answer 2

<!DOCTYPE html>
<html>
<head>

<style>
#hideMe { display:none; }
</style>

</head>
<body>

<button onclick="myFunction()">test</button>

<script>

var hideOrNot = true;

function myFunction() {

    if (hideOrNot == true){
        document.getElementById("hideMe").style.display = 'block';
        hideOrNot=false;
    } else {
        document.getElementById("hideMe").style.display = 'none';
        hideOrNot=true;
    }
}
</script>

    <h1 id="hideMe">text to show/hide</h1>

    </body>
</html>

使用display ='block'和函数缺少'}'时会出现一些错误：）

Answer 3

您的代码中存在两个问题： DEMO

首先是语法，

document.getElementById("hideMe").style.display:block;

应该是

document.getElementById("hideMe").style.display='block';

你错过了{}。

var hideOrNot = true;
function myFunction() {debugger;
if (hideOrNot){
document.getElementById("hideMe").style.display='block';
hideOrNot=false;
}else{
document.getElementById("hideMe").style.display='none';
hideOrNot=true;
}
                      }

Answer 4

http://jsbin.com/kukibapu/1/edit

如果您想使用JQuery，方法$("#hideMe").toggle();就是您想要的

简单的JavaScript不起作用

4 个答案: