JavaScript服務器元素onclick事件

Question

HTML

<a id="lnkShowExportBtn" runat="server">Look at image</a>

jQuery的

lnkShowExportBtn.Attributes.Add("onclick", @"{ var rowImage = document.getElementById('rowImage');
    if(rowImage.style.display == 'none')
           {
            rowImage.style.display = 'block';
            var lnkShowExportBtn = document.getElementById('<%=lnkShowExportBtn.ClientID%>');
            lnkShowExportBtn.innerHTML = 'Hide image';
          }
    else  {
            rowImage.style.display = 'none';
            var lnkShowExportBtn = document.getElementById('<%=lnkShowExportBtn.ClientID%>');
            lnkShowExportBtn.innerHTML = 'Look at image';
          }
}");

---

得到這個錯誤：

未捕獲的TypeError： 無法將屬性'innerHTML'設置為null

我究竟做錯了什么？ 只是無法達到目的。

謝謝。

Answer 1

您正在將'<%=lnkShowExportBtn.ClientID%>'作為字符串傳遞，並且不對其進行評估以替換實際的客戶端ID值，您可以在生成的html中看到該值。 如果您在aspx中添加javascript並將其綁定在服務器端，則會簡單得多。

在后面的代碼中

lnkShowExportBtn.Attributes.Add("onclick", "YourFunction()");

或者，在ASPX中

<a id="lnkShowExportBtn" runat="server" onclick="YourFunction();">Look at image</a>

在JavaScript中

function YourFunction() 
{   
  var rowImage = document.getElementById('rowImage');
  if (rowImage.style.display == 'none') {
      rowImage.style.display = 'block';
      var lnkShowExportBtn = document.getElementById('<%=lnkShowExportBtn.ClientID%>');
      lnkShowExportBtn.innerHTML = 'Hide image';
  } else {
      rowImage.style.display = 'none';
      var lnkShowExportBtn = document.getElementById('<%=lnkShowExportBtn.ClientID%>');
      lnkShowExportBtn.innerHTML = 'Look at image';
  }
}

Answer 2

嘗試使用jQuery：在這里，我將click事件綁定到lnkShowExportBtn並借助if條件（檢查圖像是否可見）來更改其內部html。 通過使用.toggle() ，我可以隱藏和顯示圖像。

$(document).ready(function(){

  $('#lnkShowExportBtn').click(function(){
       var innerHtml = 'Hide image';
       if($('.rowImage').is(':visible'))
      {
        innerHtml = 'Look at image';
      }
      $(this).html(innerHtml);
      $('.rowImage').toggle();
   });
});

演示

有關jQuery的更多信息： 單擊jQuery