Почему моя функция не работает?

-3

Вот мои файлы HTML и JavaScript. Файл html работает правильно, но в файле JavaScript есть ошибка, и мне было интересно, почему возникает ошибка и как ее исправить. Я пытаюсь рисовать цветок, используя пользовательский ввод.Почему моя функция не работает?

<DOCTYPE html> 
<html> 
    <head> 
     <title> Lab 8: Arrays </title> 
     <meta charset = "UTF-8"/> 
     <script src = "lab8.js"></script> 
    </head> 
    <body onload = "setup()"> 
     Number of Petals 
     <input id = "text1" type = "text" value = ""> 
     <br><br> 
     Number of Points 
     <input id = "text2" type = "text" value = ""> 
     <br><br> 
     <input id = "draw" input type ="button" value="Draw" onclick="draw()"> 
     <section id = "outputSection"></section> 
     <canvas id = "drawingSurface" width = "600" height = "600" style = "border-style: solid"></canvas> 
    </body> 
</html>

JavaScript:

var N, M, r; 
var ctx; 
var coordinates; 
var arr = []; 
function setup(){ 
ctx = document.getElementById("drawingSurface").getContext("2d"); 
ctx.translate(300,300); 
} 



function drawShape(){ 
    var numPetals = document.getElementById("text1").value; 
    var numPoints = document.getElementById("text2").value; 
    coordinates = getCoordinates(numPetals,NumPoints, 300); 
    draw(coordinates);  
} 

function GenerateXY(M,N,r){ 
    coordinates = [[10,10],[20,20]]; 

    for(var i = 0; i <= M; i += 1){ 
     var angle = i * 2 * Math.PI/M; 
     var r2 = Math.abs(Math.sin(angle * N/2)); 
     var x = r2*Math.sin(angle); 
     var y = r2*Math.cos(angle); 

     coordinates[i] = [x,y]; 

    } 
    return coordinates; 
} 

function draw(arr){ 
    ctx = document.getElementById("drawingSurface").getContext("2d"); 
    ctx.save(); 
    ctx.beginPath(); 
    for(var i = 0; i < arr.length; i+=1){ 
     ctx.lineTo(arr[i][0], arr[i][1]); 
    } 
    ctx.stroke(); 
    ctx.restore(); 
}

им возникли проблемы с моей последней функции (draw). консоль говорит об этом cannot read property "length", и я не знаю, как это исправить.

источник

2015-11-09 donb

Где функция 'getCoordinates()'? – Pointy

В коде, который вы указали нам, «NumPoints» не определен где-либо. – jfriend00

Пожалуйста, не редактируйте предложенные исправления в свой вопрос - это не то, как работает этот сайт. Это делает ваш вопрос движущейся целью и разрушает полезность для других для ответов, которые люди предоставили. Вы можете отредактировать свой вопрос, чтобы уточнить, что люди не понимают, или добавить больше примеров кода, но НЕ исправить то, что люди уже предоставили ответы. – jfriend00

Ваш HTML нажмите здесь обработчик:

<input id = "draw" input type ="button" value="Draw" onclick="draw()">

звонит draw(), но ваша функция подписи ожидает массив, чтобы передать рисовать, как в draw(arr). Вот почему arr не определен, поэтому arr.length вызывает ошибку.

Если вы имеете в виду для draw() просто отрабатывают глобальную переменную arr, то вы можете удалить его из определения функции, как это:

function draw(){ 
    ctx = document.getElementById("drawingSurface").getContext("2d"); 
    ctx.save(); 
    ctx.beginPath(); 
    for(var i = 0; i < arr.length; i+=1){ 
     ctx.lineTo(arr[i][0], arr[i][1]); 
    } 
    ctx.stroke(); 
    ctx.restore(); 
}

В качестве общего наблюдения на вашем коде, переменные, которые используются в функция должна быть объявлена как локальные переменные с var внутри функции, как в:

var ctx = document.getElementById("drawingSurface").getContext("2d");

Это предотвращает множественные функции от случайного затирания друг с другом с помощью того же Глобы l для их личного использования и предотвращает загрязнение глобального пространства имен. Он также позволяет проектам масштабироваться и делиться без конфликтов.

источник

2015-11-09 23:48:21 jfriend00

Спасибо @ jsfriend00, но он не похож на мой цветок, и им интересно, почему? – donb

@donb - Я вижу, вы теперь отредактировали мой ответ на свой вопрос. Почему ты это сделал? Вы должны оставить вопрос так, как он был первоначально, а затем принять ответы, которые исправляют ваши проблемы или комментировать ответы, если они не являются полным исправлением. – jfriend00

@donb - какая у вас ошибка? – jfriend00

Почему моя функция не работает?

ответ

Смежные вопросы