Javascriptでクリックしてdivを表示しない（既に他のdivを表示しているクリック）

Question

私は、会社のウェブサイトのページの下部に使用されるフィードバック機能を構築しました。訪問者は、「この情報はあなたにとって有益でしたか？」という質問に対してYESまたはNOに投票することができます。クリックはJavascript経由でdiv（feedbackDiv1/feedbackDiv2）を表示します。

この機能は機能しますが、訪問者が投票した後に質問と回答ボタンが消えるようにします。 div #pagefeedbackを非表示にします。

私はすべてのツールを試しましたが、これを動作させることはできません。

助けていただければ幸いです。

がこれではJavaScriptを使用している：

<div class="greycontentbox"> 

<div id="pagefeedback"> 
<h4 style="text-align: center;">Was this information useful to you?</h4> 
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5"> 
    <tbody> 
    <tr> 
     <td align="center"><a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback1()"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES</a></td> 
     <td align="center"><a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback2()"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO</a></td> 
    </tr> 
    </tbody> 
</table></div> 


<div align="center"><div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">POSITIVE FEEDBACK</div></div> 
<div align="center"><div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">NEGATIVE FEEDBACK</div></div> 
</div> 

敬具、 ピート

Answer 1

を、あなたのテーブルにIDを与える場合：

function showFeedback1() { 
    document.getElementById('feedbackDiv1').style.display = "block"; 

function showFeedback2() { 
    document.getElementById('feedbackDiv2').style.display = "block";} 

をこれはHTMLが使用されています表示するCSSをnoneに変更するのはかなり簡単です。また、1つの関数を使って同じことを達成できます。引数を渡すだけで、条件文で適切なフィードバックを表示できます。ロバートの答えに基づいて

function showFeedback(feedback) { 
 
    if (feedback == 'yes') { 
 
    document.getElementById('feedbackDiv1').style.display = "block"; 
 
    } else { 
 
    document.getElementById('feedbackDiv2').style.display = "block"; 
 
    } 
 
    document.getElementById('options').style.display = "none"; 
 
}

<div class="greycontentbox"> 
 
    <div id="pagefeedback"> 
 
    <h4 style="text-align: center;"> 
 
     Was this information useful to you? 
 
    </h4> 
 
    <table align="center" width="70%" border="0" cellspacing="2" cellpadding="5"> 
 
     <tbody id="options"> 
 
     <tr> 
 
      <td align="center"> 
 
      <a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback('yes')"> 
 
       <i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES 
 
      </a> 
 
      </td> 
 
      <td align="center"> 
 
      <a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback('no')"> 
 
       <i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO 
 
      </a> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
    <div align="center"> 
 
    <div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list"> 
 
     POSITIVE FEEDBACK 
 
    </div> 
 
    </div> 
 
    <div align="center"> 
 
    <div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list"> 
 
     NEGATIVE FEEDBACK 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

、あなたが示されなければなら要素のIDを受け取り、単純な機能を行うことができます。

function showFeedback(feedback) { 
 
    document.getElementById(feedback).style.display = "block"; 
 
    document.getElementById('options').style.display = "none"; 
 
}

<div class="greycontentbox"> 
 

 
<div id="pagefeedback"> 
 
<h4 style="text-align: center;">Was this information useful to you?</h4> 
 
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5"> 
 
    <tbody id="options"> 
 
    <tr> 
 
     <td align="center"><a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback('feedbackDiv1')"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES</a></td> 
 
     <td align="center"><a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback('feedbackDiv2')"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO</a></td> 
 
    </tr> 
 
    </tbody> 
 
</table></div> 
 

 

 
<div align="center"> 
 
<div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">POSITIVE FEEDBACK</div></div> 
 
<div align="center"><div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">NEGATIVE FEEDBACK</div> 
 
</div> 
 
</div>