2011-06-25 7 views
0

ジャバスクリプト以下のコードから、再利用性をjavascript関数に適用する方法はありますか?

window.onload=function() { 
    document.getElementById("next").onclick=function() { 
    document.getElementById("out_est_value").innerHTML=document.getElementById("est_value").value; 
    document.getElementById("out_int_est_value").innerHTML=document.getElementById("est_value").value*0.75; 
    } 
} 

入力

<label>Estimated value of property:</label><input type="text" name="est_value" id="est_value" maxlength="30"class="required number"value=""/> <br> 

出力

<p> You told us the estimated value of your property is &pound;<span class="red" id="out_est_value"></span> based on this we estimate that the initial cash offer is likely be around &pound;<span class="red" id="out_int_est_value"></span>.<p> 
+0

? – Variant

+0

今後どのコードを再利用したいですか? –

+0

"est_value"の値を再利用して別の範囲に表示したい – tony

答えて

2

可能であれば、特性を調べることによってDOMに見出される(例えばgetElementById(x))またはアクセスされるストア・オブジェクト(例えばelement.value )を複数回アクセスすると、別の変数に格納されます(本質的にfindの代わりにそれらを再利用するそれらをもう一度)。あなたが本当にjQueryのを使用している場合、そのようなDOMを見つけるように、それはあなたのためにする便利なものを(それはそれは本当に価値がある!)、抱擁、また

window.onload = function() { 
    var estVal = document.getElementById("est_value") 
    , outEstVal = document.getElementById("out_est_value") 
    , outIntEstVal = document.getElementById("out_int_est_value"); 
    document.getElementById("next").onclick = function() { 
    var val = estVal.value; 
    outEstVal.innerHTML = val; 
    outIntEstVal.innerHTML = val * 0.75; 
    }; 
}; 

:そうすることで、コードの読みやすさとパフォーマンスを向上します要素、これを行うと、おそらく自分自身や他の開発者のためのあなたのコードの保守性を向上させ、あなたは一般的なクロスブラウザの落とし穴を避けるのを助けるなど、HTMLコンテンツを設定し、イベントハンドラを追加:正確に質問です何

$(document).ready(function() { 
    var estVal = $("#est_value") 
    , outEstVal = $("#out_est_value") 
    , outIntEstVal = $("#out_int_est_value"); 
    $("#next").click(function() { 
    var val = estVal.val(); 
    outEstVal.html(val); 
    outIntEstVal.html(val * 0.75); 
    }); 
}); 
+0

jQueryの部分に '.innerHTML'の代わりに' .html() 'を使うことができます。 –

+0

@Ben Alpert:ちょっと、jQueryismを固定しました...) – maerics

+0

@Ben Alpert:上のコードは – tony

関連する問題