JavaScript 服务器元素 onclick 事件答案

【问题标题】：JavaScript Server element onclick eventJavaScript 服务器元素 onclick 事件
【发布时间】：2014-06-26 10:40:05
【问题描述】：

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';
          }
}");

得到这个错误：

未捕获的类型错误：无法设置属性 'innerHTML' of null

我做错了什么？就是说不准。

谢谢。

【问题讨论】：

您将 lnkShowExportBtn 用于“lnkShowExportBtn.Attributes”，并将相同的变量用于 getElementById。先改一下。
但我需要在点击时更改其 html 文本。怎么可能呢，伙计？感谢您的快速回复。

标签： javascript jquery onclick element getelementbyid

【解决方案1】：

您将'<%=lnkShowExportBtn.ClientID%>' 作为字符串传递，它未评估 来替换您可以在生成的 html 中看到的真实客户端 ID 值。如果你在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';
  }
}

【讨论】：

【解决方案2】：

用 jQuery 试试这个：这里我将点击事件绑定到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();
   });
});

Demo

有关 jQuery 的更多信息：click jQuery

【讨论】：