Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialgnomephone
3,399 Pointsfield.value vs. field - for determining boolean value.
In this example, I'm curious why in the first conditional statement we determine the boolean value of the field
variable using field.value
if(!field.value){return true; else{return false}
Then, later access the boolean value of fieldTest
without including the .value
if(fieldTest){alert("please provide your information");
?????
As far as I can tell, both field
and fieldTest
variable declarations are constants. I tired removing the .value
from (!field.value)
and it definitely broke the code π.
Still a little unclear about booleans and how to access them. This example made it a little more confusing.
THEREFORE, a learning opportunity. Any help SUPER appreciated.
Here's the whole code for reference:
function isFieldEmpty() {
const field = document.querySelector('#info');
if (!field.value) {
return true;
} else {
return false;
}
}
const fieldTest = isFieldEmpty();
if (fieldTest) {
alert('Please provide your information.');
}
2 Answers
jb30
44,806 PointsIf field
refers to an html input element such as <input id="info" type="text">
, then field.value
is the text displayed on the webpage inside the input element. If there is text in the input element, field.value
will be the text in the input element as a string. If there is no text in the input element, field.value
will be an empty string.
In Javascript, a string with any content in it, even white space, is truthy, and a string with no content is falsey, so field.value
will be truthy if there is text in the input element and falsey if the input element is empty.
Since field
is document.querySelector('#info');
, field
will be truthy if the html has an element with the id info
and falsey if there are no elements with the id info
in the html.
fieldTest
is a boolean, and is either true
or false
, depending on the result of isFieldEmpty()
.
gnomephone
3,399 PointsGotcha, better grasping it now jb30 . Thanks for further clarification.
gnomephone
3,399 Pointsgnomephone
3,399 Pointsthanks for hitting me back jb30 ! Appreciate you taking the time.
I think I understand...Up to this point in the learning track, there's only been mention of truthy and falseyβnot much depth yet, perhaps more detail in upcoming segments. AS such, the topic is still a bit fuzzy for me.
To further clarify if I'm understanding you correctly, granted some of these statements could be assumptions on my part, I do a bit of reaching at the end, just trying to piece it together:
Essentially, what you're saying is that the
field
variable isn't inherently a Boolean because its value is dependent on the user input value in the <html> element attached tofield
, that beingid=info
. This makes thefield
variable truthy -or- falsey.Therefore, we've written a conditional to determine the precise value BUT in order to determine that value we must tell JavaScript to access the
.property/attribute
(not sure if I'm using the correct term here) attached tofield
(that being the input ofid=info
) which is accessed through the DOM.In contrast, the
fieldTest
value is set up differently because it is set within the JavaScript file without having to access the HTML doc. ASSUMING both the function and variables are invoked,fieldTest
invokes theisFieldEmpty
function, when the function runs it triggersfield
to return a Boolean. AS such the value offieldTest
will be a Boolean.jb30
44,806 Pointsjb30
44,806 PointsNeither
field
norfield.value
are inherently booleans.field
is an object andfield.value
is a string, so they are either truthy or falsey.field
has other properties that are booleans, such asautofocus
,disabled
,hidden
, andrequired
.The conditional determines the truthiness of the
value
property offield
.fieldTest
is the boolean returned fromisFieldEmpty()
.is equivalent to
which is either
or
If instead
fieldTest
was an object defined asconst fieldTest = { value: isFieldEmpty() };
, then its propertyvalue
would be accessed usingfieldTest.value
.