I have a written javascript function that will change the button class type from btn btn-success to btn btn-danger on click. How can I do so? Basically, I want to toggle the btn class everytime.
<td>
<div id="btn_modal_Edit" class="btn btn-success" runat="server">
<a href='CreateAccount.aspx?Id=<%# Eval("ID")%>&RoleName=<%# Eval("RoleName")%>'>Edit</a>
</div>
<div id="btn_modal_Status" class="btn btn-success" runat="server">
<a data-toggle="modal" data-target="#myModal" onclick="fun(<%# Eval("ID")%>)">Status</a>
</div>
</td>
function fun(id)
{
document.getElementById('<%= hfId.ClientID%>').value = id;
document.getElementById('btn_modal_Edit').className = "btn-danger";
document.getElementById('btn_modal_status').className = "btn-danger";
}
This function fails because it cannot find document.getElementById('btn_modal_Edit') and document.getElementById('btn_modal_status').
Any ideas to fix this?
Every thing is working fine with this:
document.getElementById("btn_modal_Edit").className = "btn-danger";
Working Fiddle
Related
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>
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>
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
I have two buttons. One where i clone a div (button-add) and one where I remove a div (button-remove).
I want to disable the remove-button when I only have one div.
So for multiple divs, it looks like this:
<button type="button" class="btn btn-default btn-lg button-add">+1</button>
<button type="button" class="btn btn-default btn-lg button-remove">-1</button>
<div class="copybox"></div>
<div class="copybox"></div>
<div class="copybox"></div>
...and when there's only one div, I want it to look like this:
<button type="button" class="btn btn-default btn-lg button-remove" disabled>-1</button>
<div class="copybox"></div>
I use jQuery 1.11.3
Here you go. Hope this is what you need.
$('.btn').on('click',function(){
if($(this).text()=="+1")
{
$('.button-remove').prop('disabled',false);
$('div.copybox:first').clone().appendTo('body');
}
else
{
$('div.copybox:last').remove();
}
$('div.copybox').length==1?$(this).prop('disabled',true):$(this).prop('disabled',false)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn-lg button-add">+1</button>
<button type="button" class="btn btn-default btn-lg button-remove">-1</button>
<div class="copybox">Copy</div>
<div class="copybox">Copy</div>
<div class="copybox">Copy</div>
Try using the $("div.copybox").length that DontVoteMeDown commented and then set an ID for the button remove. Once you do that, you can add a function to hide the button with this code.
document.getElementById(buttonID).style.display = 'none'
If later you decide to enable it again, then you can also add another if statement and then the code for that would be block instead of none
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>