2016-12-05 73 views
-2

对于我的任务的开始,我有一个网页,在那里我有一个要求的数对应的输入框,下拉菜单中的选项选择的形状。故障使用javascript:在按钮绘制形状点击

下面是一个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) 
+0

跆拳道为什么人们downvoting呢?我的问题有什么问题?它完全有效的,我已经证明了我的工作.... –

+0

可能是因为错误是由一个简单的错误这会已经陷入简单地调试自己造成的。 – LuudJacobs

+0

我修复了这个问题。你可以给我一个upvote来取消downvote吗? –

回答

1

有一个在你的代码非常简单的错误。拼写错误。拼写为circle不正确。正确如下,

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

然后一切都会好的。您可以在Firefox浏览器中使用firebug加载项发现此类错误(特别是js错误)。这正是指出错误的地方。

+0

我刚刚解决这个问题,但它仍然无法正常工作。还有什么可能出错? –

+1

@JohnnySack什么,当我想你的代码,并修正'cicle'到'circle'它的工作。你有没有在控制台看到更多的错误?像缺少jQuery或Raphael?此外,我做了一个小提琴,代码看起来有点不同,但这是有效的:https://jsfiddle.net/2b4ys3je/ –

+0

@JohnnySack根据Alex建议检查您使用的库。因为即使我的小提琴也能很好地矫正。 – SilentCoder