當所有代碼都在一個腳本標簽中時，為什么這個腳本不會執行？

Question

我正在嘗試制作最初在 Objective C 中創建的按鈕的 JavaScript 版本。該方法涉及創建兩個函數。 第一個在畫布上繪制五個圓圈並保存它們的中心坐標。 第二個將圓坐標與每次鼠標單擊的坐標進行比較，並使用勾股定理來檢測事件是否發生在五個圓之一內。

---

編輯

之前讀過的段落

問題是如果將每個函數放在單獨的腳本中，則繪圖函數生成的圓是可見的。 但不知何故，如果我將兩個函數放在同一個腳本中（即通過注釋掉 jsfiddle 中的第 52-53 行），它們就會從畫布中完全消失。 當我介紹第二個功能時出現問題，但我不明白為什么。

感謝Bashu 的回答，現在已經成功解決了兩個語法問題。 原始問題已更改以反映這一點。 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 的更多信息，但到目前為止，我還沒有給出下一步該嘗試什么的線索。 我歡迎建議。 提前致謝。

Answer 1

問題出在傳遞給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 的一部分。

否則，謝謝你，這是一個寫得很好的問題。