Develop Reference

How to perform click on element (button) that contains X title?

I am trying to click on the button class "btn ActionBar__button", but there are 2 of them and it always clicks on the button that contains the title "Don't Click".
How can I click on the button with the same class, but has a different title?
I am trying to use this code:
var elems = document.getElementsByClassName('btn ActionBar__button'); elems[0].click();
Here is the HTML:
<div class="ActionBar">
<button class="btn ActionBar__button" type="button" title="Don't Click">Don't Click</button>
<button class="btn ActionBar__button" type="button" title="Click on this button">Click on this button</button></div>

You can use .querySelector
let elem = document.querySelector('[title="Click on this button"]');
console.log(elem)
elem.click();
<div class="ActionBar">
<button class="btn ActionBar__button" type="button" title="Don't Click">Don't Click</button>
<button class="btn ActionBar__button" type="button" title="Click on this button">Click on this button</button></div>

Javascript how to identify button clicked

I have a page with many articles. Each article has a delete button. How can I identify the button clicked for the article?
Currently I have this:
<button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button>
$('#delete-article').on('click', function(e) {
console.log('Test delete article');
});
This logs 'Test delete article' according to the number of articles on the page.

You can attach the event on button and use this object to refer the currently clicked button:
$('button').on('click', function(e) {
console.log(this.id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button>
<button type="button" id="delete-article-2" class="btn btn-small btn-danger">Delete</button>

You can use your event variable to get the target of the event (that is, the element responsible) and from there get its id, like this:
let btnId = event.target.id;
However, for that to work properly you should assign unique ids to your buttons. If you want to provide other data (or you don't want to use id) you can append custom attributes, like data-value or similar, and use it like this:
let myValue = event.target.getAttribute('data-value');

You need to establish relation between article and corresponding button, one way to implement is by using HTML5 data attribute.
assign data-articleId to article id in button element and when you click the button you can access which button was clicked by using Jquery .data() function.
<button type="button" data-articleId='123' class="btn btn-small btn-danger delete-article">Delete</button>
$('.delete-article').on('click', function(e) {
$(this).data('articleId'); //will return 123;
console.log('Test delete article');
});

If all the buttons have this markup
<button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button>
Then the DOM sees them as just one button, you should find a way to attach unique ids to your buttons

You can get an object of clicked button then you can get any details from that object like an index or whatever you want.
$('#delete-article').click(function(){
console.log($(this));
console.log($(this).index());
});

You can directly achieve it by using the JavaScript.
document.addEventListener('click',(e)=>{
console.log(e.target.id)
})
<button type="button" id="delete-article1" class="btn btn-small btn-danger">Delete1</button>
<button type="button" id="delete-article2" class="btn btn-small btn-danger">Delete2</button>
<button type="button" id="delete-article3" class="btn btn-small btn-danger">Delete3</button>
<button type="button" id="delete-article4" class="btn btn-small btn-danger">Delete4</button>
<button type="button" id="delete-article5" class="btn btn-small btn-danger">Delete5</button>
<button type="button" id="delete-article6" class="btn btn-small btn-danger">Delete6</button>
<button type="button" id="delete-article7" class="btn btn-small btn-danger">Delete7</button>

Trying to generate a button-group with Bootsrap and AngularJS to redirect to different URLs

I am trying to create a button group of two (using bootstrap and angularjs) that, when clicking on them, each would redirect to a different URL. I currently have the following code (copied only the relevant pieces):
app.controller('LinkController',function(link, $scope, $location){
$scope.go = function(){
$location.url(link);
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button type="button" class="btn btn-primary" data-ng-click = "go('test1.html')">Click1</button>
<button type="button" class="btn btn-primary" data-ng-click = "go('test2.html')">Click2</button>
</div>
However, this doesn't work, and I am not sure why. I might not be passing the arguments correctly, but I tried it even without passing the link itself and it still didn't work. Would appreciate any help!

Are you trying to pass the url ?,
if so, then i would be like this :
app.controller('LinkController',function(link, $scope, $location){
$scope.go = function(link){
$location.url(link);
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button type="button" class="btn btn-primary" data-ng-click = "go('test1.html')">Click1</button>
<button type="button" class="btn btn-primary" data-ng-click = "go('test2.html')">Click2</button>
</div>

Ok so after many many attempts, and with some inspiration from the answers above, I was able to solve it in the following way:
app.controller('LinkController',function($scope){
$scope.go = function(link){
window.location = link;
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button id = Image type="button" class="btn btn-primary"
data-ng-click = "go('Test1.html')">Click1</button>
<button id = Text type="button" class="btn btn-primary"
data-ng-click = "go('Test2.html')">Click2</button>
</div>
Thanks for your help guys.

I don't know much of Angular js, but there are other alternative ways to achieve the same purpose. This works with simple html
<div class="btn-group btn-group-lg">
<input type="button" class="btn btn-primary">Click1</input>
<input type="button" class="btn btn-primary">Click2</input>
</div>
Notice I changed the button element to input, this because a button element can not be placed inside an anchor tag <a>.
I hope this helps

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.

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

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/

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

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>

why does my Bootstrap javascript not work?

I have looked at the other questons and double checked. My javascript resources are in order, there are no path problems, i even have jquery items working on my page. I thew this code right above the "Social Media Icons" heading for the sake of testing and still nothing.
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
$(document).ready(function () {
$('#section-nav a').tooltip();
$(".tab").tabs();
$(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *")
.removeClass("ui-corner-all ui-corner-top")
.addClass("ui-corner-bottom");
// move the nav to the bottom
$(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");
$('.navbar-toggle').click(function () {
var target = $('#navigation .shopbar');
if (target.hasClass('border-bottom')) {
target.removeClass('border-bottom');
} else {
target.addClass('border-bottom');
}
});
});

From the Bootstrap docs.. (http://getbootstrap.com/javascript/#tooltips)
"For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself."
So you need to add this jQuery..
$("[data-toggle=tooltip]").tooltip();
To initialize the Tooltips.

Change data-original-title to title, then:
$('#section-nav a').tooltip();