CODEWITHSUNDEEP
javascript
pallavidestiny22
pallavidestiny22

Reputation: 335

Redirect to new page on button onclick in javascript

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.

Upvotes: 1

Views: 21145

Answers (4)

T.S.
T.S.

Reputation: 1242

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';
    }
};

Upvotes: 2

kpearlkmanic
kpearlkmanic

Reputation: 84

Try this sample

 <html>
 <head>
 <meta charset="UTF-8">
 <title>First Page</title>
 <script>
  function clickinner() {
    window.location.href = 'secondPage.html';
    }
 </script>
 </head>
 <body>
<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>

 </body>
 </html>

Upvotes: 0

codeepic
codeepic

Reputation: 4132

Working fiddle solution

HTML: 

<div id="button">more</div>
<div class="btn btn-sm btn-success mycustom_btn">more</div>
<div class="btn btn-sm btn-success mycustom_btn">more</div>
<div class="btn btn-sm btn-success mycustom_btn">more</div>

JS: 

var button = document.getElementById('button');

button.addEventListener('click', function(){
    alert('only 1 button clicked');
    window.location = 'about-us.html';
});


var buttons = document.querySelectorAll('.btn');

for(var i = 0; i < buttons.length; i++){
    buttons[i].addEventListener('click', function(){
        alert('each button clicked');
        window.location = 'about-us.html';
    });
}

Upvotes: 0

Fares M.
Fares M.

Reputation: 1538

Add this as parameter to your function and change the location correctly

<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>


<script>
    function clickinner(mybtn){
       // Do your stuff here with the clicked button
       location.href='about-us.html';
    };
</script>

http://jsfiddle.net/asv548g2/

Upvotes: 0

Related Questions