「実行時」にhtml要素の値を設定します

Question

私のhtml5 Webアプリケーションでは、DOMがロードされているときにhtml要素のいくつかの値を設定しています。使用される値は、DOMロードが開始された後、対応するhtml DOM要素が追加される前に決定されるいくつかのJavascriptグローバル変数から取得されます。今、私のコードのようなものに見えるの場合：

myBtnText="some value"; 
//.... 

<input type="button" id="myBtn" onclick="DoSomeAction();" /> 
<script type="text/javascript"> 
    document.getElementById("myBtn").value = myBtnText; 
</script> 

をコードが働いているが、私はそれを改善したい、のdocument.getElementById（「myBtnです」）によって行われた呼び出しを避けるために、そしてまた作るためにコードを小さくする。

myBtnTextグローバル変数の値を取得するために助けることができる表現になります/ /

<input type="button" id="myBtn" value=/*<myBtnText>*/ onclick="DoSomeAction();" /> 

：私はそれのような何かを簡素化するために思っています。

可能であれば、どのように考えればいいですか？

Answer 1

あなたはjQueryのを使用した場合は、の線に沿って何かやっによってのdocument.getElementByIdの呼び出しを避ける行うことができます：フィールドの値を取得するために

$('#myBtn').val(); 

をして：

$('#myBtn').val("something"); 

へその値を設定します。あなたはここで多くを学ぶことができます。

http://api.jquery.com/val/

Answer 2

うわー、何を？それはひどい構文のように見えます。 HTMLの中でperlを再開発しようとしていますか？あなたはそのようなことでパーサーを完全に破るでしょう！ DOMの前にボタンの値を設定するのはなぜ

<script> 
function setValue(id, value) { 
    document.getElementById(id).value = value; 
} 
</script> 

Answer 3

：あなたが解決しようとしている問題は、なぜあなたは同じように、適切な関数にコードを減らすことに焦点を当てていないコードの量であるように思われるので

準備はできていますか？これは、ページの解析中にこれを行う1つの方法です。

myBtnText="some value"; 
//.... 
/* some HTML */ 

    <SCRIPT> 
    document.write('<input type="button" id="myBtn" onclick="DoSomeAction();" value="'+myBtnText+'"/>'); 
    </SCRIPT> 

/* more HTML */