Question
JavaScript / HTML - At the end of your web page, add a paragraph element titled Testing truthy and falsy - Create two input elements
JavaScript / HTML
- At the end of your web page, add a paragraph element titled "Testing truthy and falsy"
- Create two input elements labeled "Number Value 1" and "String Value 2"
- Give them the HTML attributes of id="value1" and id="value2".
- Both input elements should have type="number"
- Create a button element with the text "Not Strict" with id="testNotStrictButton"
- Create a button element with the text "Strict" with id="testStrictButton"
- Create a paragraph element with id="result"
- Include an embedded script at the bottom of the HTML page (use an embedded script for this exercise vs. an external script just for convenience sake). The script should do the following two functions, the first using an if-then construct and the second using a switch construct....
Function #1: testNotStrict
- create a function named testNotStrict
- within testNotStrict declare two variables to get the values of the two input boxes. (Hint: Use the value property to grab the value from an HTML input element.) NOTE: from a JavaScript perspective, it doesn't matter what type an input element has been declared in the HTML. The type attribute value changes the presentation of the input box to the user to limit the input to a number, date, valid email, so forth on the web page, but that's where the impact of the type attribute stops. Regardless of the input's type, the actual data in the input box is always passed to JavaScript as textual (string) data. This means that in order for JavaScript to evaluate the number in id="value1" as a number, it will need to be converted to a number in JavaScript. Use the parseInt() function to convert the value of id="value1" to a number in JavaScript.
- console.log the values of your two variables
- within testNotStrict compare the values from the two input boxes (now captured in your variables) using an if else construct and a not strict equality == comparison.
- display "Truthy" or "Falsy" in the paragraph with id="result" based on the comparison of the two values
- run testNotStrict from an event listener attached to the click event of the id="testNotStrictButton" button
Function #2: testStrict
- copy testNotStrict and paste it as a new function named testStrict
- delete the if else structure and code the same functionality back into the testStrict function using a switch construct with cases for true, false, and default. This time, test for strict equality === comparison and run case: true or case: false based on that strict comparison.
- test, debug these conditions...
- 0 and 0 -- Not Strict comparison is truthy; Strict comparison is Falsy
- 0 and nothing -- Not Strict comparison is truthy; Strict comparison is Falsy
- display "Truthy" or "Falsy" in the paragraph with id="result" based on the comparison of the two values
- run testStrict from an event listener attached to the click event of id="testStrictButton"
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started