So I have 5 buttons at the top of my webpage:
<button class="btn btn-sm btn-outline-primary" id="inbox" name="mailbox">Inbox</button>
<button class="btn btn-sm btn-outline-primary" id="compose">Compose</button>
<button class="btn btn-sm btn-outline-primary" id="sent" name="mailbox">Sent</button>
<button class="btn btn-sm btn-outline-primary" id="archived" name="mailbox">Archived</button>
<a class="btn btn-sm btn-outline-primary" href="{% url 'logout' %}">Log Out</a>
As you can see, I've already given all 5 buttons the same class because I'm using Bootstrap and I've already given them all individual id's. The problem is I want to apply a function to just three of the buttons (inbox, sent and archive) so I planned on giving 3 of the buttons the same name attribute. I discovered that if you want to use name in document.querySelectorAll() I can give the 3 mailboxes a name attribute of "mailbox" and then do something like:
document.addEventListener('DOMContentLoaded', function(){
document.querySelectorAll('[name="mailbox"]')
But at the end of this querySelectorAll I want to add a .forEach() but I can't figure out how I would do that. Would it be something like this? :
document.addEventListener('DOMContentLoaded', function(){
document.querySelectorAll('[name="mailbox"]').forEach([name="mailbox"] => {
[name="mailbox"].onclick = function(){....
}
Alternatively I saw that you can use multiple id's in querySelectorAll but then I ran into the same problem of not really knowing how to correctly syntax the rest of the statement:
document.querySelectorAll('#inbox, #sent, #archive').forEach(inbox, sent, archive)...?
The right way to do this is to use a common class for those three buttons.
Then, you can put the result of the querySelectorAll in an array and iterate over each element using forEach to set the click listeners:
document.addEventListener('DOMContentLoaded', function(){
const mailboxElements = [...document.querySelectorAll('.mailbox')];
mailboxElements.forEach(mailboxElement => {
mailboxElement.onclick = function(){
console.log("mailboxElement: " + this.id);
}
})
})
<button class="btn btn-sm btn-outline-primary mailbox" id="inbox">Inbox</button>
<button class="btn btn-sm btn-outline-primary" id="compose">Compose</button>
<button class="btn btn-sm btn-outline-primary mailbox" id="sent">Sent</button>
<button class="btn btn-sm btn-outline-primary mailbox" id="archived">Archived</button>
<a class="btn btn-sm btn-outline-primary" href="{% url 'logout' %}">Log Out</a>
Related
So I'm not sure if I'm doing something wrong, but how come I can't use the 2nd button for each call (based off the button ids)?
I tried to search for running multiple instances of function calls on google, but nothing relevant came up.
I'm planning on using this button a lot on a page I'm building, 10 or so instances.
$(function(){
$('#consoleLog').on('click', function(){
var dataVar = $(this).attr('data-href');
consoleLog(dataVar);
});
document.getElementById("consoleLog2").addEventListener("click", function(){
var dataVar = $(this).attr('data-href');
consoleLog(dataVar);
});
});
function consoleLog(dataVar) {
console.log(dataVar);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-default" id="consoleLog" type="button" data-href="This is a test.">Console Log</button>
<button class="btn btn-default" id="consoleLog" type="button" data-href="This is a test, again.">Console Log v1.2</button>
<button class="btn btn-default" id="consoleLog2" type="button" data-href="This is another test.">Console Log v2</button>
<button class="btn btn-default" id="consoleLog2" type="button" data-href="This is another test, again.">Console Log v2.2</button>
Don't use the same id in multiple elements. Id should be a unique attribute. Use it as a class and implement the event listener for the class.
$(function(){
$('.consoleLog').on('click', function(){
var dataVar = $(this).attr('data-href');
consoleLog(dataVar);
});
$('.consoleLog2').on('click', function(){
var dataVar = $(this).attr('data-href');
consoleLog(dataVar);
});
});
function consoleLog(dataVar) {
console.log(dataVar);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-default consoleLog" id="consoleLog" type="button" data-href="This is a test.">Console Log</button>
<button class="btn btn-default consoleLog" id="consoleLog1" type="button" data-href="This is a test, again.">Console Log v1.2</button>
<button class="btn btn-default consoleLog2" id="consoleLog2" type="button" data-href="This is another test.">Console Log v2</button>
<button class="btn btn-default consoleLog2" id="consoleLog3" type="button" data-href="This is another test, again.">Console Log v2.2</button>
Try using additional classes instead of ids. Ids are meant to be used for one element.
$(function(){
$('.consoleLog').on('click', function(){
var dataVar = $(this).attr('data-href');
consoleLog(dataVar);
});
});
function consoleLog(dataVar) {
console.log(dataVar);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-default consoleLog" type="button" data-href="This is a test.">Console Log</button>
<button class="btn btn-default consoleLog" type="button" data-href="This is a test, again.">Console Log v1.2</button>
<button class="btn btn-default consoleLog" type="button" data-href="This is another test.">Console Log v2</button>
<button class="btn btn-default consoleLog" type="button" data-href="This is another test, again.">Console Log v2.2</button>
I also don't understand why you have two consoleLog functions. Does this suit your needs?
I solved the problem by just changing the function name that we call.
I want to bind some dynamic values to my javascript function call..
<button type="button" class="btn btn-info pull-right" onclick="addToCart('{{i.item_name}}','{{i.price}}')">Add to Cart</button>
How can I bind onclick="addToCart('{{i.item_name}}','{{i.price}}')"
Error:
Error: [$compile:nodomevents]
angularjs use ng-click and not onclick
<button type="button" class="btn btn-info pull-right" ng-click="addToCart('{{i.item_name}}','{{i.price}}')">Add to Cart</button>
I'm guessing the i is from an ng-repeat? Below should do the trick.
ng-click="addToCart(i.item_name, i.price)"
Solution 1:
You can assign those dynamic values to data attribute and read data attribute within your javascript method.
function addToCart(e){
console.log(e.target.dataset);
//{itemName:'...', itemPrice:'...'}
}
<button type="button" class="btn btn-info pull-right" data-item-name="{{i.item_name}}" data-item-price="{{i.price}}" onclick="addToCart(event)">Add to Cart</button>
Solution 2:
Write a method in your controller and call your javascript method from there
//javascript method
function addToCart(itemName, itemPrice){
//your logic here
}
//inside controller
$scope.addToCart = function(item){
//javascript method call
addToCart(item.item_name, item.price);
};
//html
<button type="button" class="btn btn-info pull-right" ng-click="addToCart(i)">Add to Cart</button>
is there a way to pass an ID of a clicked button to the save handler?
for example, I define some custom buttons:
.fn.editableform.buttons =
'<button type="submit" id="btnIN" type="button" class="editable-IN btn btn-success btn-sm">IN</button>'+
'<button type="submit" id="btnOUT" type="button" class="editable-IN btn btn-success btn-sm">IN</button>'+
'<button type="submit" id="btnAFD" type="button" class="editable-IN btn btn-success btn-sm">IN</button>'+
'<button type="submit" id="btnFFD" type="button" class="editable-IN btn btn-success btn-sm">IN</button>';
and then later on:
this where I catch submit buttons and where I would to get IDs of my custom buttons and proceed with my custom code...
that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
.off('save').on('save', function (e, params) {
console.log('test save');
});
Thank for help!
well guys i need to know how give a button a name like dont paye attention to the link it's not that necessary:
<button class="btn btn-success pull-right" name="next">Suivant</button>
here what i did in javascript but i need to add the attribute "name" with value "next" in "q" button
function(a){a.fn.smartWizard=function(m){var c=a.extend({},a.fn.smartWizard.defaults,m),x=arguments;
return this.each(function(){function C(){var e=b.children("div");
b.children("ul").addClass("anchor");
e.addClass("content");
n=a("<div>Loading</div>").addClass("loader");
k=a("<div></div>").addClass("actionBar");
p=a("<div></div>").addClass("stepContainer");
q=a("<a>"+c.labelNext+"</a>").attr("href","#").addClass("btn btn-default pull-right");
r=a("<a>"+c.labelPrevious+"</a>").attr("href","#").addClass("btn btn-default pull-left");
s=a("<a>"+c.labelFinish+"</a>").attr("href","#").addClass("btn btn-success pull-right");
c.errorSteps&&0<c.errorSteps.length&&a.each(c.errorSteps,function(a,b){y(b,!0)});
p.append(e);
k.append(n);
b.append(p);
b.append(k);
c.includeFinishButton&&k.append(s);
k.append(q).append(r);
How about using the attr() function like you use for defining a href:
$('#yourButton').attr('name', 'yourName');
To create a button on the fly:
var btn = $('<button/>').attr('name', 'next').addClass('btn btn-success pull-right');
Which results in the following HTML:
<button class="btn btn-success pull-right" name="next"></button>
I'm using Bootstrap as framework.
I'm new in JS so help me out.
I need a "button value" to change when clicked.
Button looks like this:
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks()" value="out">Ut</button>
And here is my JS:
<script>
function sayThanks(){
var element = document.getElementByld('btn_out');
element.innerHTML="Tack";
</script>
It's place between "head" tags.
Why doesn't it work?
Change getElementByld to getElementById(with an I) and close the function curly brace
function sayThanks(){
var element = document.getElementById('btn_out');
element.innerHTML="Tack";
}
function sayThanks(){
var element = document.getElementById('btn_out');
element.innerHTML="Tack";
}
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks()" value="out">Ut</button>
You have couple of problems
1.getElementById misspelled
2.Missing closing }
function sayThanks(){
var element = document.getElementById('btn_out');
element.innerHTML="Tack";
}
Well, it looks like you misstyped the function getElementByld and did not close the whole function itself. If you changed it to getElementById it is probably going to work.
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks()" value="out">Ut</button>
function sayThanks(){
var tE = document.getElementById('btn_out');
if (tE) tE.innerHTML = 'Tack';
}
Furthermore, I would just pass the element to the function instead of searching for it, since it is the caller anyway.
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks(this)" value="out">Ut</button>
function sayThanks(e){
e.innerHTML = 'Tack';
}
I think this code will help you
html:
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" value="out">Ut</button>
javascript:
document.getElementById("btn_out").onclick = sayThanks;
function sayThanks(){
this.innerHTML="Tack";
}
Fiddle
You have misspelled the getElementById: getElementById not getElementByld
http://jsfiddle.net/hn0j9tra/
If you use inline javascript, you should provide an id as a parameters into your function:
<script>
function sayThanks(id){
document.getElementById(id).innerHTML="Tack";
}
</script>
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" value="out" onclick="sayThanks(this.id)">Ut</button>
Working demo