未捕获的 ReferenceError：函数未在 HTMLDivElement.onclick 中定义答案

【问题标题】：Uncaught ReferenceError: function is not defined at HTMLDivElement.onclick未捕获的 ReferenceError：函数未在 HTMLDivElement.onclick 中定义
【发布时间】：2021-01-19 08:52:07
【问题描述】：

我遇到了一个关于 html/javascript 的问题，尽管有人提出了类似的问题，但在过去的大约 7 个小时内我都无法在网络上找到解决方案！我尝试过的所有提供的解决方案都对我没有帮助。

我的问题是以下错误：Uncaught ReferenceError: function is not defined at HTMLDivElement.onclick

按下应该触发该功能的按钮时出现此错误。该函数称为 onclick，onclick 属性附加到一个 div 对象。

console.log("Main is alive");

function addArticletoSC() {
  console.log("Main is still alive!");
};

<div class="article-element">
  <div class="picture_article-element">
    <img src="static/img/Chiquita_banana.PNG" alt="article" class="article_img">
  </div>
  <div class="text_article-element">
    <p class="name_info">Chiquita Banana
      <a href="/info" class="button button-small"><i class="material-icons button-color">info</i></a>
    </p>
    <div class="rating_comments">
      <a href="/comment_page" class="button button-small"><i class="material-icons rating">star_rate</i></a>
      <a href="/comment_page">4.5 / 5</a>
    </div>
    <div class="piece_price">
      <p>1 piece</p>
      <p class="price">0,50€</p>
    </div>
  </div>
  <div class="addtocart_article-element button" onclick="addArticletoSC()">
    <i class="material-icons">add_shopping_cart</i>
  </div>
</div>
<script type="text/javascript" src="js/main.js"></script>

如果有人可以帮助我，将不胜感激。

PS：这是我的第一个 HTML/CSS/JS 项目，我真的不知道自己在做什么。另外，我正在为该项目使用 Framework7，如果这很重要，请忽略。

【问题讨论】：

我无法复制该问题。对我来说没有错误。
在真正的代码中，addArticletoSC() 是在顶层定义的吗？ onXXX代码在全局范围内运行，不能调用嵌套函数。
是的，addArticletoSC() 没有嵌套在另一个函数中，如果你是这个意思的话。实际上，这是我现在的整个 main.js 脚本。

标签： javascript html html-framework-7

【解决方案1】：

你可能忘记了脚本标签。还是试试这个吧。。

<html lang="en">
<head>
    <title>Login page</title>
</head>
<script>
    console.log("Main is alive");

    function addArticletoSC() {
        console.log("Main is still alive!");
    }
</script>
<div class="article-element">
    <div class="picture_article-element">
        <img src="static/img/Chiquita_banana.PNG" alt="article" class="article_img">
    </div>
    <div class="text_article-element">
        <p class="name_info">Chiquita Banana
            <a href="" class="button button-small"><i class="material-icons button-color">info</i></a>
        </p>
        <div class="rating_comments">
            <a href="" class="button button-small"><i class="material-icons rating">star_rate</i></a>
            <a href="">4.5 / 5</a>
        </div>
        <div class="piece_price">
            <p>1 piece</p>
            <p class="price">0,50€</p>
        </div>
    </div>
    <div class="addtocart_article-element button" onclick="addArticletoSC()">
        <i class="material-icons">add_shopping_cart</i>
    </div>
</div>
<script type="text/javascript" src=""></script>
</html>

<html lang="en">
<head>
    <title>Login page</title>
</head>
<script>
    console.log("Main is alive");

    function addArticletoSC() {
        console.log("Main is still alive!");
    }
</script>
<div class="article-element">
    <div class="picture_article-element">
        <img src="" alt="article" class="article_img">
    </div>
    <div class="text_article-element">
        <p class="name_info">Chiquita Banana
            <a href="" class="button button-small"><i class="material-icons button-color">info</i></a>
        </p>
        <div class="rating_comments">
            <a href="" class="button button-small"><i class="material-icons rating">star_rate</i></a>
            <a href="">4.5 / 5</a>
        </div>
        <div class="piece_price">
            <p>1 piece</p>
            <p class="price">0,50€</p>
        </div>
    </div>
    <div class="addtocart_article-element button" onclick="addArticletoSC()">
        <i class="material-icons">add_shopping_cart</i>
    </div>
</div>
<script type="text/javascript" src=""></script>
</html>

【讨论】：

谢谢，我试过了，但不幸的是它没有解决我的问题。也许框架 7 是我的问题？

【解决方案2】：

我希望这能解决您的问题，我将 div 标签更改为可点击的按钮标签，以便“onclick”功能可以执行....goodluck

console.log("Main is alive");

function addArticletoSC() {
  console.log("Main is still alive!");
};

<div class="article-element">
  <div class="picture_article-element">
    <img src="static/img/Chiquita_banana.PNG" alt="article" class="article_img">
  </div>
  <div class="text_article-element">
    <p class="name_info">Chiquita Banana
      <a href="/info" class="button button-small"><i class="material-icons button-color">info</i></a>
    </p>
    <div class="rating_comments">
      <a href="/comment_page" class="button button-small"><i class="material-icons rating">star_rate</i></a>
      <a href="/comment_page">4.5 / 5</a>
    </div>
    <div class="piece_price">
      <p>1 piece</p>
      <p class="price">0,50€</p>
    </div>
  </div>
  
  
  
  <!-- replaced div tags with button tags -->
  
  <button class="addtocart_article-element button" onclick="addArticletoSC()">
    <i class="material-icons">add_shopping_cart</i>
  </button>
  <br /><br /><br /><br />
</div>

【讨论】：

感谢您的帮助。不幸的是，该错误现在表明该函数未在 HTMLButtonElement.onclick. 中定义