A situation where the event onclick fails to occur within NextJS

Question

A situation where the event onclick fails to occur within NextJS

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: https://i.sstatic.net/FGa6O.png

The alert functionality within the func_click() JavaScript function is not working. Any ideas on how to resolve this issue?

javascript html css next.js

Answer 1

Answer №1

In the world of Next.js, it's important to understand that it is a framework built on top of React.js. Therefore, handling clicks in Next.js follows the same principles as React.

To start, you should define the click function within the component for better code organization. Although not mandatory, it enhances the structure of your code.
Next, make sure to reference the function using the camelcased onClick attribute along with the bracket syntax onClick={funcClick} to link the click event with the div element.

When working with classes, remember to use className instead of class. In frameworks like React and Next.js, these elements are treated as objects rather than traditional HTML elements. So, className is actually a property of an HTMLElement object.

function Home() {

  const funcClick = () => {
    alert("ALERT!!");
  };

  return (
    <div>
      <html>
        <head>
          <title>Site</title>
        </head>

        <body>
          <div className="v5_3" onClick={funcClick}></div>
        </body>
      </html>
    </div>
  );
}

export default Home;

Answer 2

In the world of Next.js, it's important to understand that it is a framework built on top of React.js. Therefore, handling clicks in Next.js follows the same principles as React.

To start, you should define the click function within the component for better code organization. Although not mandatory, it enhances the structure of your code.
Next, make sure to reference the function using the camelcased onClick attribute along with the bracket syntax onClick={funcClick} to link the click event with the div element.

When working with classes, remember to use className instead of class. In frameworks like React and Next.js, these elements are treated as objects rather than traditional HTML elements. So, className is actually a property of an HTMLElement object.

function Home() {

  const funcClick = () => {
    alert("ALERT!!");
  };

  return (
    <div>
      <html>
        <head>
          <title>Site</title>
        </head>

        <body>
          <div className="v5_3" onClick={funcClick}></div>
        </body>
      </html>
    </div>
  );
}

export default Home;

Answer 3

Answer №2

Dealing with a similar problem, I was able to overcome it successfully. Turns out, the culprit was the z-index. Make sure to review your css settings.

Answer 4

Dealing with a similar problem, I was able to overcome it successfully. Turns out, the culprit was the z-index. Make sure to review your css settings.

A situation where the event onclick fails to occur within NextJS

Answer №1

Answer №2

Similar questions

Strange occurrences with HTML image tags

Utilize JSON categories to assign groups to TextFields or Selects according to a JSON data attribute

"Changing background color, incorporating hover effects, utilizing !important, and manipulating .css properties with

Is it secure to store information that impacts component rendering within a JWT payload?

Why aren't the validations being set when creating Angular forms using formControl.values?

Retrieve the total count of rows present in a specific table

Retrieve the position of an element using Python and selenium

Issue between Promise and EventEmitter causing race conditions in ExpressJS

How to design a trapezium shape using CSS and HTML

Ajax is updating the information stored in the Data variable

What is the method for inserting the document URL into a text input?

What is the best way to showcase text formatting applied in Strapi's WYSIWYG editor in NextJS's user interface?

Troubleshooting the "Failed to mount component" error in Vue: fixing template or render function definition issues

No sweat / Possibly NextJS / Could it be that maybeGetServerSnapshot isn't a recognized function?

Creating a POST request in Rails 3

Encountering an error in resolving symbol values statically within the Angular module

Steps for aligning a grid column to the same height as the element above it and moving it to the left side

Utilize Material-UI slider components to dynamically manage slider handles

The process of incorporating the dymo.framework into an Angular project

When utilizing Reactjs, accessing an element by its id becomes challenging when the element is nested within a map() function