0

javascript から div 要素を書き込もうとしています。document.write() を使用して、次のように行を記述します。

<div class="Square15px" onmouseover="changeColor('boxid')"></div>

div 要素を書き込む関数を次のように呼び出します。

<script type="text/javascript">
      colorPicker("box1");
 </script>

次のようないくつかの異なる方法で文字列を作成して、document.write() メソッドを試しました。

function colorPicker(box) {
    var box = document.getElementById(box);
    var boxid = box.id;
    var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor("';
    var AquaStr2 = '")></div>';

    var AquaString = AquaStr1.concat(boxid, AquaStr2);
    document.writeln(AquaString);
}

また、連結演算子として + を使用して、さまざまな方法で文字列を分割しようとしました。文字列が boxid の末尾に正しく作成されません。コード ブロックをどのように記述しても、同じ結果が得られます。

<div class="AquaSquare15px" onmouseover="changeColor(" box1?)=""/>

ここでエラーが表示されないようです。見つけることができるすべてのヘルプを確認しました。quote と box1 の間のスペースを除いて、謎のクエスチョン マークまではすべて正しいです。IE9 開発者ツール (F12) の結果を確認しました。私は経験豊富なプログラマーではないので、何か間違っているのではないかと思います。

4

3 に答える 3

0

問題は引用符にあると思います。次のようにする必要があります。

var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor(\'';
var AquaStr2 = '\')"></div>';

また、関数パラメーターを新しい宣言で上書きしないでください。

function colorPicker(box) {
    var box = document.getElementById(box);

代わりに、次のような別の名前を使用します

function colorPicker(boxid) {
    var box = document.getElementById(boxid);

そうは言っても、要素を id で取得するのはあまり意味がありません。その後、id を読み取ります。

var box = document.getElementById(box);
var boxid = box.id;

ID は関数パラメーターとして既に取得しています。

推奨される結果:

function colorPicker(boxid) {
    var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor(\'';
    var AquaStr2 = '\')"></div>';

    var AquaString = AquaStr1.concat(boxid, AquaStr2);
    document.writeln(AquaString);
}

他の人がすでに示唆しているように、使用しないでくださいdocument.write。たとえば、代わりに jQuery を使用すると、次のようになります。

$('body').append(AquaString);

これがデモです。

于 2013-04-25T19:17:12.880 に答える