alert not firing in JavaScript code - javascript

I have the following code and the first alert gives me an X but then the if block never fires. I'm sure its something simple I'm doing wrong...
$('.collectionofdates1>.datenumber').click(function(){
alert($(this).html());
if($(this).html() == "X"){
alert('asdf');
return false;
}
else{
$('.collectionofdates1 .datenumber').removeClass('selecteddate');
$(this).addClass('selecteddate');
}
});

2 recommendations:
1) put spaces in your selectors: $('.collectionofdates1 > .datenumber')
2) use text() when you mean text(), not html(). Also use .trim() to make sure you don't have whitespace: if($(this).text().trim() == 'X'){

Related

If/Else Conditional not running the second time I call the function

When I run the function the first time, either condition will work. But when I run the function a second time, the new value of "cute" will not change the background image.
$("#sbmt-button").click(newImage);
function newImage(){
event.preventDefault();
var cute = $("#cute").val();
$("#cute").val(" ");
if (cute == "kittens") {
$("body").attr("class", "kittens");
console.log(cute);
} else if (cute == "puppies"){
$("body").attr("class", "puppies");
console.log(cute);
}
}
http://codepen.io/ElaineM/pen/jbYbwj
Your code actually works, but only thing is you need to use $("#cute").val(""); instead of $("#cute").val(" ");, which puts a space and it doesn't match the values.
Also, you may try doing the comparison this way by trimming the empty spaces:
function newImage(){
event.preventDefault();
var cute = $("#cute").val().trim();
$("#cute").val(" ");
if (cute == "kittens") {
$("body").attr("class", "kittens");
console.log(cute);
} else if (cute == "puppies"){
$("body").attr("class", "puppies");
console.log(cute);
}
}
The line $("#cute").val(" "); puts a space in the text box. What you want is an empty string: $("#cute").val("");
Replacing it with an empty string seems to give you your desired output.
PROBLEM
You need to use event object e passed to event handler as an argument, otherwise your button acts as a submit button and the page gets refreshed.
SOLUTION
Use the following code instead:
function newImage(e){
e.preventDefault();
var cute = $("#cute").val();
console.log(cute);
if (cute === "kittens") {
$("body").attr("class", "kittens");
} else if (cute === "puppies"){
$("body").attr("class", "puppies");
}
// Reset input
$("#cute").val("");
}
EXAMPLE
See updated example for demonstration.

JQuery Multiple If Statements

I have the following code block which works great:
jQuery(".archive-job_listing-layout").click(function(evt) {
evt.preventDefault();
if (!jQuery("body").hasClass('post-type-archive-job_listing'))
return;
console.log("Click " + jQuery(this).data('style'));
console.log(jQuery(window).width());
if (jQuery(this).data('style') == "grid" && jQuery(window).width() < 800) {
jQuery("ul.job_listings").css('display','block');
jQuery("table#wswp-header-row").hide().remove();
jQuery(".table_padding").hide().remove();
return;
}
layout_to_table("click");
})
});
I want to do is add another line which like:
if (!jQuery("body").hasClass('archive tax-job_listing_type'))
return;
but adding this breaks the code. I've tried using If Else, Or (||) And (&&), but nothing works.
If i substitute 'post-type-archive-job_listing' with 'archive tax-job_listing_type' the code also works fine, i just can't seem to get both of these lines of code to work at the same time.
This should work:
if(!jQuery("body").hasClass('archive tax-job_listing_type') && !jQuery("body").hasClass('post-type-archive-job_listing'))
return;
Perhaps separating with a few more parenthesis will work out for you:
if (!(jQuery("body").hasClass('post-type-archive-job_listing')) || !(jQuery("body").hasClass('archive tax-job_listing_type')))
return;
Can use is() which accepts multiple selectors. Will act like or when more than one selector is passed to it
if(!jQuery("body").is('.archive tax-job_listing_type, .post-type-archive-job_listing'))
DEMO

If statement in Javascript?

Is this code correct?
if(!($('textarea: name').val().length == 0)) {
alert("test");
}
I want to check if there is something written or not inside the textarea field in the form? I ask because it's not working!?
You're missing your closing parens in your if statement. Try this:
if(!( $('textarea: name').val().length == 0 ))
{alert("test");}
There may be other jQuery selector issues.
if(!($('textarea').val().length == 0)) will work if you have only one textarea element in your page. I think what you were trying to do with that :name selector was select a specific textarea based on its name, in which case you need:
$('textarea[name=yourName]')
Since a length of 0 is "falsy", you can simplify your test to using just .length:
if ($('textarea[name=foo]').val().length) {
alert(true);
} else {
alert(false);
}
Here is a jsFiddle where you can play with it.
if ($('textarea: name').val().length > 0) {
// do something if textbox has content
}

javascript If statement no working

This is driving me crazy - basically this if statement is not working. The code keeps jumping into the else statement, I have hovered over the buttonText and everything seems alrite until it hits the conditions.
function DesignCodeViewClick(el) {
$("div.divdesigncodeviewbuttonsselected").attr("class", "divdesigncodeviewbuttons");
$(el).attr("class", "divdesigncodeviewbuttonsselected");
var buttonText = el.innerText;
if (buttonText.toLowerCase() == "design") {
$("#iframecms").css("display", "none");
$("textarea.divhtmleditor").css("display", "none");
}
else if (buttonText.toLowerCase() == "browse") {
$("#iframecms").css("display", "block");
$("textarea.divhtmleditor").css("display", "none");
}
else {
$("textarea.divhtmleditor").css("display", "block");
$("#iframecms").css("display", "none");
WebForm_DoCallback('SEOCMSControl1', 'getcode~http://www.triksportfolio.com', GetCodeServerResponse, null, null, true);
}
}
textContent is the standard property. innerText is a Internet Explorer thing I believe. They are almost the same, but not quite.
If you did want to do it that way, I'd suggest this...
var text;
if ('textContent' in el) {
text = el.textContent;
} else {
text = el.innerText;
}
But, you are using jQuery, however, so just use text() method.
To ensure there is no leading or trailing whitespace, you can use jQuery's trim() utility function.
In addition, you are doing a few things jQuery can help you with. Look at addClass() and hide().

How to check if a Textarea is empty in Javascript or jQuery?

How do I check if a textarea contains nothing?
I tried with this code:
if(document.getElementById("field").value ==null)
{
alert("debug");
document.getElementById("field").style.display ="none";
}
But it doesn't do what I expect.
I expect that it should appear a messagebox "debug" and that the textarea is not shown.
How can I fix that issue?
You wanna check if the value is == "", not NULL.
if(document.getElementById("field").value == '')
{
alert("debug");
document.getElementById("field").style.display ="none";
}
UPDATE
A working example
And another one using TRIM in case you wanna make sure they don't post spaces
Implementation for TRIM()
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,"");
}
You can use following jQuery to escape white spaces as well.
if($("#YourTextAreaID").val().trim().length < 1)
{
alert("Please Enter Text...");
return;
}
There is a world of difference between null and empty !
Try this instead:
if(document.getElementById("field").value == "")
{
alert("debug");
document.getElementById("field").style.display ="none";
}

Categories