Question

我正在尝试创建一个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>

但是，当我运行脚本时，print命令只是创建一个文本为“null”的新页面。

我很确定我对getElementById做错了什么，你们对如何使这项工作有任何想法吗？仍然是一个菜鸟，并希望得到帮助！

干杯

Answer 1

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>

更改任何一个（但不是两个）应该可以正常工作。希望这有帮助！

Answer 2

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

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

getElementbyID返回Null

2 个答案: