-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

你不需要也不应该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 头部部分中。

小提琴在这里 - http://jsfiddle.net/DxjGv/2/

于 2014-06-01T19:36:19.340 回答
1

出于三个原因：

  • 您在文档完成时运行代码，然后document.write将替换整个文档（document.open隐式调用），或者将其忽略，具体取决于浏览器。当文档已经被解析时，您不能写入文档。

  • 方法 ( ) 的上下文this不是脚本标签所在的元素，它是事件发生的对象，在本例中是window对象。

  • 该innerText属性仅适用于 Internet 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 回答
0

Document.write 将字符串打印到空白页中。

您必须使用append/prependChild或innerHTML。

于 2014-06-01T19:34:16.970 回答