Question

113

Redirect to new page on button onclick in javascript

rated 0 times [ 119] [ 6] / answers: 1 / hits: 18336 / 9 Years ago, fri, february 13, 2015, 12:00:00

I have many buttons inside of webpage like this.

<div class=btn btn-sm btn-success mycustom_btn  onClick=javascript:clickinner();>more</div>

<div class=btn btn-sm btn-success mycustom_btn1  onClick=javascript:clickinner();>more</div>

<div class=btn btn-sm btn-success mycustom_btn2  onClick=javascript:clickinner();>more</div>

What i am trying to do is call function clickinner() on button onclick event. I tried to grab the button element by class name and change the target url.
The javascript code is as follows.

<script>

function clickinner(){

    var mybtn=document.getElementsByClassName('btn');

    mybtn.onClick=location.href='about-us.html';

};

</script>

I don'twant to grab the element by Id so that i have to assign unique id each time. However whenever i click on any of buttons, the target link is not working.
Please help me.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

monetm

Add To Favorites

Follow

Total Points: 615

Total Questions: 103

Total Answers: 119

Location: Finland

Member since Fri, Oct 21, 2022

2 Years ago

monetm questions

1 How to protect API routes in Next.js?

Fri, Feb 26, 21, 00:00, 3 Years ago

1 React props for passing color

Wed, Sep 9, 20, 00:00, 4 Years ago

1 How to catch the error when making fetch api request?

Sun, Jul 26, 20, 00:00, 4 Years ago

1 How to stop propagation on Link elements from React-Router-Dom?

Thu, Jul 2, 20, 00:00, 4 Years ago

1 Wait for an xpath in Puppeteer

Thu, Jun 11, 20, 00:00, 4 Years ago

View All

answered 9 Years ago davism · Accepted Answer

The clicked button can be accessed by using this in the clickinner function, no need to get it by class name:

<div class=btn btn-sm btn-success mycustom_btn  onClick=javascript:clickinner(this);>more</div>

<div class=btn btn-sm btn-success mycustom_btn1  onClick=javascript:clickinner(this);>more</div>

<div class=btn btn-sm btn-success mycustom_btn2  onClick=javascript:clickinner(this);>more</div>

Furthermore, you can just directly redirect to the 'about-us' page, since you're already in the click event. So ...

<script>

function clickinner(target) { // Target refers to the clicked element

    location.href='about-us.html';

};

</script>

... is enough.

If you need to go to different pages based on which class the button has, you can do something like:

function clickinner(target) {

    if(target.classList.contains('mycustom_btn')) {

        location.href = 'another-page.html';

    } else {

        location.href='about-us.html';

    }

};