开发者问题收集

getElementbyID 返回 Null

2013-09-22
230
javascript

我正在尝试创建一个 javascript 调用，该调用的 onclick 将创建页面特定部分的新窗口，然后打印它。

为此，我正在修改其他人的 SF 答案，该答案试图做类似的事情 

<div class="patienspecials clearfix" id="print_div1">
    <h1>Bla bla bla</h1> 
    <a href="#" onclick="printInfo(print_div1)"><img 
        class="alignnone size-full wp-image-6196" alt="print-icon" 
        src="#" width="92" height="28" /></a>
</div>

我正在尝试将 div print_div1 作为参数传递给此函数 -- 

<script type="text/javascript">
function printInfo(ele) {
    var openWindow = window.open("", "title", "attributes");
    openWindow.document.write(document.getElementById(ele));
    openWindow.document.close();
    openWindow.focus();
    openWindow.print();
    openWindow.close();
}
</script>

但是，当我运行脚本时，打印命令只会创建一个带有文本“null”的新页面。

我很确定我对 getElementById 的操作有问题，你们对如何使其工作有什么想法吗？仍然是个菜鸟，非常感谢帮助！

干杯

2个回答

printInfo(print_div1) 将传递 ID 为 print_div1 的元素，而不是传递字符串 'print_div1' 。

只需更新您的 JavaScript 以使用传递的元素，而不是尝试将其用作要查询的字符串 ID： 

<script type="text/javascript">
function printInfo(ele) {
    var openWindow = window.open("", "title", "attributes");
    //no longer need to select the element by ID, just use it
    openWindow.document.write(ele);
    openWindow.document.close();
    openWindow.focus();
    openWindow.print();
    openWindow.close();
}
</script>

如果您出于某种原因确实想使用 document.getElementById() ，只需确保在您的内联事件中引用字符串 id： 

<div class="patienspecials clearfix" id="print_div1">
    <h1>Bla bla bla</h1> 
    <!-- Notice the quotes around 'print_div1' -->
    <a href="#" onclick="printInfo('print_div1')"><img 
        class="alignnone size-full wp-image-6196" alt="print-icon" 
        src="#" width="92" height="28" /></a>
</div>

更改其中之一（但不能同时更改）应该可以正常工作。希望这对您有所帮助！

Chad
2013-09-22

这是因为您传递了一个未定义的变量 print_div1 而不是字符串。使用：

<a onclick="printInfo('print_div1')">...</a>

Tim Wax
2013-09-22