コントロールからcliendidをASPのパラメータとしてjavacript関数に渡します

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')" /> 

を更新

謝罪を、私は十分に払っていません質問への注意。私の答えの問題は、HEADのように、DOMが作成される前にスクリプトを実行する必要があるということです。

あなたが望むように動作させるには、イベントリスナーを要素に付ける必要があります。また、リスナー・コードのターゲットを動的に関連付ける方法も必要です。あなたは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'); 
    }