制作 onclick 按钮创建绘图答案

【问题标题】：Making an onclick button create a drawing制作 onclick 按钮创建绘图
【发布时间】：2016-07-01 02:33:37
【问题描述】：

我正在尝试制作贺卡生成器。应该发生的是，当用户单击“制作卡片”按钮时，“贺卡”图形将出现在屏幕上，但到目前为止，没有任何反应。我也希望 div1 和 div2 在单击按钮时消失，以便屏幕上只保留贺卡图。我该怎么做？非常感谢您提前提供的帮助。

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

【问题讨论】：

请包含具体的错误或问题。如果您没有，请找到一个并更新问题。
问题是当按钮被按下时，我没有让绘图出现。
您应该已经看到一个错误。你有“function draw() {”未关闭。最后加一个“}”。你也有 "var c=document.getElementById("myfillDrawing");"但我在您的 HTML 代码中没有看到任何“myfillDrawing”。
您正在搜索带有 id="myfillDrawing" 的元素，但 DOM 中没有匹配的元素。试试document.getElementById("card")
感谢您发现这一点，由于某种原因，我的编译器没有出错。仍然关闭，什么都没有发生。

标签： javascript html css

【解决方案1】：

需要进行以下更改。 1.函数的右括号({) 2.将div1和div2的样式显示设置为none 3.将canvas的id改为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>

【讨论】：

非常感谢您的帮助。还有一个问题。我做了同样的事情，只是我使用了 style.visibility = "hidden" 而不是 style.display = "none"。如果有的话，有什么区别？
你可以参考stackoverflow.com/questions/133051/…