时间戳

首页 > 解决方案 > 代码片段在 JSFiddle 中运行，但不在我的 IDE 中（增加 30 分钟）？

javascript - 代码片段在 JSFiddle 中运行，但不在我的 IDE 中（增加 30 分钟）？

问题描述

关于在输入字段中输入时间增加 30 分钟的代码在 jsfiddle 中有效，但在我的 IDE 中无效。我在 html 表单所在的位置创建了一个新的 test.php，在 js 所在的位置创建了一个新的 script.js。

在我的 test.php 文件中：

<html>
<script src="script.js"></script>

<form>
    <input type="time" name="zeitstart" class="zeitangaben" id="start"><br>

    <input type="time" name="zeitende" id="ende" class="ende">

    <input type="submit" value="senden">
</form>

</html>

在我的 script.js 文件中：

// Element per ID abrufen
const start = document.getElementById('start');
const end = document.getElementById('ende');
// EventListener hinzufügen
start.addEventListener('change', () => {
    // Stunden &  Minuten als INT
    let hours = parseInt(start.value.split(':')[0]);
    let minutes = parseInt(start.value.split(':')[1]);
    // 30 Min hinzufügen
    minutes += 30;
    // Wenn eine volle Stunde überschritten ist, soll die nächste anfangen
    // Wenn 24 Std um sind, von vorne anfangen (nächster Tag)
    if (minutes >= 60) {
        hours = (hours + 1) % 24;
        minutes -= 60;
    }
    // Zeichenfolge mit einer festen länge von 2 formatieren
    hours = (hours < 10 ? `0${hours}` : `${hours}`);
    minutes = (minutes < 10 ? `0${minutes}` : `${minutes}`);
    // const end den neuen Wert zuweisen
    end.value = `${hours}:${minutes}`;
});

两个文件的方向相同。任何想法？

标签： javascript

解决方案

您的代码在加载 DOM 之前执行。最简单的解决方案是将脚本标签移动到 HTML 文件的末尾。

或者，您可以在加载窗口时添加事件侦听器。 https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

window.addEventListener('load', function handler() {
    // your code
});

这在 jsFiddle 上起作用的原因是 javascript 文件和 HTML 文件之间的绑定是由它们完成的（以正确的顺序）。

推荐阅读