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错误）。它正是指出了bug的位置。

javascript问题：点击按钮时绘制形状

1 个答案: