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

如何解决未捕获的 ReferenceError：函数未在 HTMLDivElement.onclick 中定义

我遇到了 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，如果这很重要，请确认。

解决方法

您可能忘记了脚本标签。试试这个吧..

    var Value = ""
    
    
    enter code here
    
    //<AllGrid workorders={workOrderStore.workorders} />
    
    const WorkOrderDashboard: React.FC<IProps> = props => {
      const workOrderStore = useContext(oneOrderStore);
      const userAuthStore = useContext(UserAuthStore);
    
      let sessionObj = JSON.parse(sessionStorage.getItem("sessionObj")!)
      let IsLoggedIn = sessionStorage.getItem("isLoggedIn")
      let CurrentModule = sessionStorage.getItem("module")
      
      useEffect(() => {
        userAuthStore.HydrateAuthState();
       },[userAuthStore]);
    
      function searchJobs(){
          window.alert(Value)
          workOrderStore.loadWorkOrders(CurrentModule!,sessionObj.Username,sessionObj.Client.Id,Value);
      
        if (workOrderStore.loadinginitial)
          return <LoadingComponent content={"Loading: " + CurrentModule} inverted={true} />;
      
      };
    
    
    
    
      return(
      <Fragment>
        <br></br>
      <div>
      
       <Search 
       value={""}
       open={false}
       onBlur={searchJobs}
       type='text'
       />

<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>

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

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>