Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Andrew Young
PLUS
Andrew Young
Courses Plus Student 639 Points

html2canvas issue

I am using the following code for my project

<html>
<head>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script language="javascript">
$("#conv").click(function() {
//var testdiv = document.getElementById("testdiv");
    html2canvas($("#testdiv"), {
        onrendered: function(canvas) {
            // canvas is the final rendered <canvas> element
            var myImage = canvas.toDataURL("image/png");
            window.open(myImage);
        }
    });
});
</script>
</head>
<body>
<div id="testdiv" contenteditable>

</div>
<button id="conv">Convert</button>
</body>
</html>

But the button click can't convert to an image but when you change button click to document ready it works why?

1 Answer

Keith Kelly
Keith Kelly
21,326 Points

One comment I have is that you should be putting your scripts just before the closing body tag. This allows the entire DOM to load before the scripts are loaded and executed.

The reason it is not working in your current setup is because the script is running before the DOM loads and can't find the button because it doesn't exist yet. That is also why it is working when you use document ready.

So the two options you would have would to move the scripts to just before the closing body tag or to run the script with document ready.