Перенаправление на новую страницу на кнопке onclick в javascript

У меня есть много кнопок внутри веб-страницы, как это.Перенаправление на новую страницу на кнопке onclick в javascript

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

То, что я пытаюсь сделать, это вызвать функцию clickinner() на кнопке onclick event. Я попытался захватить элемент кнопки по имени класса и изменить целевой URL. Код javascript выглядит следующим образом.

<script> 
function clickinner(){ 
    var mybtn=document.getElementsByClassName('btn'); 
    mybtn.onClick="location.href='about-us.html'"; 
}; 
</script>

Я не хочу захватывать элемент по идентификатору, чтобы каждый раз назначать уникальный идентификатор. Однако всякий раз, когда я нажимаю на любую из кнопок, целевая ссылка не работает. Пожалуйста, помогите мне.

источник

2015-02-13 pallavidestiny22

щелкнули кнопку можно получить доступ с помощью this в функции clickinner, нет необходимости, чтобы получить его по имени класса:

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

Кроме того, вы можете просто напрямую перенаправить на страницу «о-мы», поскольку вы уже находитесь в событии click. Таким образом, ...

<script> 
function clickinner(target) { // Target refers to the clicked element 
    location.href='about-us.html'; 
}; 
</script>

... достаточно.

Если вам нужно перейти на другие страницы, на основании которых класс кнопка имеет, вы можете сделать что-то вроде:

function clickinner(target) { 
    if(target.classList.contains('mycustom_btn')) { 
     location.href = 'another-page.html'; 
    } else { 
     location.href='about-us.html'; 
    } 
};

источник

2015-02-13 10:50:16

Добавить this в качестве параметра в вашу функцию и изменить расположение правильно

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

источник

2015-02-13 10:52:40

Работа 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'; 
    }); 
}

источник

2015-02-13 11:06:13 codeepic

Попробуйте этот образец

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

источник

2015-02-13 11:07:18 kpearlkmanic

Перенаправление на новую страницу на кнопке onclick в javascript

ответ

Смежные вопросы