ユーザーがテキストボックスを離れるときにリンクボタンを隠す

Question

Webページにテキストボックスと2つのリンクボタンがあります。私は、その値に基づいてテキストボックスにいくつかの値を入れ、また、私はテキストボックスを離れるとすぐに。リンクボタンを非表示にするか、非表示にしたい

<asp:textBox id="textBox1" runat="server"> 
<asp:linkButton id="link1" runat="server"> 
<asp:linkButton id="link2" runar="server"> 

ユーザーがテキストボックスに値「X」を入力したときに、私はリンク1とリンク2を非表示にするそう私はリンク1とリンク2が見えるようにしたいです。ここ

が私のコードであり、それは働いていません。エラーメッセージが表示されて

function HidePick(selectObj) {  
     if (selectObj.value.toUpperCase() == "D9") { 
     document.getElementById("LINK1").style.display = 'none'; 
    } 
} 

    <td><asp:TextBox ID="TXTTest1" runat="server" CssClass="cssTest" Width="30" onmouseout="javascript:HidePick(this);" 

を：

"JavaScript runtime error: Unable to get property 'style' of undefined or null reference

Answer 1

DOM操作のようなもののために、それはjQueryを使って簡単です。

JSフィドル - JavaScriptを使用すると、コントロールの.ClientID使用する必要があるので、最終的なレンダリングIDは、ページ上で変更される可能性がありasp.netでhttps://jsfiddle.net/p8pm6r5r

<asp:TextBox ID="textBox1" runat="server" /> 
<asp:LinkButton ID="link1" runat="server" Text="Button1" /> 
<asp:LinkButton ID="link2" runat="server" Text="Button2" /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<script type="text/javascript"> 

    $(function() { 
     $("#<%= textBox1.ClientID %>").blur(function() { 
      if ($(this).val() === "X") { 
       $("#<%= link1.ClientID %>").hide(); 
       $("#<%= link2.ClientID %>").hide(); 
      } 
     }); 
    }) 
</script> 

Answer 2

...あなたはコードがようにする必要があります

document.getElementById("<%=link1.ClientID%>").style.display = 'none'; 

関連：Accessing control client name and not ID in ASP.NET

Answer 3

<asp:textBox id="textBox1" runat="server"> 
<asp:LinkButton ID="link1" runat="server" Text="Button1" /> 
<asp:LinkButton ID="link2" runat="server" Text="Button2" /> 

Assum jQueryやライブラリを使用したくない場合。
htmls .aspxページの最後に、ボタンをバインドするスクリプトタグを追加してmouseleaveまたはmouseoutイベントにバインドします。テキストボックス1のIDが静的であることを確認するには、ページがブラウザでレンダリングされた後にtextbox1をチェックし、同じIDがまだ存在するかどうかを確認し、そのIDをコピーしてテキストボックス1から（whatever_textbox1）までのjavascriptコードのイベントバインダー行の下にあります。あなたのリンクIDにも同じ手順があります。

document.getElementById("textBox1").addEventListener("mouseout",HidePick,false); 
    function HidePick(e){ 
     if (e.target.value.toUpperCase() == "D9") 
      document.getElementById("LINK1").style.display = 'none';  
    }