-1

Innertext に基づいて div を動的に設定しようとしています。これが機能しない理由を誰かに教えてもらえますか?

<div id="bs3" class="survey_dashboard_item" onclick="window.open('/building-specifications?bldgaddress=333 Johnson','_self');" style="font-size:40px; border:1px solid #bbb;">
    <script>
        window.onload = function Element(id) {
            if (this.innerText == '333 Johnson') {
                document.write('<div style="float:left; padding-left:10px; padding-top:10px;"><img src="/checkmark.png" title="Project Entered"></div>');
            } else {

            }
        }
    </script>

        ***333 Johnson***</div>
4

3 に答える 3

1

理由は 3 つあります。

  • ドキュメントが完成したときにコードを実行すると、ブラウザに応じて、document.writeドキュメント全体document.openが (暗黙的に呼び出されるように) 置き換えられるか、無視されます。ドキュメントが既に解析されている場合は、ドキュメントに書き込むことはできません。

  • メソッドのコンテキスト ( this) は、script タグが内部にある要素ではなく、イベントが発生するオブジェクト (この場合はwindowオブジェクト) です。

  • プロパティはinnerTextInternet Explorer でのみ機能します。

スクリプト タグを の外に置きdivます。そうしないと、チェックに干渉する可能性があります。innerHTMLプロパティを使用してコンテンツを取得および設定できます。

<div id="bs3" class="survey_dashboard_item" onclick="window.open('/building-specifications?bldgaddress=333 Johnson','_self');" style="font-size:40px; border:1px solid #bbb;">333 Johnson</div>

<script> type="text/javascript"
window.onload = function() {
  var el = document.getElementById('bs3');
  if (el.innerHTML == '333 Johnson') {
    el.innerHTML = '<div style="float:left; padding-left:10px; padding-top:10px;"><img src="/checkmark.png" title="Project Entered"></div>' + el.innerHTML;
  }
};
</script>
于 2014-06-01T19:37:25.463 に答える
1

そのような場合は必要ありませんし、使用すべきではありませんdocument.write()。
あなたはそれを行うことができます：

<script type="text/javascript">
    function update_bs_3(){
        var el = document.getElementById('bs3');
        if (el.innerHTML.trim() == '333 Johnson') {
            el.innerHTML = '<div style="float:left; padding-left:10px; padding-top:10px;"><img src="/checkmark.png" title="Project Entered"></div>';
        }
    }
</script>

次に、イベント ハンドラーを body 要素に配置します。

<body onload="update_bs3();">

そして、ここにフィドルがありますhttp://jsfiddle.net/DxjGv/1/

編集:そして、ここに複数のdivのバージョンがあります:

HTML:

<div id="bs1" class="survey_dashboard_item" onclick="window.open('/building-specifications?bldgaddress=111 Steve','_self');" style="font-size:40px; border:1px solid #bbb;">
    111 Steve</div>
<div id="bs2" class="survey_dashboard_item" onclick="window.open('/building-specifications?bldgaddress=222 Frankie','_self');" style="font-size:40px; border:1px solid #bbb;">
    222 Frankie</div>
<div id="bs3" class="survey_dashboard_item" onclick="window.open('/building-specifications?bldgaddress=333 Johnson','_self');" style="font-size:40px; border:1px solid #bbb;">
    333 Johnson</div>

JS:

function update_bs_divs(){
    var divs = {
        'bs1': {
            'match': '111 Steve',
            'replacement': '<div>Steve replaced</div>'
        },
        'bs2': {
            'match': '222 George',
            'replacement': '<div>George replaced</div>'
        },
        'bs3': {
            'match': '333 Johnson',
            'replacement': '<div>Johnson replaced</div>'
        }
    };
    for (var id in divs) update_div(id, divs[id].match, divs[id].replacement);
};

function update_div(id, match, replacement){
    var el = document.getElementById(id);
    if (!el || (el.innerHTML.trim() != match)) return;
    else el.innerHTML = replacement;
}

window.onload = update_bs_divs;

この JS コードをファイルに保存し、HTML の head セクションに含めます。

フィドルはこちら - http://jsfiddle.net/DxjGv/2/

于 2014-06-01T19:36:19.340 に答える
0

Document.write は、空白ページに文字列を出力します。

append/prependChildまたはを使用する必要がありinnerHTMLます。

于 2014-06-01T19:34:16.970 に答える