JavaScriptがHTML属性として不適切ですか？

Question

例：https://stackoverflow.com/a/37289566/710887

私はこれがますます頻繁に起こっているのを見る。

私はいつもjavascript、css、およびhtmlを別々に保つように教えられました（もちろん、ソース/スクリプトへのhtmlリンクもあります）。

HTML属性（例：onclick, onchange, etc:）でJavascriptを使用していますか？

<span id="valBox">25</span> 
 
<input type="range" min="5" max="50" step="1" value="25" onchange="valBox.textContent = this.value">

Answer 1

が間違っていますそれ自体ですが、大多数の人が悪い習慣とみなしています。

可能な限りHTMLとJavascriptを分離することをお勧めします。 CSSと同じ概念です。 HTML、CSS、Javascriptを同じファイルに混ぜることは非常に迅速に扱いにくくなる可能性があり、避けてください。

理想的には、2つのファイルは別々のファイル（.htmlと.jsファイル）である必要がありますが、HTMLで区切ることは良い最初のステップです。

あなたがそうのように、イベントリスナーを使用して、2つを分離することができます：あなたがIE < = 9をサポートする必要がある場合

<!-- The elements --> 
<span id="valBox">25</span> 
<input id="inputBox" type="range" min="5" max="50" step="1" value="25"> 

<script> 
    // Grab the elements here 
    var val = document.getElementById("valBox"); 
    var inp = document.getElementById("inputBox"); 

    // Add an event listener to the input element and 
    // set the span value when it changes 
    inp.addEventListener("change", function() { 
     val.textContent = this.value; 
    }); 
</script> 

はthis answerを参照してください。

Answer 2

それはあなたがエラーや予期しない結果を取得する場合、あなたはそれが技術的に悪い意味、エラーの原因となるコードをトレース難しく時間を持っているという点で、厄介で、手に負えないことができ練習。あなたが提供したコードを非常に簡単に置き換えることができます。

<script> 
    //Scripts 
    ...   
    function MyMethodName(val){ 
     ...("#valbox").text = val; 
    }; 
</script> 
... 
<span id="valBox">25</span> 
<input type="range" min="5" max="50" step="1" value="25" 
onchange="MyMethodName(this.value)"> 

または構文的に正しいものを置き換えることができます。

EDIT： これは、jQueryの

一般に

<script> 
    $('#inputID').change(function(){ 
     $('#valbox').text($('#inputID').val()); 
    }); 

<span id="valBox">25</span> 
<input id="inputID" type="range" min="5" max="50" step="1" value="25"> 

</script> 

Answer 3

を使用して非インライン同等です、はい、それは非常に悪い習慣ですテストは/迅速な実装をしながら、しかし、時には、それははるかに高速です：

<button onclick="alert('Hello World!');">Hey There!</button> 

VS

<script> 
    window.onload = function() 
    { 
     document.getElementById("button").onclick = function() 
      { 
       alert("Hello World!"); 
      } 
    } 
</script> 
<button id="button">Hey There!</button> 

はリットル、と述べましたatterは、デバッグ/コードメンテナンスに非常に適しています。

Answer 4

各属性は新しいリスナーです。より多くの属性、より重い。 JSとHTMLを混在させるのは良い方法ではありません。それを懸念の分離と考えてください。マークアップはクライアントにUIを提供するためのものです。 JSの仕事（ブラウザで）は、ユーザーエクスペリエンスを向上させることです。彼らは一緒に仕事をする必要がありますが、別の仕事があります。したがって、それらは別個の実体として扱われるべきである。