javascript - 将 cliendid 从控件作为参数从 ASP 传递到 javascript 函数

Question

我有一个函数可以在文本框中显示密码，另一个函数可以隐藏密码以及如何显示点。

这是其中之一:

function MouseOver_MudarTipoPassword() {
        document.getElementById('<%= tb_PalavraPasse.ClientID %>').setAttribute('type', 'singleline');
    }

以及具有事件的控件:

<img id="img_Eye" runat="server" src="~/Recursos/Imagens/eye-icon.png" onmouseover="MouseOver_MudarTipoPassword()" onmouseout="MouseLeave_MudarTipoPassword()" />

所以，我一直在清理代码，因为有几个页面正在使用一些函数，我将它们组合到一个 JavaScript 文件中。如果我把它放在页面的头部，它会像这样工作。但我想通过一个论点来代替。我想传递文本框 clientid。我怎样才能做到这一点？

Answer 1

使函数接受参数:

function MouseOver_MudarTipoPassword(elementId) {
        document.getElementById(elementId).setAttribute('type', 'singleline');
    }

将 id 传递给函数调用:

<img id="img_Eye" runat="server" src="~/Recursos/Imagens/eye-icon.png" onmouseover="MouseOver_MudarTipoPassword('img_Eye')" onmouseout="MouseLeave_MudarTipoPassword('img_Eye')" />

Update

抱歉，我没有足够重视这个问题。我的答案的问题是脚本必须在创建 DOM 之前运行，就像在 HEAD 中一样。

要使其按照您想要的方式工作，您必须将事件监听器附加到您的元素。您还需要一种方法来动态关联监听器代码的目标。您可以使用 data-* 属性来做到这一点。

See this fiddle for working example

示例标记:

<input type="text" id="theTextBox" value="The IT Crowd" />
<hr />
<img id="Moss" src="https://media0.giphy.com/media/TrDxCdtmdluP6/giphy.gif" data-target="theTextBox" />

的示例 JavaScript:

var test = document.getElementById("Moss");

test.addEventListener("mouseover", MouseOver_MudarTipoPassword, false);

function MouseOver_MudarTipoPassword( event ) {   
    var theImg = event.srcElement;
    var target = theImg.dataset.target; //re-use this function by applying data-target to all elements that need it (does not have to be named "target")
    document.getElementById(target).setAttribute('type', 'password');
  }