dcsimg
www.webdeveloper.com
Results 1 to 9 of 9

Thread: Struggling with writing Javascript if/else statement

  1. #1
    Join Date
    May 2017
    Posts
    4

    Question Struggling with writing Javascript if/else statement

    So I am a complete beginner at Javascript and I am quite struggling with one of my coursework. I need to write a function which would count the total cost of dress hire taking into account a dress type, cost per day and number of days. I had to use radio buttons for the selection of dress type while days will be entered by someone who will use the website. I've started writing a function but it would be great if you could tell me if I'm going to the right direction.

    <script language="javascript">
    function calculate(){
    var price, days;
    var days = getField("days").value;
    document
    if(document.myform.dresstype[0].checked == true)
    price = 60 + (15*days);
    else if (document.myform.dresstype[1].checked == true)
    price = 90 + (30*days);
    else if (document.myform.dresstype[2].checked == true)
    price = 120+ (40*days);
    else price = 0;
    }


    </script>


    Thanks!

  2. #2
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,889
    Welcome to the forums...

    Couple of questions.

    1. What does your function 'getfield()' look like?
    2. Can you provide the HTML for the elements that the function is supposed to calculate on?

    Note:
    1. There is no reason to include the language='javascript' in the <script> tag.
    2. You should enclose you code between [ code] and [ /code] or [ php] and [ /php] tags
    without the spaces to make it easier to see, copy, debug your code.
    3. There is an orphaned 'document' statement in the middle of your function.
    4. Can use the error console to see the obvious errors.

  3. #3
    Join Date
    May 2017
    Posts
    4
    I think soon I won't be that welcome I am really confused about all of that.. So please bear with me.

    Code:
    <script>
    function calculate(){
    var price, days;
    var days = getField("days").value;
    if(document.myform.dresstype[0].checked == true)
    price = 60 + (15*days);
    else if (document.myform.dresstype[1].checked == true)
    price = 90 + (30*days);
    else if (document.myform.dresstype[2].checked == true)
    price = 120+ (40*days);
    else price = 0;
    }
    </script>
    I hope it's everything you asked for.
    Code:
    <form name = "myform">
    Name:<br>
    <input name = "name" type = "text"> <br>
    Surname:<br>
    <input name = "surname" type = "text">
    <br>
    Number:<br>
    <input name = "number" type="number">
    <p>Gown type:<br>
      <label>
        <input type="radio" name="dresstype" value="radio" id="dresstype_0">
        Graduate (cost per day 50, any extra day 10)</label>
      <br>
      <label>
        <input type="radio" name="dresstype" value="radio" id="dresstype_1">
        Postgraduate(cost per day 70, any extra day 15)</label>
      <br>
      <label>
        <input type="radio" name="dresstype" value="radio" id="dresstype_2">
        PhD (cost per day 90, any extra day 20)</label>
      <br>
      <br>
    Days of hire:<br>
    <input name = "days" type = "number" min="0" id="days"><br>
    
    </p>

  4. #4
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    558
    Two questions:
    1) What starts the calculate function?
    2) Where do you display price?

  5. #5
    Join Date
    May 2017
    Posts
    4
    Okay, so here we go. I thought I display price in the function? or do I need to incorporate it somehow in radio buttons as well? If I'm not wrong in the example I was shown it was in function, so I tried to recreate it. and what starts the function, I have a submit button.
    Code:
    <input type = "button" value = "Submit"
     onclick = 'alert(myform.name.value +", you click submit!"+ myform.name.price)'>
    Now, I'm sure that my.form.price is incorrect because I don't have price there..

  6. #6
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    558
    How about onclick="calculate()" instead? I see no need for the field "number" unless you have been told it will be used later down the road.
    Also, you need to add a new field in your form named "price". The last thing your function should do is properly round "price" and move the formatted price to the .value part of your new field. Don't keep its value secret.

    Same question as JMRKER: What does getField() look like? Similar to (or containing) getElementById?

  7. #7
    Join Date
    May 2016
    Location
    Southern California
    Posts
    81
    You are going in the right direction. You just need to add and adjust a few things.

    Your declaring days as a variable twice, remove the var in front of the second days.

    You're not getting the price because getField("days") does nothing, getField is undefined. Assuming your trying to get the input element's value by id:
    HTML Code:
    <script>
    // change
    var days = getField("days").value;
    
    // to:
    days = document.getElementById("days").value; // this gets you the input value
    </script>
    So your function works when i tested it.
    If you want the user to see the price total. You need to add a dom element somewhere on your page to display the price total text.
    Example:
    HTML Code:
    Price Total: &pound; <span id="total">0</span>
    Within your function, you would assign a new variable for the total, grab the page element, in this case, the span id, and change its innerHTML to the price. Also you may want to format the price value, as mentioned before by wbport.

    SIDE NOTE: Notice how I'm using &pound; instead of . You should be using the equivalent html entity of the pound symbol in your html, instead of typing pound key on your keyboard, for international compatibility. Or use a css font icon, like with font-awesome.

  8. #8
    Join Date
    May 2017
    Posts
    4
    Hey guys!!

    I finally managed to do it, quite a relief
    Anyway, Zorg you were totally right, I added
    Code:
    days = parseFloat(document.myform.days.value)
    //plus this line
    window.alert("Hello " + myform.name.value + ", the total cost of gown hire is " + price); 
    }
    And as wbport said onclick="calculate()";
    And it works all fine. So thank you!

  9. #9
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    558
    Glad to hear it's up and running. One last thing: save the alert function for when something goes wrong like isNaN, data missing, or data out of range--don't use it when things go right. On this page, only missing data or garbage in the Salary/Pension field will cause an alert. Cntl/U on many browers displays source.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles