Reputation: 53

Oninput/Onchange not activating function

I am building an app that calculates the difference in days. There are several options for dates that may or may not be used. Because of this, I am building a switch/case logic flow to calculate different variable combinations. Everything works EXCEPT I cannot seems to get function add_sd() and add_td() to update their respective variables (using either onchange or oninput) and pass to the switch case. If I hard code "2" into date_list the expected output (difference in days) is produced in the Number of days box. As is, nothing appears in the Number of Days box. The relevant portions of the abbreviated code is below:

Code

<html>
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

        <script type="text/javascript">

        function calcBusinessDays(d1, d2) { 
            var one_day=1000*60*60*24;
            var d1_days = parseInt(d1.getTime()/one_day) - 1;
            var d2_days = parseInt(d2.getTime()/one_day);
            var days = (d2_days - d1_days);
            var weeks = (d2_days - d1_days) / 7;
            var day1 = d1.getDay();
            var day2 = d2.getDay();
            if (day1 == 0) {
                days--;
            } else if (day1 == 6) {
                days-=2;
            }
            if (day2 == 0) {
                days-=2;
            } else if (day2 == 6) {
                days--;
            }
            days -= parseInt(weeks) * 2;
            return days;
            }

        var add_sd_var=0;
        var add_td_var=0;
        function add_sd(){
            add_sd_var = 1;
            return add_sd_var;
            }

        function add_td(){
            var add_td_var = 1;
            return add_td_var;
            }

        var date_list; 

        function GetDays(){
                var days_left = 7;
                var num_day, num_day2 = 0;

                var start_date = new Date(document.getElementById("start_date").value);
                var today_date = new Date(document.getElementById("today_date").value);

                date_list = add_sd_var + add_td_var;

                switch(date_list){
                    case 2:
                    num_day = calcBusinessDays(start_date, today_date);
                    num_day2 = days_left - num_day;  
                    document.getElementById("numdays2").value = num_day2;  
                    break;
                }             
                }  
    </script>
    </head>
    <body>
    <p>
    <Fieldset>
    <label class="form">Received by Client Date:</label><input type="date" class="textbox" id="start_date" name="start_date" onchange="add_sd()"/> <br></br>

    <label class="form">Today's Date:</label><input type="date" class="textbox" id="today_date" name="today_date" onchange="add_td()"/> <br></br>

    <label for="numdays2", class="form">Number of days:</label><input type="text" class="textbox" id="numdays2" name="numdays2"/> <br></br>

    <button id="enter" type="button" onclick="GetDays()">Enter</button>

    </Fieldset>
    </p>

</body>

Upvotes: 0

Answers (1)

Rachel Gallen

Reputation: 28563

The main issue seems to be that you are re-declaring add_td_var within your function, when it has already been declared outside the function. I amended this and also removed some invalid html breaks - </br>. In html 4 the break was <br/> (slash after), but in html5 it's just <br>, and it doesn't need a close tag. If you want another break, just add another <br>. In the below code (extra head/meta etc removed), the number of days appears in the box on button click.

Hope this helps

<script type="text/javascript">
  function calcBusinessDays(d1, d2) {
    var one_day = 1000 * 60 * 60 * 24;
    var d1_days = parseInt(d1.getTime() / one_day) - 1;
    var d2_days = parseInt(d2.getTime() / one_day);
    var days = (d2_days - d1_days);
    var weeks = (d2_days - d1_days) / 7;
    var day1 = d1.getDay();
    var day2 = d2.getDay();
    if (day1 == 0) {
      days--;
    } else if (day1 == 6) {
      days -= 2;
    }
    if (day2 == 0) {
      days -= 2;
    } else if (day2 == 6) {
      days--;
    }
    days -= parseInt(weeks) * 2;
    return days;
  }

  var add_sd_var = 0;
  var add_td_var = 0;

  function add_sd() {
    add_sd_var = 1;
    return add_sd_var;
  }

  function add_td() {
    add_td_var = 1;
    return add_td_var;
  }

  var date_list;

  function GetDays() {
    var days_left = 7;
    var num_day, num_day2 = 0;

    var start_date = new Date(document.getElementById("start_date").value);
    var today_date = new Date(document.getElementById("today_date").value);

    date_list = add_sd_var + add_td_var;

    switch (date_list) {
      case 2:
       //console.log("Date list: " + add_sd_var + " " +add_td_var);
        num_day = calcBusinessDays(start_date, today_date);
        num_day2 = days_left - num_day;
        document.getElementById("numdays2").value = num_day2;
        break;
    }
  }
</script>

<p>
  <Fieldset>
    <label class="form">Received by Client Date:</label><input type="date" class="textbox" id="start_date" name="start_date" onchange="add_sd()" /> <br>

    <label class="form">Today's Date:</label><input type="date" class="textbox" id="today_date" name="today_date" onchange="add_td()" /> <br>

    <label for="numdays2" , class="form">Number of days:</label><input type="text" class="textbox" id="numdays2" name="numdays2" /> <br>

    <button id="enter" type="button" onclick="GetDays()">Enter</button>

  </Fieldset>
</p>

Upvotes: 1

Oninput/Onchange not activating function

Answers (1)

Related Questions