I'm trying to make a boolean change in this value by using a function. I tried it this way:
var itemInStock = false;
$("#button").click(function(){
itemInStock = true
}
if( itemInStock === false){
document.write("item is out of stock");
} else{
document.write("item is in stock");
}
I understand why it's not working but I can't find a way to solve this!
I just can guess what you're trying to achieve. It seems like you wanna check at some point, if item is currently in stock. Since you can't know when the click will occur, one solution could be periodically checking the value.
(function () {
var itemInStock = false;
$("#button").click(function () {
itemInStock = true
});
window.setInterval(function () {
if (itemInStock === false) {
console.log("item is out of stock");
} else {
console.log("item is in stock");
}
}, 500);
})()
http://jsfiddle.net/Ttu5N/
Tell me, if I'm wrong with my guessing.
Update: way easier approach
$(function () {
var $state = $('#state');
$state.text('item is out of stock');
$("#button").click(function () {
$state.text('item is in stock');
});
})
<button id="button">click me</button>
<div id="state"></div>
http://jsfiddle.net/Wb3ET/
Just do it directly on click.
because itemInStock doesn't get changed until the button is clicked...
You cannot use document.write after load and is also not necessary also the Boolean changes when the button is clicked and not before
Create a span with id="status" and have
var itemInStock = false;
$(function() {
$("#button").click(function(){
itemInStock = true;
$("#status").html("item is in stock":
}
$("#status").html(itemInStock?"item is in stock":"item is out ofstock");
});
// HTML
<div id="status">item is out of stock by default</div>
// JS
var itemInStock = false;
$("#button").click(function(){
itemInStock = true;
}, changeStatus());
function changeStatus(){
if( itemInStock === false){
$('#status').html("item is out of stock");
} else{
$('#status').html("item is in stock");
}
}
Related
This function toggles the active state of a hamburger icon when clicking on it. Also clicking anywhere on the document does the same but only if the dropdown is open.
var dropdownOpen = false;
$(".hamburger").click(function () {
$(this).toggleClass('is-active');
dropdownOpen = !dropdownOpen;
});
$(document).ready(function(){
$(document).click(function(e){
if ($(e.target).is('.hamburger')) {
return;
}
else if (dropdownOpen === true)
{
$(".hamburger").toggleClass('is-active');
dropdownOpen = false;
}
});
});
How would I go about combining two click events so I don't have to use a global variable?
I've tried this:
$(document).ready(function(){
var dropdownOpen = false;
$(document).click(function(e){
if ($(e.target).is('.hamburger')) {
$('.hamburger').toggleClass('is-active');
dropdownOpen = !dropdownOpen;
}
else if (dropdownOpen === true)
{
$(".hamburger").toggleClass('is-active');
dropdownOpen = false;
}
});
});
..but it didn't work, any ideas?
You can wrap all your JS in an Immediately Invoked Function Expression. All the JS variables are not scoped to this function expression instead of being available globally.
(function() {
var dropdownOpen = false;
$(".hamburger").click(function() {
$(this).toggleClass('is-active');
dropdownOpen = !dropdownOpen;
});
$(document).ready(function() {
$(document).click(function(e) {
if ($(e.target).is('.hamburger')) {
return;
} else if (dropdownOpen === true) {
$(".hamburger").toggleClass('is-active');
dropdownOpen = false;
}
});
});
})();
There's no need for the global varable at all.
$(document).click(function(e) {
if ($(e.target).is(".hamburger")) {
$(e.target).toggleClass("is-active");
} else {
$(".hambuger").removeClass("is-active");
}
}
There's no harm in calling removeClass() if the class isn't there.
$(document).ready(function() {
$("#btn").click(function() {
$("#form").toggle();
});
$("#submit").click(function() {
if ($(".product").checked = true) {
alert("Thank You!")
} else {
alert('Please Choose A Product');
}
var name = $("input:text").val();
var nLi = $("<li>").appendTo("ul");
nLi.text(name);
});
});
Everytime I put text in the text input, the <li> will display for only a moment, but the page will refresh and it will disappear. Sorry if this is obvious, I'm still learning.
Don't allow the page to refresh. Return false at the end.
$(document).ready(function() {
$("#btn").click(function() {
$("#form").toggle();
});
$("#submit").click(function() {
if ($(".product").checked) {
alert("Thank You!")
} else {
alert('Please Choose A Product');
}
var name = $("input:text").val();
var nLi = $("<li>").appendTo("ul");
nLi.text(name);
return false;
});
});
And please change
if ($(".product").checked = true) {
to
if ($(".product").checked == true) {
Try to use event.preventDefault() in your click event, for example:
$("#submit").click(function(e) {
e.preventDefault();
}
for more info about this jquery method event.preventDefault()
My problem is that when I try to bind the click event using JQuery on(). It doesn't go the next page.
What is your favorite color?This input is required.
$('#continue-bank-login-security-question-submit').off('click');
$('#continue-bank-login-security-question-submit').on('click',function(e){
e.preventDefault();
e.stopPropagation();
if ($('.tranfer--bank-security-question-inputs').val().length===0){
$('.transfer--form-row-error').show();
return false;
} else {
$('.transfer--form-row-error').hide();
return true;
}
});
Because you call
e.preventDefault();
e.stopPropagation();
of course it does not do anything after returning.
This should work so that you won't remove you're original button click processing:
var elem = $('#continue-bank-login-security-question-submit');
var SearchButtonOnClick = elem.get(0).onclick;
elem.get(0).onclick = function() {
var isValid = false;
var sessionKey = '';
if ($('.tranfer--bank-security-question-inputs').val().length===0){
$('.transfer--form-row-error').show();
return false;
} else {
$('.transfer--form-row-error').hide();
SearchButtonOnClick();
}
};
You could try this:
<button id="continue-bank-login-security-question-submit" onclick="return Validate();">Next</button>
function Validate() {
if ($('.tranfer--bank-security-question-inputs').val().length === 0) {
$('.transfer--form-row-error').show();
return false;
} else {
$('.transfer--form-row-error').hide();
nextPage();
}
}
sorry if this is a stupid question but I'm a bit of a javascript novice and I'm trying to learn better programming instead of "cheating" and writing out each event type individually.
I can't seem to get this to run. The user clicks on a link at the top of the page with a data attribute with an event types ID number in it (data-event-type="1", etc). It should hide any events without that id number. JS and HTML is below.
JS fiddle with it all
http://jsfiddle.net/96r9jqp6/
HTML
<div class="sort">
All
Trainer
Conference
</div>
<div class="events-container">
<div class="eventsys-event-wrapper" data-event-type="1">
event 1 info here
</div>
<div class="eventsys-event-wrapper" data-event-type="2">
event 2 info here
</div>
<div class="eventsys-event-wrapper" data-event-type="1">
event 3 info here
</div>
<div class="eventsys-event-wrapper" data-event-type="2">
event 4 info here
</div>
</div>
Javascript
<script src="text/javascript">
$(document).ready(function(){
$('.eventSort').click(function(){
if (event.preventDefault) event.preventDefault();
else event.returnValue = false;
var thisEventSort = $(this).attr("data-event-sort");
if (thisEventSort = "0"){
$('.eventsys-event-wrapper').show('fast');
return;
} else {
$('.eventsys-event-wrapper').each(function(){
var thisEventType = $(this).attr("data-event-type");
if (thisEventType = thisEventSort) {
$(this).show('fast');
} else {
$(this).hide('fast');
}
});
}
});
});
</script>
if (thisEventSort = "0")
needs to be
if (thisEventSort === "0")
and same for
if (thisEventType = thisEventSort)
needs to be
if (thisEventType === thisEventSort)
Something like this
$('.eventSort').click(function(e){
e.preventDefault();
var thisEventSort = $(this).data("event-sort");
$('.eventsys-event-wrapper').hide().filter(function() {
return thisEventSort === 0 ? true : ($(this).data('event-type') == thisEventSort);
}).show('fast');
});
FIDDLE
You didnt pass event also... so your if there is not needed...
and use .data("event-sort") for this...
$(document).ready(function(){
$('.eventSort').click(function(event){
event.preventDefault();
var thisEventSort = $(this).data("event-sort");
if (thisEventSort == "0"){
$('.eventsys-event-wrapper').show('fast');
return;
} else {
$('.eventsys-event-wrapper').each(function(){
var thisEventType = $(this).attr("data-event-type");
if (thisEventType == thisEventSort) {
$(this).show('fast');
} else {
$(this).hide('fast');
}
});
}
});
});
I've updated your jsfiddle here
http://jsfiddle.net/96r9jqp6/5/
the most import piece is your use of the "=" operator
you need to use triple equal to test for equality instead of just one.
also when using data-* attributes, you should use the jquery .data() function to retrieve its values
$(document).ready(function(){
$('.eventSort').click(function(){
if (event.preventDefault) event.preventDefault();
else event.returnValue = false;
var thisEventSort = $(this).data("event-sort");
console.log(thisEventSort);
if (thisEventSort === 0){
$('.eventsys-event-wrapper').show('fast');
return;
} else {
$('.eventsys-event-wrapper').each(function(){
var thisEventType = $(this).data("event-type");
if (thisEventType === thisEventSort) {
$(this).show('fast');
} else {
$(this).hide('fast');
}
});
}
});
});
Im having problem altering jQuerys beforeunload() functionality, depending on user actions.
$(document).ready(function() {
$(window).bind('beforeunload', function() {
if (billChanged == false) {
return false;
}
else if ( savebutton was clicked ) {
return false;
}
else {
return "refreshing page without saving, huh? you're a bad boy!";
}
});
});
The issue im having, that i can't come up with a way to check if 'savebutton' was clicked, as typed in else if clause in the snippet above.
The form itself is quite complicated, and i'm not able to alter it that much.
$(document).ready(function() {
var not_saved = true;
$('#saveButtonId').on('click', function() {
not_saved = false;
})
$(window).on('beforeunload', function() {
if (not_saved && billChanged)
return "refreshing page without saving, huh? you're a bad boy!";
}
});
});
you can define a global variable. Change it's value onclick of the button, and then check it in your function
var clickedButton = false;
Then your html
<input type="button" .... onclick="clickedButton=true;">
and then in your function
else if ( clickedButton ) {
return false;
}