Javascript: Den ausgewählten Wert aus der Dropdown-Liste abrufen und die Endzeit basierend auf Startzeit und Intervall berechnen

Dennis

Lage:

Ich baue einen Javascript-Code, der die Endzeit basierend auf der Startzeit der Benutzereingabe (in einem Eingabefeld) und dem vom Benutzer ausgewählten Intervall im Dropdown-Menü berechnen kann. Bisher kann es automatisch die im Eingabefeld ("start") eingegebene Startzeit abrufen. Auch wenn der Benutzer eine neue Startzeit eingegeben hat, wird diese gleichzeitig aktualisiert.

Probleme:

  1. Es kann den ausgewählten Intervallwert aus dem Dropdown-Menü nicht abrufen und zeigt nur "NaN:NaN AM" an. Ich habe versucht, den Code von var timeChange = intervaltime.text;auf zu ändern , var timeChange = intervaltime.options[intervaltime.selectedIndex].text;aber es ist immer noch nicht erfolgreich. Wie kann es den ausgewählten Wert aus "Intervall" abrufen?

  2. Obwohl es die Endzeit anzeigen kann, indem man von intervaltime.textauf ändert , intervaltime.valueist die berechnete Endzeit völlig falsch. Schlimmer noch, wenn ich immer wieder eine neue Startzeit eingebe, ist die neue Endzeit unlogisch. Ich habe keine Ahnung, warum es falsch berechnet wurde.

Darf ich wissen, was mit meinem Code nicht stimmt? Danke!

Link (wie der folgende Code): https://jsfiddle.net/TKPSSS/jxp9uybt/

Code

HTML-Code:

<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;
  }
}
Shine J

Benutze das: 

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>

Verwandte Artikel