javascript - Oninput/Onchange 未激活功能

问题描述

我正在构建一个计算天数差异的应用程序。对于可能使用或不使用的日期，有几个选项。因此，我正在构建一个 switch/case 逻辑流来计算不同的变量组合。一切正常，除了我似乎无法让函数 add_sd() 和 add_td() 更新它们各自的变量（使用 onchange 或 oninput）并传递给 switch case。如果我将“2”硬编码到 date_list 中，则在“天数”框中会产生预期的输出（天数差异）。照原样，天数框中不显示任何内容。缩写代码的相关部分如下：

代码

<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>

标签： javascripthtml

解决方案

主要问题似乎是您add_td_var在函数内重新声明，而它已经在函数外声明。我对此进行了修改，还删除了一些无效的 html 中断 - </br>。在 html 4 中，break 是<br/>（斜线之后），但在 html5 中，它只是<br>，并且不需要关闭标记。如果您想要另一个休息，只需添加另一个<br>. 在下面的代码中（删除了额外的 head/meta 等），天数出现在按钮单击的框中。

希望这可以帮助

<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>

javascript - Oninput/Onchange 未激活功能

问题描述

解决方案

推荐阅读