Javascript Jquery在使用函数时出现意外标记

我对Javascript和HTML非常陌生，所以我怀疑我犯了一个新手错误，但我似乎无法理解

我的

html

文档中有一个下拉菜单，当按下旁边的按钮时，我想使用

svg

绘制一个正多边形并将其添加到

div

。不幸的是，我一直在第二行的花括号中看到“意外标记”。以下是js代码：

$(document).ready(function(){

    $('#pull-me').click(function(){
        $('.panel').slideToggle('slow');
    })

    $('.polygon').function(){
        $('#updatebutton').click(function(){
            var n = parseInt($('#nvalue').val());
            var coords = '';
            for (i=0; i< n; i++){
            coords += (250 + 225*Math.sin(2*Math.PI*i/n)).toString() + ',' + (250 + 225*Math.cos(2*Math.PI*i/n)).toString() + ',';
            };
            coords = coords.substring(0,coords.length - 1);
        )};
        var $drawing = '<svg height="500" width="500" id="shape"> <!-- The center of the polygon is at the point 250,250 --> <polygon points=' +coords+ 'style="fill:#FFF;stroke:#000;stroke-width:3" /> Sorry, your browser does not support inline SVG. </svg>';
        $('.polygon').append($drawing); 
}
)};

$（文档）.ready（函数（）{
$（“#拉我”）。单击（函数（）{
$（'.panel'）.slideToggle（'slow'）；
})
$（'.polygon'）.function（）{
$（“#更新按钮”）。单击（函数（）{
var n=parseInt（$（'#nvalue'）.val（）；
var-coords=''；
对于（i=0；i

有人能解释发生了什么事吗

更新：以下是一些html代码：

<div class='n-and-operations'>
<h4>Select a value of n</h4>
<select id='nvalue'>
    <option> 3 </option>
    <option> 4 </option>
    <option> 5 </option>
    <option> 6 </option>
    <option> 7 </option>
    <option> 8 </option>
</select>
<button id='updatebutton'> Update </button>
</div>

<div class='polygon'>
</div>

选择一个值n
3.
4.
5.
6.
7.
8.
使现代化

因为您不能在

$（'.polygon'）

对象上调用普通的

函数（）。去掉第二行代码及其右括号，因为它什么都不做…
，因为您不能在
$（'.polygon'）
对象上调用普通
函数（）。去掉第二行代码和它的结束括号，因为它什么都不做…
看起来你根本不需要第二行代码，也不需要最后第二行与之关联的括号

单击处理程序代码只有在执行单击操作时才会被调用，因此这不是问题。
看起来您根本不需要第二行中的文本，也不需要最后第二行中与之关联的括号

单击处理程序代码仅在执行单击操作时才被调用，因此这不是问题。
我们可以在html对象上编写事件处理程序，但不能像您在
$（'.polygon'）
对象上编写的那样在html对象上调用普通函数（），因为它根本不会调用，这就是
意外标记的原因

第二个是初始化变量
coords
内部单击事件函数，但尝试访问函数外部

试试下面的代码

    var drawPolygon = function(coords){
        var $drawing = '<svg height="500" width="500" id="shape"> <!-- The center of the polygon is at the point 250,250 --> <polygon points=' +coords+ 'style="fill:#FFF;stroke:#000;stroke-width:3" /> Sorry, your browser does not support inline SVG. </svg>';
        $('.polygon').append($drawing); 
}

$('#updatebutton').click(function(){
            var n = parseInt($('#nvalue').val());
            var coords = '';
            for (i=0; i< n; i++){
            coords += (250 + 225*Math.sin(2*Math.PI*i/n)).toString() + ',' + (250 + 225*Math.cos(2*Math.PI*i/n)).toString() + ',';
            };
            coords = coords.substring(0,coords.length - 1);
            drawPolygon(coords)
        )};

var drawPolygon=函数（坐标）{
var$drawing='抱歉，您的浏览器不支持内联SVG'；
$（'.polygon'）。追加（$drawing）；
}
$（“#更新按钮”）。单击（函数（）{
var n=parseInt（$（'#nvalue'）.val（）；
var-coords=''；
对于（i=0；i

希望它能对您有所帮助：）
我们可以在html对象上编写事件处理程序，但我们不能像您在
$（'.polygon'）
对象上编写的那样在html对象上调用普通函数（），因为它根本不会调用，所以这就是
意外标记
错误的原因

第二个是初始化变量
coords
内部单击事件函数，但尝试访问函数外部

试试下面的代码

    var drawPolygon = function(coords){
        var $drawing = '<svg height="500" width="500" id="shape"> <!-- The center of the polygon is at the point 250,250 --> <polygon points=' +coords+ 'style="fill:#FFF;stroke:#000;stroke-width:3" /> Sorry, your browser does not support inline SVG. </svg>';
        $('.polygon').append($drawing); 
}

$('#updatebutton').click(function(){
            var n = parseInt($('#nvalue').val());
            var coords = '';
            for (i=0; i< n; i++){
            coords += (250 + 225*Math.sin(2*Math.PI*i/n)).toString() + ',' + (250 + 225*Math.cos(2*Math.PI*i/n)).toString() + ',';
            };
            coords = coords.substring(0,coords.length - 1);
            drawPolygon(coords)
        )};

var drawPolygon=函数（坐标）{
var$drawing='抱歉，您的浏览器不支持内联SVG'；
$（'.polygon'）。追加（$drawing）；
}
$（“#更新按钮”）。单击（函数（）{
var n=parseInt（$（'#nvalue'）.val（）；
var-coords=''；
对于（i=0；i

希望它能帮助您：）
谢谢！这就成功了。不幸的是，形状没有更新。如果更改下拉菜单中的值，则形状不会重新绘制自身。你知道为什么会这样吗？你能给我们提供更多的代码吗？这段代码很难说。我添加了一些html代码，以及js代码中的一些额外行！多亏了上面的答案，我基本上把事情搞定了。非常感谢。是的，我没注意到你把坐标粘贴到范围之外的字符串上。我已经投了赞成票，谢谢！这就成功了。不幸的是，形状没有更新。如果更改下拉菜单中的值，则形状不会重新绘制自身。你知道为什么会这样吗？你能给我们提供更多的代码吗？这段代码很难说。我添加了一些html代码，以及js代码中的一些额外行！多亏了上面的答案，我基本上把事情搞定了。非常感谢。是的，我没注意到你把坐标粘贴到范围之外的字符串上。我已经投了赞成票，谢谢！这就成功了。不幸的是，形状没有更新。如果更改下拉菜单中的值，则形状不会重新绘制自身。你知道为什么吗？谢谢！这就成功了。不幸的是，形状没有更新。如果更改下拉菜单中的值，则形状不会重新绘制自身。你知道为什么吗？这很有效。我不得不做一些小改动，比如在“coords”字符串中添加一个空格。有没有办法使用
replaceWith（）
而不是append？我尝试用replaceWith替换append，但似乎不起作用…更新：我使用了
$（'.polygon'）.replaceWith（''+$drawing+''）。不是最干净的，但我想现在可以用了。酷！，如果我的回答解决了你的公关问题