index.js:
function Home () {
return <div>
<html>
<head>
<title>Site</title>
</head>
<body>
<div class= 'v5_3' onclick = "func_click()"></div>
</body>
</html>
</div>
}
function func_click() {
alert('ALERT!!');
}
export default Home ; func_click
I'm currently working on a project using nextjs and running it locally with the command npm run dev. This process was learned from a tutorial video found at this link (video timestamp: 19:00 to 21:50). However, I encountered an issue where clicking on the button inside the 'v5_3' div doesn't trigger the JavaScript function, even though the styles for 'v5_3' are defined in the main.css file as follows:
.v5_3 {
width: 150px;
height: 50px;
color: white;
background: rgb(5, 5, 5);
opacity: 1;
position: absolute;
top: 30px;
left: 1171px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
This CSS file is imported by the _app.js file:
import './main.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
All these files are located in the pages folder:
The alert functionality within the func_click() JavaScript function is not working. Any ideas on how to resolve this issue?