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?
2
Answers
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.
javascript
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
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
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.
This error is causing because of how how module bundlers and the ES6 import/export system work.
app
function defined inApp.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 removeonclick
in HTML.In
index.html
, script tag should be like follow,Then the
input
should be as followsThen in
App.js
, you would export app and set up the event listener after the page loads: