Question

我搜索了堆栈溢出，我尝试了几乎每个主题 - 没有一个工作。我点击“btnTwo”按钮后，我试图将“库存”div切换为阻止而不是阻止。你会怎么做？这是我目前的代码：

<script>
function one()
{
    var newButton1 = '<button id="btnTwo" onclick="two()" >Pick up stick</button>';
    var newButton2 = '<button id="btnThree" onclick="three()">Leave it there</button>';
    document.getElementById("a").innerHTML = "You feel something on the ground, and you think it's a stick."+newButton1+newButton2;
    var myButton = document.getElementById('btnOne');
    myButton.onclick = four;
}

function two()
{
    document.getElementById("b").innerHTML="You pick up the stick. It might be useful for something."; 

    document.getElementById("btnTwo").style.display = 'none';
    document.getElementById("btnThree").style.display = 'none';
}
function three()
{
    document.getElementById("c").innerHTML="You leave the stick on the ground and continue on.";

    document.getElementById("btnTwo").style.display = 'none';
    document.getElementById("btnThree").style.display = 'none';
}

function four()
{
    document.getElementById("d").innerHTML="You feel a stick stuck to the wall with something like honey. Next to it is a few rocks.";
}
</script>

<div style="margin-left:15px; width:200px; margin-top:100px;">
    <button id="btnOne" onclick="one()">Feel around the cave</button>
</div>

<div id="inventory" style="margin-left:255px; width:200px; height:600px; margin-top:-15px; display:none;">
    Sticks: 
    <div id="stickNumber">1</div>
</div>

<div id="entire" style="margin-left:490px; margin-top:-22px; width:400px; height:600px;">
    <div id="d"></div>
    <div id="c"></div>
    <div id="b"></div>
    <div id="a"></div>
</div>

Answer 1

好。如果你想要切换某些东西，你只需先检查对象的状态，然后应用所设置的对象。

var el = document.getElementById('el'); //some div
var bt = document.getElementById('bt'); // some button
el.style.display = "block";

bt.onclick = function(){
    if(el.style.display == "block"){
        el.style.display = "none";
    }else{
        el.style.display = "block";
    }
}

Working fiddle

你也可以使用像jquery这样的库，这就像这样容易：

$("#bt").click(function(){
    $("#el").toggle();
})

Working fiddle

Answer 2

对于您的情况，您只需将以下脚本添加到函数two（）的底部：

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

我在safari和chrome上测试了代码。

Answer 3

更改

function two()
{
document.getElementById("b").innerHTML="You pick up the stick. It might be useful for something.";

document.getElementById("btnTwo").style.display = 'none';
document.getElementById("btnThree").style.display = 'none';

}

到

function two()
{
document.getElementById("b").innerHTML="You pick up the stick. It might be useful for something.";

document.getElementById("btnTwo").style.display = 'none';
document.getElementById("btnThree").style.display = 'none';
document.getElementById("inventory").style.display = "block";

}

Updated example

如何切换div？

3 个答案: