javascript的问题：在按钮单击时绘制形状

Question

在我的作业开始时，我有一个网页，其中有一个要求输入数字的输入框，以及一个带有选择形状选项的下拉菜单。

下面是一个 SVG 容器，它将按照文本输入中指示的次数绘制该特定形状，但该形状应该只出现一次，因为我将所有迭代都绘制在同一位置，因此它们都重叠。

但无论如何，我的问题是我已经设置了所有内容，但是当我输入（文本输入中的数字和下拉菜单中的形状）时，它只是没有绘制形状。

当我选择选项 1（圆圈）时，它什么也不做

当我选择选项 2（正方形）时，它会画一个正方形

当我选择选项 3（三角形）时，它会绘制一个超小三角形，但我在代码中指定的大小应该至少与正方形一样大。

这是我的代码。我的错在哪里？

HTML：

<main>

<h1>Assignment 4 : Zap-em</h1>

<p>Difficulty: <input type="text" id="howmany"/></p>
<p>
    Shape: 
    <select id="shape">
        <option value="a">Circle</option>
        <option value="b">Square</option>
        <option value="c">Triangle</option>
    </select>
</p>
<button id="btn">Start</button>

<div id="svg1"></div>

</main>

Javascript：

var typed, shape;

draw = function() {
    typed = $('#howmany').val()
    shape = $('#shape').val()


    for ( count = 0; count < typed; count = count + 1) {

        if (shape == "a") {
            circle = paper.cicle(100, 100, 25)
        }
        if (shape == "b") {
            square = paper.rect(100, 100, 50, 50)
        }
        else {
            triangle = paper.path('M25,0 L50,50, L0,50 Z')
        }
    }
}    



setup = function() {
  paper = Raphael('svg1', 400, 400)
    $('button').click(draw)
}
jQuery(document).ready(setup)

Answer 1

您的代码中有一个非常简单的错误。一个拼写错误。 circle 的拼写不正确。如下所示进行正确处理，

circle = paper.circle(100, 100, 25)

然后一切都会好起来的。您可以使用 Firefox 浏览器中的 firebug 插件找到此类错误（特别是 js 错误）。它准确地指出了错误所在。