Html Question posted in
Some basic documentation can be found here.

Html – Why do I get a RefrenceError that my function is not defined?

I want to make a file with many directories such as:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="App.js"></script>
  </head>
  <body>
    <h1>To-do List</h1>
    <input type="text" name="addTask" id="addTask" placeholder="Add a new task!">
    <div id="toDoContainer"></div>
    <input type="button" id='button' value="Add task" onclick="app()">
  </body>
</html>

and then running app() from App.js:

import React from "react";
import ReactDOM from 'react-dom/client';
import CheckTask from "./Check.js";

const app = () => {
  const toDoList = document.getElementById('toDoContainer');
  const root = ReactDOM.createRoot(toDoList);
  root.render(<CheckTask />);
}


export default app;

and then lastly getting the CheckTask component from Check.js:

import React from "react";
import ReactDOM from 'react-dom/client';
 
 const CheckTask = () => {
    let input = document.getElementById('addTask').value
         if (input === ''||input === ' ') {
              return alert('You have to write something')           
         } else {
          const toDoList = document.getElementById('toDoContainer');
          const root = ReactDOM.createRoot(toDoList);
            return (root.render(<h1>Hello World</h1>))
         }
}

export default CheckTask;

But, I always get this error message when pressing the button:

Uncaught runtime errors:
ERROR
the app is not defined
ReferenceError: app is not defined
    at HTMLInputElement.onclick (http://localhost:3002/:11:71)

I checked on Google and it says it is either a variable out of scope or not declared properly, but I don’t see any problems with those:

Full source code:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="App.js"></script>
  </head>
  <body>
    <h1>To-do List</h1>
    <input type="text" name="addTask" id="addTask" placeholder="Add a new task!">
    <div id="toDoContainer"></div>
    <input type="button" id='button' value="Add task" onclick="app()">
  </body>
</html>

App.js

import React from "react";
import ReactDOM from 'react-dom/client';
import CheckTask from "./Check.js";

const app = () => {
  const toDoList = document.getElementById('toDoContainer');
  const root = ReactDOM.createRoot(toDoList);
  root.render(<CheckTask />);
}


export default app;

Check.js

import React from "react";
import ReactDOM from 'react-dom/client';
 
 const CheckTask = () => {
    let input = document.getElementById('addTask').value
         if (input === ''||input === ' ') {
              return alert('You have to write something')           
         } else {
          const toDoList = document.getElementById('toDoContainer');
          const root = ReactDOM.createRoot(toDoList);
            return (root.render(<h1>Hello World</h1>))
         }
}

export default CheckTask;

What is causing this problem?

Tags:

2

Answers


  1. 0

    It seems like the issue is related to how you’re using the app function. The error suggests that app is not defined when the HTML button is clicked. Let’s walk through the code and make some corrections.

    Exporting app as a Function:
Ensure that app is exported as a function. In your App.js, the export statement should be export { app }; instead of export default app;.

    javascript

    import React from "react";
import ReactDOM from 'react-dom/client';
import CheckTask from "./Check.js";

const app = () => {
  const toDoList = document.getElementById('toDoContainer');
  const root = ReactDOM.createRoot(toDoList);
  root.render(<CheckTask />);
}

export { app };

    Importing app in HTML:
    Make sure that you import app correctly in your HTML file. Assuming ‘App.js’ and your HTML file are in the same directory, your script tag should look like this:

    html

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

    Using app on Button Click:
    In your HTML file, make sure you are calling app correctly on the button click. The app function should be accessible globally. If your button element is not inside a function or another scope, it should work as expected.

    html

    <input type="button" id='button' value="Add task" onClick="app()">

    After making these adjustments, try clicking the button again. If the issue persists, please double-check the import paths, file locations, and ensure that the app function is correctly exported and accessible globally.

    Login or Signup to reply.
  2. 0

    This error is causing because of how how module bundlers and the ES6 import/export system work. app function defined in App.js is not accessible in the global scope.

    By including App.js as a module in you HTML file and setting up an event listener in javascript you can get this done. You should also remove onclick in HTML.

    In index.html, script tag should be like follow,

    <script type="module" src="App.js"></script>

    Then the input should be as follows

    <input type="button" id='button' value="Add task">

    Then in App.js, you would export app and set up the event listener after the page loads:

    import React from "react";
import ReactDOM from 'react-dom/client';
import CheckTask from "./Check.js";

export const app = () => {
  const toDoList = document.getElementById('toDoContainer');
  const root = ReactDOM.createRoot(toDoList);
  root.render(<CheckTask />);
};

document.addEventListener('DOMContentLoaded', (event) => {
  document.getElementById('button').addEventListener('click', app);
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search