Making an onclick button create a drawing

Question

I am trying to make a greeting card generator. What is supposed to happen is that when the user clicks the "make card" button, The "Greeting Card" drawing will appear on the screen but so far, nothing happens. Also I would like it so that the div1 and div2 disappear when the button is clicked so that only the greeting card drawing remains on the screen. How would I do that? Thanks a lot for your help in advance.

<html>
<head>
    <title>Greeting Card Generator</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript">
      function draw() {                           
            var c=document.getElementById("myfillDrawing");
            var ctx=c.getContext("2d");
            ctx.strokeStyle= "#FF0000";
            ctx.lineWidth = 10;
            ctx.strokeRect(125, 25, 150, 50);
            ctx.fillStyle = "blue";
            ctx.font = "22px Arial";
            ctx.fillText("Greeting Card", 135, 55);
    </script>
    <style>
        #div1{
            background-color: cyan;
            font-family: "Arial Black", Gadget, sans-serif;
            font-size: 24px;
            text-align: center;
            border: 25px solid red;
            padding: 25px;
            width: 50%;
            margin: 0 auto;
        }
        #div2{
            background-color: cyan;
            font-family: "Arial Black", Gadget, sans-serif;
            font-size: 24px;
            text-align: center;
            border: 25px solid orange;
            padding: 25px;
            width: 50%;
            height: 300px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="div1">Greeting Card Generator</div>
    <div id="div2"> Content Goes Here 
        <br>
        <input type="button" value="make card" id="draw" onclick="draw();">  
    </div>    
    <canvas id="card" width="400" height="100"></canvas>
</body>

Please include a specific error or problem. If you don't have one, then please find one and update the question. — JDB, Jun 30 '16 at 18:10
The problem is that when the button is pressed, I am not getting the drawing to appear. — Orphan_Crippler, Jun 30 '16 at 18:12
You should be already seeing an error. You have "function draw() { " unclosed. Put a "}" at the end. Youa lso have "var c=document.getElementById("myfillDrawing");" but i dont see any "myfillDrawing" in your HTML code. — Strahdvonzar, Jun 30 '16 at 18:13
You are searching for an element with `id="myfillDrawing"` but there is no matching element in the DOM. Try `document.getElementById("card")` — Dave, Jun 30 '16 at 18:13
Thanks for spotting that, for some reason I wasn't give an error on my compiler. Still with that closed, nothing is happening. — Orphan_Crippler, Jun 30 '16 at 18:14
That's not a specific error message. Please look at [your console](https://developer.chrome.com/devtools/docs/console) and report back with the error message. — JDB, Jun 30 '16 at 18:15

score 0 · Answer 1 · answered Jun 30 '16 at 18:33

Following changes need to be done. 1. close bracket({) of function 2.set style display to none for div1 and div2 3.change id of canvas to myfillDrawing

<html><head>
<title>Greeting Card Generator</title>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script type="text/javascript">function draw() {                           
        var c=document.getElementById("myfillDrawing");
        var ctx=c.getContext("2d");
        ctx.strokeStyle= "#FF0000";
        ctx.lineWidth = 10;
        ctx.strokeRect(125, 25, 150, 50);
        ctx.fillStyle = "blue";
        ctx.font = "22px Arial";
        ctx.fillText("Greeting Card", 135, 55);
        document.getElementById("div1").style.display="none";
        document.getElementById("div2").style.display="none";
        }
</script>
<style>
    #div1{
        background-color: cyan;
        font-family: "Arial Black", Gadget, sans-serif;
        font-size: 24px;
        text-align: center;
        border: 25px solid red;
        padding: 25px;
        width: 50%;
        margin: 0 auto;
    }
    #div2{
        background-color: cyan;
        font-family: "Arial Black", Gadget, sans-serif;
        font-size: 24px;
        text-align: center;
        border: 25px solid orange;
        padding: 25px;
        width: 50%;
        height: 300px;
        margin: 0 auto;
    }
</style>
</head>
<body>
<div id="div1">Greeting Card Generator</div>
<div id="div2"> Content Goes Here 
    <br>
    <input type="button" value="make card" id="draw" onclick="draw();">  
</div>    
<canvas id="myfillDrawing" width="400" height="100"></canvas>
</body>

Thanks a lot for your help. one more question. I did the same thing only i used style.visibility = "hidden" instead of style.display= "none". What difference does it make if any at all? — Orphan_Crippler, Jun 30 '16 at 18:44
You can refer same from http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone — atul kushwaha, Jun 30 '16 at 18:59

Making an onclick button create a drawing

1 Answers1