Javascript: получение выбранного значения из раскрывающегося списка и вычисление времени окончания на основе времени начала и интервала

Question

Ситуация:

Я создаю код Javascript, который может рассчитывать время окончания на основе начального времени, введенного пользователем (в поле ввода), и выбранного пользователем интервала в раскрывающемся меню. До сих пор он может автоматически получать начальное время, которое вводится в поле ввода («начало»). Даже если пользователь ввел новое время запуска, оно также будет обновляться в то же время.

Проблемы:

1. Невозможно получить значение выбранного интервала из раскрывающегося меню и он показывает только «NaN: NaN AM». Я пытался изменить код с var timeChange = intervaltime.text; до var timeChange = intervaltime.options[intervaltime.selectedIndex].text;, но все равно не удалось. Как заставить его получить выбранное значение из «интервала»?

2. Хотя он может показывать время окончания, меняя значение с intervaltime.text на intervaltime.value, рассчитанное время окончания совершенно неверно , Еще хуже, когда я продолжаю вводить новое время начала, новое время конца нелогично. Я понятия не имею, почему он рассчитал неправильно.

Могу ли я знать, что не так с моим кодом? Спасибо!

Ссылка (аналогично следующему коду): https://jsfiddle.net/TKPSSS/jxp9uybt/

Код

HTML:

<input name="start" id="start" type="text" onInput="Value()">
<select id="interval">
  <option value="0">--Select start time--</option>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="15">15</option>
  <option value="20">20</option>
  <option value="25">25</option>
  <option value="30">30</option>
  <option value="35">35</option>
  <option value="40">40</option>
  <option value="45">45</option>
  <option value="50">50</option>
  <option value="55">55</option>
  <option value="60">60</option>
</select>
<br />
<h1 id="showstart"></h1>
<h1 id="showend"></h1>

Javascript:

function Value() {
  var stime = document.getElementById("start");
  var startTime = stime.value;
  var time = new Date();
  var intervaltime = document.getElementById("interval");
  var timeChange = intervaltime.text;
  var startHour = startTime.split(':')[0];
  var startMin = startTime.split(':')[1].replace(/AM|PM/gi, '');

  time.setHours(parseInt(startHour));
  time.setMinutes(parseInt(startMin));

  $("#showstart").html(getFormattedTime(time));

  //adjusted time
  time.setMinutes(time.getMinutes() + timeChange);
  $("#showend").html(getFormattedTime(time));

  function getFormattedTime(time) {
    var postfix = "AM";
    var hour = time.getHours();
    var min = time.getMinutes();

    //format hours
    if (hour > 12) {
      hour = hour - 12;
      postfix = "PM";
    }

    //format minutes
    min = ('' + min).length > 1 ? min : '0' + min;
    return hour + ':' + min + ' ' + postfix;
  }
}

Answer 1

Используйте это:

function Value(){

    let startTime  = document.getElementById('start').value;
    let timeChange = parseInt(document.getElementById('interval').value);


    const time = validateTime(startTime);

    // Validating time
    if(time){

       const now = new Date();
       const newT = new Date();

       let hr = time.hrs;
       let mm = time.min;
       let amOrPm = time.aop;

       
       // showing time entered by user
       document.getElementById('showstart').textContent = `${ hr < 10? '0'+hr:hr}:${ mm < 10? '0'+mm:mm} ${amOrPm}`;

      
       // Converting to 24 hrs format
       if( hr === 12 && amOrPm === 'AM' ){
           hr = 0;
       }
       else if(amOrPm === 'PM' && hr < 12){
           hr += 12;
       }
      

       now.setHours(hr);
       now.setMinutes(mm + timeChange);
       now.setSeconds(0);

       hr = now.getHours();
       mm = now.getMinutes();


       // Converting back to 12 hours format
       if( hr === 0){
           hr = 12; 
           amOrPm = 'AM';
       }
       else if (hr === 12){
           amOrPm = 'PM';
       }
       else if (hr >= 13 && hr <= 23){
           hr -= 12;
           amOrPm = 'PM';
       }

       document.getElementById('showend').textContent = `${ hr < 10? '0'+hr:hr}:${ mm < 10? '0'+mm:mm} ${amOrPm}`;
    }

    else{
        showError();
    }

}

// validates time entered in 12hrs format
// and returns an object
function validateTime(time){

    const tString = time.match(/(\d{2}:\d{2})\s(AM|PM|am|pm){1}/);

    if(time!= "" && tString){
    
        hr = parseInt(tString[1].split(':')[0]);
        mm = parseInt(tString[1].split(':')[1]);
        amOrPm = tString[2].toUpperCase();
    
        if( (hr >=0 && hr <= 12) && (mm >= 0 && mm < 60) )
        {
            document.getElementById('start').style.background = "#b9ebcc";
            return {
                hrs: hr,
                min: mm,
                aop: amOrPm
            };
        }
        else{
            return false;
        }
    }
    else {
        return false;
    }
}

function showError(){
    document.getElementById('start').style.background = "#eb4559";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container, .time{
            margin: 20px;
        }
        .time{
            display: inline;            
        }
        input[type="text"]{
            padding: 6px;
            width: 60px;
            text-align: center;
        }
        #interval{
            padding: 6px;
            margin-left: 10px;
        }
    
    </style>
</head>
<body>

    <div class="container">
        <div class="time">
            <label for="start">Enter time (01:23 AM, 03:40 PM etc.)</label>
            <input name="start" id="start" type="text" oninput="Value()">
        </div>

        <div class="time">
            <label for="interval">Enter Interval</label>
            <select id="interval" onchange="Value()">
                <option value="0" selected disabled>Select start time</option>
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="15">15</option>
                <option value="20">20</option>
                <option value="25">25</option>
                <option value="30">30</option>
                <option value="35">35</option>
                <option value="40">40</option>
                <option value="45">45</option>
                <option value="50">50</option>
                <option value="55">55</option>
                <option value="60">60</option>
            </select>
        </div>
    </div>
    
    <div class="container">
        <div>
            <h1>Start Time: <span id="showstart"></span></h1>
        </div>
        <div>
            <h1>End Time:  <span id="showend"></span></h1>
        </div>
    </div>
    
  
    <script src="ans1.js"></script>
</body>
</html>