Почему этот скрипт не будет выполняться, если весь код находится в одном теге скрипта? - PullRequest
Новая
       21

Почему этот скрипт не будет выполняться, если весь код находится в одном теге скрипта?

0 голосов
/ 13 февраля 2020

Я пытаюсь создать JavaScript версию кнопок, которые я изначально создал в Objective C. Подход предполагает создание двух функций. Первый др aws пять кружков на холсте и сохраняет их координаты центра. Вторая сравнивает координаты круга с координатами каждого щелчка мыши и использует теорему Пифагора, чтобы определить, происходит ли событие в одном из пяти кругов.

РЕДАКТИРОВАТЬ

Ранее прочитанный абзац

Проблема в том, что круги, созданные функцией рисования, видны, если каждая функция помещена в отдельные сценарии. Но каким-то образом они полностью исчезают с холста, если я поместил обе функции в один и тот же скрипт (т.е. закомментировал строки 52-53 в jsfiddle). Проблема возникает, когда я представляю вторую функцию, но я не понимаю, почему.

Благодаря ответ Башу две проблемы с синтаксисом теперь успешно решены. Оригинальный вопрос был изменен, чтобы отразить это. Код в jsfiddle показывает обе функции, выполняющиеся вместе в одном и том же скрипте, с function(e), отображающим clickRing, когда мышь щелкает на холсте и правильно идентифицирует каждую кнопку. Пример кода теперь включает в себя некоторую отсутствующую инициализацию мыши, которая помешала щелчкам мыши при успешном рисовании clickRing.

Вот вторая функция. 

<script>

const mouse            = document.getElementById('canvas');
var ctx2               = mouse.getContext('2d');
var x2;                                                  // click x 
var y2;                                                  // click y

var clickRing          = function(e){
    x2                 = e.offsetX - hCentre;
    y2                 = e.offsetY - vCentre;
    var clickRadius    = buttonRadius * 0.85;       // clear button boundary
// show all Mouse hits including misses and near misses
  ctx2.beginPath();    
  ctx2.arc(x2, y2, clickRadius * 0.85, 0, Math.PI*2);
  ctx2.strokeStyle     = "black";
  ctx2.stroke();
        for (i = 0; i < numberOfButtons; i++) {
        x1             = xButtonCoords[i];
        y1             = yButtonCoords[i];
    //                          ctx1 ctx2
        var xSquared   = Math.pow((x1 - x2),2);
        var ySquared   = Math.pow((y1 - y2),2);
    // find distance from button centre coordinates to clickpoint
        var hypotenuse = Math.sqrt(xSquared + ySquared);
        var distance   = parseFloat(hypotenuse).toFixed(0);
        if (distance < (buttonRadius - clickRadius)) {  
            alert("button : "+(i+1)+"\n"+ 
                  "distance from centre to Mouse : "+distance);
            }
        }
    }
        document.addEventListener('mousedown', clickRing);
</script>

Вот вся код в jsfiddle .

Я новичок в Javascript и ищу здесь , здесь , здесь и здесь пытается узнать больше о DOM, но пока ничего не подсказывает мне, что делать дальше. Я приветствую предложения. Заранее спасибо.

1 Ответ

2 голосов
/ 13 февраля 2020

Проблема заключается в обратном вызове, который передается вашему mousedown слушателю событий.

document.addEventListener('mousedown', function(e));

Во-первых, , это неверный синтаксис - вы объявляете функцию без блока кода для выполнения. function(e){} - это объявление функции, function(e) - нет. Если я запускаю ваш Jsfiddle с открытой консолью разработчика, мы действительно можем увидеть ошибку синтаксиса:

Uncaught SyntaxError: Unexpected token ')'

Это объясняет, почему первая половина вашего скрипта не выполняется, когда вы соедините его со второй половиной.

Вы можете увидеть эту же ошибку, просто открыв консоль разработчика при работе с Js Fiddle, и я призываю вас привыкнуть следить за консолью, чтобы узнать о ней другие ошибки в вашем скрипте.

Во-вторых , вы определили функцию clickRing и фактически не используете ее. document.addEventListener('mousedown', function(e){}) - правильный синтаксис, но он не относится к определенной вами функции, доступ к которой можно получить с помощью переменной clickRing. Таким образом, вместо этого вы можете задать

document.addEventListener('mousedown', clickRing);

Что касается других ваших вопросов, связанных с нажатием кнопки мыши / наведением курсора, они не связаны, и я рекомендую вам изучить их отдельно. Я подозреваю, что вы обнаружите, что CSS не будет работать на кнопках, так как они нарисованы в Canvas и не являются частью DOM.

В противном случае, спасибо, это было хорошо письменный вопрос

...