Javascript Onclick, won't work - javascript

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

Related

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>

Issue with JS/jQuery function calling from different buttons

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.

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>

name a button javascript

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>

Categories