答えをもう一度隠さない

Question

私はgirlswhogeek.comに行きました。それらのコードは、最初に要素を隠すので、私が探しているものです。次にボタンをクリックすると、答えが表示されます。答えをもう一度隠すわけではありません。ここで

は自分のコードです：

<p><a href="#">What price are your apples?</a><br> 
<span id="answer1" style="display:none;">Our apples are 30 pence 
each...</span></p> 

<script type="text/javascript"> 
function showStuff(id) { 
document.getElementById(id).style.display= 'block'; 
} 
function hideStuff(id) { 
document.getElementById(id).style.display='none'; 
} 
</script> 

Answer 1

function showStuff(id) { 
 
alert(id); 
 
document.getElementById(id).style.display= 'block'; 
 
} 
 
function hideStuff(id) { 
 
alert(id); 
 
document.getElementById(id).style.display='none'; 
 
}

<input type="button" onclick="showStuff('test')" value="show"/> 
 
<input type="button" onclick="hideStuff('test')" value="hide"/> 
 
<div id="test">sample div</div>

間違ったメソッドを呼び出すと、問題がある可能性があります次のようになります -

function toggleStuff(id) { 
 
    if (document.getElementById(id).style.display == 'block') { 
 
    document.getElementById(id).style.display = 'none'; 
 
    } else { 
 
    document.getElementById(id).style.display = 'block'; 
 
    } 
 
}

<p><a href="#" onclick="toggleStuff('answer1'); return false;">What price are your apples?</a><br><br> 
 
    <span id="answer1" style="display: none;">Our apples are 30 pence each. If you buy 10 or more we can sell them at a discounted bulk rate of 25 pence each.</span></p>

Answer 2

私はこれらは、このような<a id="btnID" onclick="showStuff('btnID')>Button</a>と呼ばれているかどうかはわかりません...など

2つのボタン（またはお好みの要素）がある場合は、作りますonclickイベントが1つの場合は表示され、もう1つの場合は非表示になります。 1つだけを使用している場合は、表示されているかどうかに基づいてifステートメントが必要な場合があります。

Answer 3

ここ

はあなたのコードを例に取り組んでいる...コードが正しい、あなたが一つの機能toggleStuffでこれを行うことができます