I have a button named checkout.But onclick i'm getting this error : Reference error:checkout not defined
My button code is :
<input type="button" value="Checkout" title="Checkout" class="button checkout" onclick="checkout()">
When i click on the button i want to show user-info
javascript code is:
$(function(){
$('.add-cart').html('+');
function checkout(){
$('.cart-status').hide(slow);
$('.user-info').show(slow);
}
});
Checkout is defined inside another function so it is not accessible from the global scope. You can put it in the global scope:
$(function () {
$('.add-cart').html('+');
});
function checkout() {
$('.cart-status').hide('slow');
$('.user-info').show('slow');
}
But a better solution is to stop putting event handlers in your HTML markup:
<input type="button" value="Checkout" title="Checkout" class="button checkout" />
$(function(){
function checkout() {
$('.cart-status').hide('slow');
$('.user-info').show('slow');
}
$('.add-cart').html('+');
$('.button.checkout').click(checkout);
});
(Note: Another problem in your code was that you were using the undefined variable slow instead of the string value 'slow', but scoping was preventing checkout() from being called at all.)
Related
My jquery is not alerting anything when I click the button with the id decrease. This is my code. I am using external js file.
$(document).ready(
$('#decrease').click(function() {
var beforeIncrement = $('#amt').val();
alert(beforeIncrement);
}))
I tried doing this and it is working fine.
$(document).ready(function(){
alert("Ready");
})
This is the html code:
<div class="row justify-content-center d-flex">
<button id="decrease" class="btn btn-warning">-</button>
<input type="number" id="amt" value="1"/>
<button id="increase" class="btn btn-warning">+</button>
</div>
what's wrong with my first code snippet?
The value you pass to ready() needs to be a function.
In your first example, you are passing the return value of $('#decrease').click(...).
This means that $('#decrease').click(...) has to be evaluated immediately, so it is looking for #decrease before the DOM is ready and the element doesn't exist yet.
ready() then ignores the value you pass to it because it isn't a function.
Wrap the call to $('#decrease').click(...) in a function, just as you did for alert(...) in the second example.
You also have a missing ); at the end but I'm guessing that just got cut off when you transcribed your code to the question.
Try using this:
$('#decrease').on('click', function(){
var beforeIncrement = $('#amt').val();
alert(beforeIncrement);
})
if you have the right html syntax, the right syntax for your js script is:
(you have to use a function for document.ready):
$( document ).ready(function() {
$('#decrease').click(function() {
var beforeIncrement = $('#amt').val();
alert(beforeIncrement);
});
});
you could use the shorthand syntax:
$(function() {
$('#decrease').click(function() {
var beforeIncrement = $('#amt').val();
alert(beforeIncrement);
});
});
I have this html element:
<table id="miniToolbar">
<tbody>
<tr><td>
<button id="btnStrView" type="button" onclick='parent.ExecuteCommand()' class="button_air-medium">
<img id="streetView" class="miniToolbarContant" src="../stdicons/streetview-icon.png"></button>
</td></tr>
<tbody>
</table>
as you can see inside button I have on click event:
onclick='parent.ExecuteCommand()'
And I have this JS function:
function isMenuItemMasked(item)
{
var funcId = '75';
var elem = document.getElementById('btnStrView');
return false;
}
as you can see inside function I have variable called funcId.
I need to put this funcId to the on click event:
onclick='parent.ExecuteCommand('75')'
After I fetch element and put it inside elem variable how do I put funcId as parameter to parent.ExecuteCommand()?
I think you want to set the function argument dynamically. Without using external libraries I would do as follows:
function runSubmit() {
var value = document.getElementById("text").value;
document.getElementById("run").addEventListener('click', function() {
func(value);
});
}
function func(value) {
console.log(value);
}
<input id="text" type="text">
<input type="submit" value="Setup Param" onclick="runSubmit()">
<input id="run" type="submit" value="Run with param">
How to use this: When you run the snippet, you will see a text input, a Setup Param button and a Run with param button. Insert something in the text input and click Setup Param. After, click on Run with param to see the effect
The input text contains the string that will be used as parameter for func(value). The update of #run button callback is triggered by the "Setup param", through the runSubmit() callback. This callback adds to the #run element a listener for the 'click' event, that runs a function with the parameter fixed when event occurs.
This is only a MCVE, you should adapt it to your case scenario.
Mh... Actually #jacob-goh gave you this exact solution in a comment while I wrote this...
you can use jquery to call you function from inside the function and pass your variable to that function.
function isMenuItemMasked(item)
{
var funcId = "75";
$(document).ready(function(){
$("#btnStrView").click(function(){
parent.ExecuteCommand(funcId);
});
});
}
function ExecuteCommand(your_var){
alert(your_var);
//your code
}
$(".btn").click(function() {
someFunction();
});
function someFunction() {
var btnID = $(".btn").attr("data-index"); // This selector should reference the button that was clicked
console.log(btnID);
}
I want the selector inside someFunction() to reference the exact button that was clicked, not just the first element in the DOM with the class .btn.
Is there a way to do this without giving all buttons unique IDs?
You can give same class and different id's for the buttons.
$(".btn").click(function() {
someFunction();
});
function someFunction() {
$(".btn").each(function(){
console.log($(this).attr("id")+" value:"+$(this).val());
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn" id="btn1" value="1">
<input type="button"class="btn" id="btn2" value="2">
<input type="button" class="btn" id="btn3" value="3">
You need not separate the callback from the event handler.
Instead, just incorporate the callback into the handler directly. Then you can reference the element using the 'this' keyword
$(".btn").click(function() {
var btnID = $(this).data("index");
console.log(btnID);
});
Also, it's worth noting that when you are using a 'data' attribute, you can reference it using $(el).data('attrName')
Why does the btnSubmit click event callback function fire first, and then the animation
whereas the btnSubmit2 event the callback function happens after the animation has finished?
$('#btnSubmit').click(function () {
$('#testDiv').hide('slow,', onComplete());
});
var onComplete = function () {
alert('test');
}
$('#btnSubmit2').click(function () {
$('#testDiv').hide('slow', function () {
alert('test');
});
});
HTML
<form id="form1" runat="server">
<div>
<input type="text" id="auto" />
<input type="text" id="auto2" />
</div>
<a id="btnSubmit" href="#">SUBMIT</a>
<a id="btnSubmit2" href="#">SUBMIT 2</a>
<div id="testDiv">Here's some test text</div>
</form>
In this line:
$('#testDiv').hide('slow,', onComplete());
Because you have the parentheses there, you are executing the onComplete function immediately.
Try this instead:
$('#testDiv').hide('slow,', onComplete);
That passes a reference to the function instead of executing it.
You're not passing a function reference
$('#testDiv').hide('slow,', onComplete());
You're executing the function and passing the return value (undefined) to the hide method.
Have a look at the difference between the two piece of code. In one you are passing an anonymous function with a call to alert inside. The other you are immediately calling your function.
$('#testDiv').hide('slow,', onComplete());
Should be
$('#testDiv').hide('slow,', onComplete);
Otherwise you are passing the result of the function as your callback and not the function itself.
function UserModel() {
self.forgeTransactions = function() {
console.log("forgeTransaction()");
}
self.navigateToNew() = function {
console.log("navigateToNew()");
}
}
ko.applyBindings(new UserModel());
<button class="btn" style="float: right" data-bind:"click: forgeTransactions">Add fake transaction</button>
The problem with this code is that forgeTransaction is never called whilst if i change the click binding to navigateToNew i can clearly see "navigateTwo" on the console.
Why is this happening?
Note: I can attach the entire source if needed.
You should write data-bind= not data-bind:
Your function is called forgeTransactions but you are attempting to call forgeTransaction in the button data-bind.