Button doesn't call script - onclick method

Question

For some reason my button isn't calling the script and Chrome's Console replies with the error "Unexpected token }"

Here is the script:

 <script type="text/javascript" src="js/jquery-1.10.2.min.js">
 function printContent(el){
 var restorepage = document.body.innerHTML;
 var printcontent = document.getElementById(el).innerHTML;
 document.body.innderHTML = printcontent;
 window.print();
 document.body.innderHTML = restorepage;
 }
</script>

Here is my button:

echo '<center>
 <button onclick="printContent("printable");" class="btn btn-default">
 <span class="glyphicon glyphicon-print"></span> &nbsp; Print
 </button>
 </center> ';

The reason for the echo is cause I am using PhP to call the button depending on the situation.

The div it's suppose to be printing looks something like this:

<div class="container" id="printable">

• omarjmh: its innerHTML not innderHTML, fyi
• Jeff Puckett: you've also got nested quoting issues, should be escaped single inside double inside single onclick="printContent(\'printable\');"
• Dean Byron: @JordanHendrix Thank you :P Don't know why I didn't see that

Answer 1

You need to close the <script> tag that imports jQuery and create a new <script> tag in which you can put your own JavaScript, like this:

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script>
 function printContent(el) {
 var restorepage = document.body.innerHTML;
 var printcontent = document.getElementById(el).innerHTML;
 document.body.innerHTML = printcontent;
 window.print();
 document.body.innerHTML = restorepage;
 }
</script>

As mentioned before, you made a typo while typing innerHTML, which I fixed in the above code, and an error because you're using double quotes twice in the onclick, which you can fix by changing your echo to this:

echo '<center>
 <button onclick="printContent(\'printable\');" class="btn btn-default">
 <span class="glyphicon glyphicon-print"></span> &nbsp; Print
 </button>
 </center> ';

• Dean Byron: Thank you so much! Works perfect now, the only problem now is that it doens't JUST print the div but instead it prints the entire page, but thank you once again :)

Answer 2

change this :

document.body.innderHTML = restorepage;

to this :

document.body.innerHTML = restorepage;

and change this :

<button onclick="printContent("printable");" class="btn btn-default">

to this :

<button onclick="printContent(\'printable\');" class="btn btn-default">

I advice you to use CSS instead of <center> tag .

Answer 3

What I've changed is basically from double quote to single one inside printContent, but you can use backslash to escape the double quote.

<center>
 <button onclick="printContent('printable')" class="btn btn-default">
 <span class="glyphicon glyphicon-print"></span> &nbsp; Print
 </button>
</center>

What I've corrected is the typo from innderHTML to innerHTML and corrected script tag, that was closed wrongly.

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script>
 function printContent(el){
 var restorepage = document.body.innerHTML;
 var printcontent = document.getElementById(el).innerHTML;
 document.body.innerHTML = printcontent;
 window.print();
 document.body.innerHTML = restorepage;
 }
</script>

• omarjmh: you should explain what you changed, and why
• Evandro Cavalcate Santos: @JordanHendrix yes, I should... I've totally forgot... I'll be editting my post! Thank you for the feedback Jordan