截取的代码在 JSFiddle 中运行，但不在我的 IDE 中运行(增加 30 分钟的时间)

关于在输入字段中输入时间添加 30 分钟的代码在 jsfiddle 中有效，但在我的 IDE 中不起作用。我创建了一个新的测试.php html表单的位置和一个新脚本.js js的位置。

在我的测试中.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>

在我的脚本中.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}`;
});

两个文件的方向相同。知道吗？

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

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

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

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

代码不起作用的原因是脚本在浏览器解析 DOM(HTML(之前被执行，使得元素在脚本执行时不可用于查询。

为了确保代码仅在解析 DOM 后执行，您有三个选择：

在 </body> 之前包含代码，
将其包含在您想要的任何位置(通常在head中(，并带有defer属性
```
<script src="./path/to/script.js" defer></script>
```

将代码包装在

document.addEventListener('DOMContentLoaded', function() { /* your code */ });

如果要延迟代码执行，直到所有静态资源(如图像、字体等(都已完全加载，请将 DOMContentLoaded 替换为 load 事件：

document.addEventListener('load', function() { /* your code */ });

有三种不同的方法可以包含脚本代码： 1. 带有 SRC 路径的脚本标签(外部 JavaScript( 2. 脚本代码之前 3. 将代码包装在 document.addEventListener('DOMContentLoaded'， function(( {/* your code */}(;

尝试在正文标签后包含script.js。

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
   <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>
</body>
    <script>
        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}`;
        });
</script>
</html>

相关内容

最新更新

热门标签：