初學者：如何修復JavaScript中的“ ReferenceError myFunc未定義”

Question

我是JavaScript的新手，正在嘗試創建一個非常簡單的圖像滑塊。 我也試圖了解錯誤返回的onclick=""事件。

我已經學習了如何編寫函數並將其分配給<button>事件。

HTML設置：

<div id="custom-slider">
  <button onclick="sliderPrev()">Prev</button>
  <img id="slider" src="https://picsum.photos/400/200" />
  <button onclick="sliderNext()">Next</button>
</div>

外部文件中的myJavaScript ：（在結束</body> ）

<script src="src/index.js"></script>

myJavaScript設置：

var images = [
  "https://picsum.photos/400/200",
  "https://picsum.photos/400/200",
  "https://picsum.photos/400/200"
];

var num = 0;

function sliderPrev() {
  var slider = document.getElementById("slider");
  num--;
  if (num < 0) {
    num = images.length - 1;
  }
  slider.src = images.length;
}

function sliderNext() {...}

我已經在Prev按鈕的外部文件和sliderPrev()創建了JS。 但是，每次我嘗試單擊該按鈕時，它都會保持返回ReferenceError: sliderPrev is not defined 。

我不知道我的代碼出了什么問題。 我也嘗試簡單的測試，但最終還是無法正常工作。

簡單測試：

function sliderPrev() {
    alert("Testing");
}

在我的研究中，我發現有人說使用onclick=""事件被認為是一種非常不好的做法。我們應該使用addEventListener ：（是真的嗎？）

var button = document.getElementById("slider").addEventListener("click", sliderPrev);

在這里查看我的代碼！

Answer 1

您無法在其他文件中訪問index.js內部定義的局部變量和函數。

要將sliderPrev給瀏覽器，您應該將window.sliderPrev = sliderPrev添加到index.js模塊中，這樣您便可以在html文件中使用它。

Answer 2

在問題中給出的鏈接中查看了您的代碼，我看到以下行

import "./styles.css";

這就是問題。 這必須刪除。 這導致錯誤，因此無法再運行JS代碼。 因此，沒有完全定義函數sliderPrev 。

要導入CSS樣式，您需要在HTML中<head>使用以下內容：

<link rel="stylesheet" href="src/styles.css">

初學者：如何修復JavaScript中的“ ReferenceError myFunc未定義”

問題描述

2 個解決方案

解決方案1
2 已采納 2019-03-23 11:29:23

解決方案2
1 2019-03-23 11:12:35

初學者：如何修復JavaScript中的“ ReferenceError myFunc未定義”

問題描述

2 個解決方案

解決方案1 2 已采納 2019-03-23 11:29:23

解決方案2 1 2019-03-23 11:12:35

解決方案1
2 已采納 2019-03-23 11:29:23

解決方案2
1 2019-03-23 11:12:35