Question

我有以下按钮：

<input type="button" onclick="printDiv('print-content')" value="print a div!"/>

以下是JavaScript：

<script>
$(function() {
  function printDiv(divName) {
   alert('s')
     var printContents = document.getElementById(divName).innerHTML
     w=window.open()
     w.document.write(printContents)
     w.print()
     w.close()
  }
})
</script>

当我点击printDiv时，虽然我收到以下错误：

未捕获的ReferenceError：printDiv未定义付款历史记录：398 的onclick

我真的不明白。

Answer 1

因为printDiv不在全球范围内。你用一个函数包装它。因此，printDiv范围在该直接函数内，而不是全局范围。

JavaScript scoping and Hoisting

Answer 2

我做了一些改变。希望他们会帮助你。

首先，我使用jquery为click事件定义了一个回调函数，然后显示div内容。

这是片段

 function printDiv(divName) {

   //Then we locate the innerHTML of the div named divName
   var printContents = document.getElementById(divName).innerHTML
     //show them in an alert
   alert(printContents);
   //And Document.write
   document.write(printContents)
 }


 //I used jquery to asign and capture the click function
 $("input").click(function(value) {
   //there i call the print function with the value attr of the clicked obj
   printDiv(this.value);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="print-div"></div>
<input type="button" value="divname" />
<div id="divname">DIVCONTENTS
  </div>

我尝试添加一个新代码段来向您展示它是如何工作的！这只是一个练习，向您展示变量和函数如何在javascript中工作。

请阅读有关函数范围和变量生命周期的Javascript文档。

运行此代码段以查看其工作原理。此致!!

//The global values
var data0 = 0;
var data1 = 0;
var data2 = 0;

$("body").append("BEFORE ALL DATA0 " + data0 + "<BR>");
$("body").append("BEFORE ALL DATA1 " + data1 + "<BR>");
$("body").append("BEFORE ALL DATA2 " + data2 + "<BR>");


$(function() {

  //There, we create a new data2 THIS ONE WILL NOT THE SAME AS GLOBAL ONE. WILL BE A NEWER ONE INSIDE DE FUNCT
  var data2 = 10;
  data0 += 1;
  data1 += 1;
  data2 += 1;

  $("body").append("BEFORE DATA0 " + data0 + "<BR>");
  $("body").append("BEFORE DATA1 " + data1 + "<BR>");
  $("body").append("BEFORE DATA2 " + data2 + "<BR>");


  function printDiv() {

    //data2 must be modified inside but not outside
    var data2 = 0;
    data0 += 1;
    data1 += 1;
    data2 += 1;
    $("body").append("INSIDE DATA0 " + data0 + "<BR>");
    $("body").append("INSIDE DATA1 " + data1 + "<BR>");
    $("body").append("INSIDE DATA2 " + data2 + "<BR>");
  }






  function call() {

    printDiv();

    //ASSIGNED INSIDE, BUT AFFECTING THE GLOBAL DATA
    data0 = 66;
    $("body").append("INSIDE CALL DATA0 " + (data0 + 3) + "<BR>");
    $("body").append("INSIDE CALL DATA1 " + data1 + "<BR>");
    $("body").append("INSIDE CALL DATA2 " + data2 + "<BR>");
  }

  call();

  //THERE YOU CAN CHEK DIFFERENT VALUE OUTSIDE AND INSIDE
  $("body").append("OUTSIDE CALL DATA0 " + data0 + "<BR>");
  $("body").append("OUTSIDE CALL DATA1 " + data1 + "<BR>");
  $("body").append("OUTSIDE CALL DATA2 " + data2 + "<BR>");


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
</body>

为什么我的onclick事件抛出undefined？

2 个答案: