How do i make onClick and href work together?

Question

I have an a element which has his own href and it works perfectly. The problem is that besides an href element i want to make an onClick function, but when i do so, the href is ignored:

<li><a href="#someSectionOfThePage" onClick={someFunction}>GO TO SECTION</a></li>

Using this syntax, the someFunction runs, but i'm not being redirected to #someSectionOfThePage.

Why would you do that though? What is the main idea behind that? — Mosia Thabo, May 27 '19 at 16:39
To achieve what you want you might wanna try using the function on the
Possible duplicate of [HTML tag want to add both href and onclick working](https://stackoverflow.com/questions/14867558/html-tag-a-want-to-add-both-href-and-onclick-working) — Thomas F, May 27 '19 at 16:53

score 2 · Answer 1 · answered May 27 '19 at 16:50

This should do the trick:

<li onClick={someFunction}>
   <a href="#someSectionOfThePage">GO TO SECTION</a>
</li>

When you click the <li> it will execute the function... and when you click the <a> it will process the href. Since you'll be clicking this element, both will work the same time.

score 0 · Answer 2 · edited May 27 '19 at 16:55

0

The href present in the a tag is not going to work because of the onClick event. After clicking the element, instead of redirecting you to the section of the page, it executes someFunction(). You may try adding location.href = "#someSectionOfThePage" to someFunction() which will do the work of href.

edited May 27 '19 at 16:55

Mosia Thabo

4,009
1
14
24

answered May 27 '19 at 16:43

Ajith

9
4

score 0 · Accepted Answer · edited May 27 '19 at 17:04

0

You can also try to add a click event handler for li and make sure li and anchor tag a takes the same width.

edited May 27 '19 at 17:04

Mosia Thabo

4,009
1
14
24

answered May 27 '19 at 16:52

yaswanth

159
9

score 0 · Answer 4 · answered May 28 '19 at 07:02

Although it is not advisable but if you still want to use both then this might do the trick:

someFunction= ()=>{
  window.location.href("#someSectionOfThePage");
  //do your onClick stuff here
};

<li>
  <span onClick={this.someFunction}>GO TO SECTION</span>
</li>

Hope this helps!!

How do i make onClick and href work together?

4 Answers4