Jump to content
Larry Ullman's Book Forums

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.

 

 

 

 

 

 

 

Link to comment
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.

Link to comment
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.

Link to comment
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.

Link to comment
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!

Link to comment
Share on other sites

 Share

×
×
  • Create New...