Как скрыть две кнопки при нажатии одной кнопки?

Question

В моей приключенческой игре есть два варианта: 1. Поднимите палку или 2. Оставьте ее там. Вы можете выбрать только один, так что мне интересно, как вы можете скрыть обе кнопки после щелчка. Это текущий код:

<script> 
function one() 
{ 
var newButton1 = '<button onclick="two()">Pick up stick</button>'; var newButton2 = '<button 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; 
} 

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

function three() 
{ 
document.getElementById("c").innerHTML="You leave the stick on the ground and continue on."; 
} 
</script> 

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

<div style="margin-left:255px; width:200px; margin-top:-15px;"> 
</div> 

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

Answer 1

Вы должны дать идентификатор для этих кнопок, и при нажатии одной , вы скрываете их обоих.

Смотреть это работает здесь: http://jsfiddle.net/EPKM7/

Код:

<script> 
function one() 
{ 
//create buttons and give id to it (btnTwo and btnThree) 
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; 
} 

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

    //Clicked, hide both buttons 
    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."; 
    //Clicked, hide both buttons 
    document.getElementById("btnTwo").style.display = 'none'; 
    document.getElementById("btnThree").style.display = 'none'; 
} 
</script> 

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

<div style="margin-left:255px; width:200px; margin-top:-15px;"> 
</div> 

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

Answer 2

Вы могли бы дать свои кнопки ID, а затем установить их свойства дисплея скрытых:

function hideButtons() 
{ 
    document.getElementById("pickUpStick").style.display = 'none'; 
    document.getElementById("leaveStick").style.display = 'none'; 
} 

function name() 
{ 
    ... 
    hideButtons(); 
} 

<button id="pickUpStick" ... 
<button id="leaveStick" ... 

Answer 3

Кроме того, только в качестве дополнения к тому, что люди уже упоминали. Вы можете использовать jQuery, чтобы легко сделать это в одной строке. Дайте одно имя класса обеим кнопкам, кнопке-скрыть или что-то в этом роде. Затем позвоните в свою кнопку для удаления:

$(".button-hide").attr('style', 'display: none');