If-statement never reaches the else part - javascript

I'm trying to change the text of a button with the following code.
// hide unavailable courses
$("#availability_button").click(function () {
$(".availability_red").toggle();
if ($(this).val('Show Unavailable')){
$(this).html('Hide Unavailable');
} else {
$(this).html('Show Unavailable');
}
});
The button text changes the first time I use it, but never again. Not sure why that is and I have pretty much hit the limits of my JS debugging knowledge.
I put an alert into it and proved it never reaches down to the else path.
What am i doing wrong?

It always evaluates to true because .val(val) returns the jQuery object and objects are truthy (ToBoolean gives true) values.
Also, you are using .val() whereas you probably want to check the .html()
Try this:
if ($(this).html() === 'Show Unavailable') {
$(this).html('Hide Unavailable');
} else {
$(this).html('Show Unavailable');
}
Demo http://jsfiddle.net/jfetf/

$(this).val("Show Unavailable") is setting the value and returning an object, it's not checking equality.
Try $(this).val() == "Show Unavailable" instead. It will take the current value and compare it to the string.

$(this).val('Show Unavailable') return jQuery object which is interprete as true.
Also $(this).val('Show Unavailable') set value to element...

Related

Javascript innerHTML method returning wrong value

I'm looking for some support with this math's project I'm doing. Basically I've created four boxes, and populated one with the correct answer. When I click on the correct answer, the if statement doesn't run; it always shows as wrong.
I include a snippet, if someone can see something glaringly wrong then I'd appreciate a response.
I'm only trying it with box 1 to see if it works, and the correct answer does populate in 1 of the 4 boxes, however it always says it's the wrong answer, even when correct answer is in box1.
document.getElementById("box1").onclick = function() {
if (playing == true) {
if (this.innerHTML == correctAnswer) {
score++;
document.getElementById("scorevalue").innerHTML = score;
hide("wrong");
show("correct");
setTimeout(function() {
hide("correct");
}, 1000);
} else {
hide("correct");
show("wrong");
setTimeout(function() {
hide("wrong");
}, 1000);
}
}
}
Instead of comparing two values with ==, try === in your if-statements.
Example: if (playing === true) {
This is most likely related to your HTML, and the way you have setup your tags. For example, if box1 is a div, then if your code looks like this:
<div id="box1">
answer
</div>
Then in some explorers, specifically Chrome and FireFox, it considers linebreak as empty space.
So, if var correctAnswer = "answer";
and you compare correctAnswer with box1.innerHTML like so:
if (correctAnswer == box1.innerHTML)
Then you will always get false returned.
In order to fix the issue, change your HTML like so:
<div id="box1">answer</div>
Basically remove the linebreaks.
Everything else seems to be fine.

compare in javascript innerHTML and value

I need to compare the javascript condition below : but I get only false
How can I fix that ?
if(document.getElementById('captchaTypedValue').innerHTML == String(document.getElementById('login:inputCodSeg').value))
returns me false
captchaTypedValue is span element
login:inputCodSeg is input element
javascript chromium console
Here:
if(document.getElementById('captchaTypedValue').innerHTML == String(document.getElementById('inputCodSeg').value)) {
// do stuff
}
basically I think you don't have an ID called login:inputCodSeg. If that doesn't work, it's probably because the condition simply is not true.
ALSO:
if you would like to use jquery:
if ( $('#captchaTypedValue').html() == $('#inputCodSeg').val() ){
// do stuff
}
should work
EDIT: there's also a chance that the condition is just not true

javascript variables always not equal

I have two variables, totalGuess and condensedAnswer. I am creating a jQuery click event and if totalGuess doesn't equal condensedAnswer then the click event will not occur and a div called message will display the message "Sorry, but your answer is incorrect. Please try again."
The problem is, totalGuess in the if statement is never equal to condensedAnswer. I've tried seeing typeof and they are both strings. I've tried console.log(totalGuess+"\n"+condensedAnswer); and they both return the same value. I've tried hardcoding the condensedAnswer, and totalGuess was able to be equal to the hardcoded answer. But when I tried comparing condensedAnswer with the hardcoded answer, it's not equal, even though the console.log value for condensedAnswer is the same. I'm not what's wrong.
Here's the code snippet:
$('.submitGuess').click(function(e){
var totalGuess = "";
var condensedAnswer = answer.replace(new RegExp(" ","g"), "");
$('.crypto-input').each(function(){
totalGuess += $(this).val();
});
// if incorrect guess
if(totalGuess !== condensedAnswer) {
$('.message').text("Sorry, but your answer is incorrect. Please try again.");
e.preventDefault();
}
// if user wins, congratulate them and submit the form
else {
return true;
}
});
If it helps, here's the page, just a random test cryptogram plugin for Wordpress:
http://playfuldevotions.com/archives/140
The problem has nothing to do with the check. The problem is the fact your value you are checking against has hidden characters. However you are getting that string has the issue.
Simple debugging shows the problem
> escape(totalGuess)
"God%27sMasterpieceMatthew15%3A99Psalms129%3A158"
> escape(condensedAnswer)
"God%27sMasterpieceMatthew15%3A99Psalms129%3A158%00"
It has a null character at the end.
Now looking at how you fill in the answer you have an array with numbers
"071,111,100,039,...49,053,056,"
Look at the end we have a trailing comma
when you do a split that means the last index of your array is going to be "" and hence why you get a null.
Remove the trailing comma and it will magically work.

If statement condition is met, but contents not executed?

I've got an two if() statements, for which the conditions are both met with the default values in the <select> and <input> form fields I've tested this by assigning the values to a variable and writing the variable. (0 and Url).
However, it seems that neither if() statement's contents execute properly.
Here's a link to my JSFiddle: http://jsfiddle.net/cfRAk/2/
Any edits/answers as to why this is happening would be greatly appreciated!
Change this line:
var geo_select_val = $('select[name=g_country\\[1\\]]').val();
To this:
var geo_select_val = parseInt($('select[name=g_country\\[1\\]]').val());
The thing is geo_select_val is actually "0" and not 0. Converting a string to boolean will only result in false if string is empty. "0" is not empty, so it was being evaluated as true. Since you are going !geo_select_val, it never goes in.
Caveat: this fix will only work if you make sure all values are numbers. If that's not the case, check for equality with "0"
Here's the code you're asking about:
$('#post-form').click( function() {
var geo_select_val = $('select[name=g_country\\[1\\]]').val();
if(!geo_select_val) {
var geo_url_val = $('input[name=g_url\\[1\\]]').val();
if(geo_url_val != "http://google.com") {
$('#notification').html("You need to enter a valid url");
}
}
});
When I set a breakpoint in this click function and then click on the Post Form div, geo_select_val comes back as "0" which means that if(!geo_select_val) will fail because geo_select_val does have a value so the first if condition will never be executed.
Perhaps you want the first if condition to be:
if (geo_select_val != "0") {
which will tell you if some other value besides the default has been selected (assuming you add other options to that select tag with different values).

If statement in jQuery plugin

I have a jQuery plugin with an if statement in it.
For some strange reason (probably it is just me screwing things up) it always gets in the else part even when the url's are the same.
if (opts.startUrl == track.permalink.url) {
var active = true;
} else {
alert('|'+opts.startUrl+'| |'+track.permalink_url+'|');
var active = false;
}
Check it out # http://dev.upcoming-djs.com
The surrounding code uses track.permalink_url, while the if block evaluates track.permalink.url (which is always undefined), so this condition:
opts.startUrl == track.permalink.url
Always evaluates to false
Update: as #brianpeiris points out, the correct fix here would be to change the condition to:
opts.startUrl == track.permalink_url
Start printing both the values and see what is the difference , otherwise do this
if (opts.startUrl.toLowerCase() == track.permalink.url.toLowerCase())

Categories