скрывает кнопки ссылок, когда пользователь покидает текстовое поле

Question

У меня есть текстовое поле и две кнопки ссылок на моей веб-странице. Когда я поместил некоторое значение в текстовое поле, на основе этого значения, а также, как только я покину текстовое поле. Я хочу скрыть или сделать кнопку ссылки невидимой.

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

, когда пользователь вводит значение «X» в текстовом поле, я хочу, чтобы скрыть LINK1 и LINK2 в противном случае я хочу Link1 и Link2 быть видимым.

вот мой код и он не работает:

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 Fiddle - 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

В asp.net вынести окончательный идентификатор может измениться на странице, так и на Javascript необходимо использовать .ClientID управления ... Вы код должен быть как:

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 события. Чтобы убедиться, что ваш идентификатор textbox1 является статичным (как он есть в вашем источнике), как только ваша страница будет отображаться в браузере, проверьте свой текстовый блок 1 и посмотрите, есть ли у него все тот же идентификатор, если нет, тогда скопируйте этот идентификатор и замените его ниже строки привязки события javascript-кода от textbox1 до (whatever_textbox1). Тот же шаг для ваших идентификаторов ссылок.

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