We Keep Coding

Using a name attribute in a javascritpt .forEach method

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>

How to pass value from php to jquery function my code is given below

The following is my code. Without passing value working well.
function add(name) {
alert(name);
}
<button type="button" id="button" class="btn btn-success" onclick="add("Aftab");">
Send
</button>

You can do it like that:
<button type="button" id="button" class="btn btn-success" onclick="add('<?php echo $name; ?>');">
Send
</button>
function add(name){
alert(name);
}

You have added in this way value to function in this way which is wrong.
The issue is due to double quotes.
onclick="add("Aftab");"
Use this
onclick="add('Aftab');"
or
onclick='add("Aftab");'
function add(name) {
alert(name);
}
<button type="button" id="button" class="btn btn-success" onclick="add('Aftab');">
Send
</button>

binding angular scop as javascript parameters

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>

x-editable custom buttons IDs

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!

Javascript Onclick, won't work

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