Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
hugo

Pg 147: Years >0 Vs. Years.value>0

Recommended Posts

Hello fellow programmers:

 

I need help with Step #5 (page 147):

 

if (type && type.value && years && (years>0)) {

 

Question: When I replace years >0 with years.value >0, the program crashes--returns the please enter valid values message. Why doesn't this work?

 

FYI: Step #3:

var years = document.getElementById('years');

 

Thanks in advance.

 

 

 

 

 

 

 

Share this post


Link to post
Share on other sites

The reason why is because a new value is assigned to years after the var years = document.getElementById('years'); line.

 

To be honest, I think this code is a bit confusing, and I wish Larry had not written it this way, but you can see in #4 on page 147, if years and years.value are both set, then Larry takes the value assigned to years.value, turns it into an integer, and then reassigns that integer value back into years.

 

Because of this reassignment, years is no longer equal to a DOM reference, but is instead of the type Number, which does not have a value property.

 

I hope that explanation helps.

Share this post


Link to post
Share on other sites

I also wish to add that I changed the code to:

 

function calculate()
{
    'use strict';
    var cost;
    var type=document.getElementById('type');
    var years=document.getElementById('years');
 

    if(type && type.value && years && (years.value>0))
    {
        switch(type.value){
            case 'basic':
                cost=10.00;
                break;
            case 'premium':
                cost=15.00;
                break;
            case 'gold':
                cost=20.00;
                break;
            case 'platinum':
                cost=25.00;
                break;
            }
        
        cost *= years.value;
        
        if(years.value>1){
            cost*=0.80; //A 20% discount.
            }
   
    document.getElementById('cost').value='$'+ cost.toFixed(2);
    } else {
        document.getElementById('cost').value = 'Please enter valid values.';
            }
        return false;
}


function init(){
    'use strict';
    document.getElementById('memForm').onsubmit=calculate;
    }
    
window.onload=init;

 

Note: I took out the parseInt line of code in Step #4. And changed years to years.value in the rest of the code. As a result of these 2 changes to code works!

 

If I understand correctly, after using this line of code:

 var years=document.getElementById('years');

 

I am allowed to refer to  years (the object) and years.value (the value of the object). If I am wrong on this please let me know.

Share this post


Link to post
Share on other sites

After the getElementById line, years is a DOM object, which has a value property, yes, you are right about that.

 

However, I don't know if your code changes are an improvement because honestly, you should convert the string value of years.value to an integer before using it like a number.

Of course, cost *= years.value will implicitly use years.value as a number, but still, it will be best to be explicit about what you're doing.

 

Just my two cents though.

If your code works, then no need to complain.

Share this post


Link to post
Share on other sites

Hey Hartley, can you please help me understand why years.value is a string value?

 

I thought years.value is by default a number object because of this line of code in the html document:

 

<div>
<label for="years">Years</label>
<input type="number" name="years" id="years" min="1" required>
</div>

 

It says input type="number" which I have assumed the digits entered by the person filling the webform to be a number object. Why is this a string value? Can you refer me to further reading or help explain it?

 

I am new to programming so any explanation you are giving is very helpful. Thank you!

Share this post


Link to post
Share on other sites

It's a string because all HTML form elements technically return strings. Except, I guess, for the file input. 

Share this post


Link to post
Share on other sites

Yes, Larry is right. All form data is always passed as a string, regardless of the specified type for the input. A type of number for an input simply allows for more constrained input for browsers that support the type.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...