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">

you've also got nested quoting issues, should be escaped single inside double inside single onclick="printContent(\'printable\');" — Jeff Puckett
– Jeff Puckett, Commented Jun 6, 2016 at 23:06
@JordanHendrix Thank you :P Don't know why I didn't see that — Dean Byron
– Dean Byron, Commented Jun 6, 2016 at 23:21

leroydev · Accepted Answer · 2016-06-06 23:06:25Z

7

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> ';

answered Jun 6, 2016 at 23:06

leroydev

2,97520 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dean Byron Over a year ago

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 :)

Bouzaid · Accepted Answer · 2016-06-06 23:47:33Z

0

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 .

answered Jun 6, 2016 at 23:47

Bouzaid

668 bronze badges

Comments

Andrew Li · Accepted Answer · 2017-03-08 00:04:00Z

0

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>

edited Mar 8, 2017 at 0:04

Andrew Li

58.1k14 gold badges135 silver badges150 bronze badges

answered Jun 6, 2016 at 23:20

Evandro Cavalcate Santos

3733 silver badges13 bronze badges

2 Comments

omarjmh Over a year ago

you should explain what you changed, and why

Evandro Cavalcate Santos Over a year ago

@JordanHendrix yes, I should... I've totally forgot... I'll be editting my post! Thank you for the feedback Jordan

Collectives™ on Stack Overflow

Button doesn't call script - onclick method

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related