1

スタック オーバーフローのおかげで、実行するたびに document.write が Web ページ/プログラムを破壊していると判断しました。多くの場合、答えは innerhtml と document.getElementById を使用することですが、次のケースでは、それを置き換えるために id を割り当てる方法を見て、以下でどのように使用されるかについて頭を悩ませることはできません。以下のすべてを単一の div で再描画したい。その配列を取り、それを垂直に吐き出し、変数「速度」に一致する数値を強調表示するだけです。この変数は、speedcounter 関数を再実行すると変更されるため、強調表示されている数値も変更されます。

これを行うより良い方法はありますか？

そして見てくれてありがとう。

function speedcounter() {

var spx;
var speed = 3;
var sp=["0","3","4","4","4","5","6","7","8"];

document.write('   <h2>Speed</h2></br>');
document.write('<input type="button" onclick="addspeed();" value="+"><br />');   

 for (spx=8; spx>=0; spx--) {
    if (spx == speed) { 
      document.write('<font color=#00FF00>');
     }
    document.write(sp[spx]); 
    document.write('<font color=#000000><br />');
    }
 document.write ('<input type="button" onclick="remspeed();" value="-">');    
 }
4

3 に答える 3

1

jquery の使用を妨げているものはありますか?

次のリンクは、jquery を使用して dom 要素を作成/追加します。 DOMノードをオブジェクトとして作成する方法は?

于 2012-06-12T21:26:11.820 に答える
1

なんらかの理由で jQuery を使用したくない場合は、javascript のみのソリューションを次に示します。

divを作成しました

<div id="speed"></div>​

と を使用document.getElementById()しinnerHTMLて HTML を追加します。それがどのように行われるかを説明するために、コード構造を保持しました。+=div 内の既存の HTML に追加するために使用しています。関数の上部で、クリアします。そうしないと、関数を呼び出すたびに出力の複数のコピーが取得されます。

function speedcounter() {
document.getElementById('speed').innerHTML = "";
var spx;
var speed = 3;
var sp=["0","3","4","4","4","5","6","7","8"];

document.getElementById('speed').innerHTML += '<h2>Speed</h2></br>';
document.getElementById('speed').innerHTML += '<input type="button" onclick="addspeed();" value="+"><br />';

 for (spx=8; spx>=0; spx--) {
    if (spx == speed) { 
        document.getElementById('speed').innerHTML += '<span style="color:#00FF00">' + sp[spx] + '</span><br />';
    } else {
        document.getElementById('speed').innerHTML += sp[spx] + "<br />"; 
    }
 }
 document.getElementById('speed').innerHTML += '<input type="button" onclick="remspeed();" value="-">';    
}

speedcounter();

また、タグを削除し、インライン CSS にfont置き換えて色を設定しました。span

デモ

于 2012-06-12T21:34:18.817 に答える
0

innerHTMLボディのプロパティを直接変更できます。

var body = document.getElementsByTagName('body')[0];
body.innerHTML += '<h2>Speed</h2></br>';

http://jsfiddle.net/YB8HU/

を変更するたびinnerHTMLにブラウザがレイアウトを再処理することに注意してください。そのため、HTML 文字列を変数に割り当て、実際にスクリプトの最後にある本文に追加することを検討してください。

于 2012-06-12T21:33:38.647 に答える