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.
Related
$(document).ready(function (){
var postcode = $('#postcode-form').val();
function errors(){
if(postcode == ""){
$('#postcode-form').addClass("form-error");
}else{
$('#postcode-form').removeClass("form-error");
}
}
$('#submit-form').click(errors);
});
The class adds when the form is empty but doesn't remove when I enter details in the form. I don't understand why?
Move the postcode chunk of code within your function. Otherwise it gets the value only once when the page loads. By placing it within the function, it'll check the value on each click.
function errors() {
var postcode = $('#postcode-form').val();
if (postcode == "") {
$('#postcode-form').addClass("form-error");
} else {
$('#postcode-form').removeClass("form-error");
}
}
So now you know why it isn't working. I would take advantage of the blunder though, and refactor to cache the selector!
$(document).ready(function (){
var $postcode = $('#postcode-form');
function errors(){
if($postcode.val() == ""){
$postcode.addClass("form-error");
}else{
$postcode.removeClass("form-error");
}
}
$('#submit-form').click(errors);
});
I'm trying to get an input box to perform on blur() either set a value of 0.000 if the value entered is an empty string and if it isn't then perform some function. This is what I have. Help me out here, I don't know the appropriate syntax on how to do this.
jQuery("#10kt-weight").blur(function(){
if(valueOf("#10kt-weight") == "") {
jQuery("#10kt-weight").val("0.000");
} else {
calc_value();
}
});
jQuery("#10kt-weight").blur(function(){
if(jQuery("#10kt-weight").val() === "") {
jQuery("#10kt-weight").val("0.000");
} else {
calc_value();
}
});
Since your function is executed by the .blur() method, using this inside the function will refer to #10kt-weight, you can get the actual value of your element with jQuery(this).val() (or this.value) Try this:
jQuery("#10kt-weight").blur(function(){
if(jQuery(this).val() == "") {
jQuery(this).val("0.000");
} else {
calc_value();
}
});
You can try with jQuery.trim() to trim spaces and .length to check if there are characters after trim the input value
jQuery("#10kt-weight").blur(function(){
if(jQuery.trim(jQuery(this)).length) {
jQuery(this).val("0.000");
} else {
calc_value();
}
});
function Open() {
var cc = document.getElementById('FName');
if ('Newfile.rtf' == cc.innerHTML)
{
alert("New File");
} //close If NewFile.rtf
else {
alert("Not new file");
}
}//close Open()
Here I have string "NewFile.rtf" in a element with id="FName" on the page. When the FName contains "Newfile.rtf" in it it stills goes to the else part of the function instead of going to if part. I tried different ways to write the compare statement in the if condition, no luck . Appreciate the help if anyone can help figure out this.
Thank you.
The simplest explanation is that your cc.innerHTML call is not returning what you think it is returning. Why don't you console.log or debug.
add something like
var innerhtml = cc.innerHTML;
console.log("innerHTML = " + innerhtml) // wont work in IE.
before the if statement.
Try using regular expressions to find your filename, also check if the text you are searching is not into another DOM element, elimate left and right spaces, you should use Google Chrome for debuging the Javascript code:
var html = document.getElementById('FName').innerHTML;
if( html.search("Newfile.rtf") != -1) { /*found*/ }
else { /*not found*/ }
but what's the type of this element? if it's about an input text type .. you can't use innerHTML but you'll use value then.
Use innerText to get that
function Open() {
var cc = document.getElementById('FName');
if ('Newfile.rtf' == cc.innerText)
{
alert("New File");
} //close If NewFile.rtf
else {
//enter code here
alert("Not new file");
}
}
my javascript-
function validate_loginform(loginform)
{
var uid = loginform.uid.value;
var pass = loginform.pass.value;
if(uid == "")
{
color('uid');
return false;
}
if(pass == 0)
{
color('pass');
return false;
}
return true;
}
function color(traget)
{
var targetbox = document.getElementById(target);
targetbox.style.backgroundColor="red";
}
but background color is not getting changed even it is not returning fasle value. if I remove the color('uid'); nad put alert("user name required"); then this script is working fine.Whats wrong?
it backgroundColor in actual program I just missed it here only
With jQuery you could try this:
$("#textbox").css("background-color", "red");
dont call color function, change color inside if condition like-
if(uid == "")
{
//alert("You must enter User ID.","error");
loginform.uid.style.borderColor='red';
loginform.uid.focus();
return false;
}
Typo?
backgroungColor
^
Update
Typo?
function color(traget)
^^^^^^
{
var targetbox = document.getElementById(target);
Seriously, actual code does matter.
Beware your spelling. It should be "target", not "traget".
function color(traget)
You've spelt target wrong in your function header and background wrong in the last line of the function.
just remove the single quote (') from color('uid')
and write it as color(uid);
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";
}