タグを表示/非表示に切り替える方法

Question

私はプログラマーではないので、私が正しいものを書かないと私はあなたが私を許してくれることを願っています。

私は第一を示したときに第二は隠しておよびその逆されることをJavaScriptでコードを書くことを試みた二つの異なる「ID」

を持つ2つのフィールドセットを持っています。

どこが間違っているのか分かりません。 私を助けることができますか？ここで HTML

<label onclick="add()"></label> 
<label onclick="modify()"></label> 
<fieldset id="add">some text</fieldset> 
<fieldset id="modify">some other text</fieldset> 

、ここで私のjavascriptのテキスト

function add() { 
    var x = document.getElementById('add'); 
    if (x.style.display === 'none') { 
     x.style.display = 'block'; 
    } else { 
     x.style.display = 'none'; 
    } 
} 
function modify() { 
    var y = document.getElementById('modify'); 
    if (y.style.display === 'none') { 
     y.style.display = 'block'; 
     x.style.display = 'none'; 
    } else { 
     y.style.display = 'none'; 
    } 
} 

問題は、私が最初にオープンをクリックすると、別でも、それが閉じます]をクリックしますがないとき、私はそれをしたいと思いだけではなく、ということです1つのフィールドセットが表示されているとき、もう1つのフィールドセットが表示され、逆の表示になります。

ありがとうございました

Answer 1

変更機能でxを定義する必要があります。または、@ibrahimが言ったように、すぐに両方の変数を定義してください。

function modify() { 
    var y = document.getElementById('modify'); 
    var x = document.getElementById('add') 
    if (y.style.display === 'none') { 
     y.style.display = 'block'; 
     x.style.display = 'none'; 
    } else { 
     y.style.display = 'none'; 
    } 
} 

Answer 2

あなたが働きたい場合は、単純な修正。

function add() { 
    var x = document.getElementById('add'); 
    var y = document.getElementById('modify'); 
    if (x.style.display === 'none') { 
     x.style.display = 'block'; 
     y.style.display = 'none'; 
    } else { 
     x.style.display = 'none'; 
    } 
} 
function modify() { 
    var x = document.getElementById('add'); 
    var y = document.getElementById('modify'); 
    if (y.style.display === 'none') { 
     y.style.display = 'block'; 
     x.style.display = 'none'; 
    } else { 
     y.style.display = 'none'; 
    } 
} 

お分かりのように、どちらもxとyのvarがあるため、いずれも未定義ではありません。コードをきれいにするために移動するには、メソッドの外でVARを持参することを望むかもしれない（コードの重複を減らす）

Answer 3

あなたは

機能以下

function hideShow(targetId) { 
    var targetNode = document.getElementById(targetId); 
    if(targetNode.style.display === 'block') { 
     return; // If click is on the node which is already shown, just return 
    } 
    var x = document.getElementById('add'); 
    var y = document.getElementById('modify'); 
    if (x.style.display === 'none') { 
     x.style.display = 'block'; 
     y.style.display = 'none'; 
    } else { 
     y.style.display = 'block'; 
     x.style.display = 'none'; 
    } 
} 

を使用し、

、両方に同じ機能を使用することができます

<label onclick="hideShow('add')"></label> 
<label onclick="hideShow('modify')"></label> 
<fieldset id="add">some text</fieldset> 
<fieldset id="modify">some other text</fieldset>