JavaScript，document.getElementById 不是从表单中获取的吗？

Question

我正在尝试创建一个日期时间本地输入，该输入将提交到一个函数中，该函数稍后会将其转换为不同的类型。我一直在尝试检查我正在使用的功能是否通过将其放入警报中来接收用户输入，但是每次我收到警报时，都不会显示信息，并在其位置显示“[object HTMLInputElement]”。很明显，如果我的错误测试甚至不能正常工作，我一定是做错了什么

下面是我的表格和我的脚本。

<form>
    Start Time:
    <input type="datetime-local" id="start">
    End Time:
    <input type="datetime-local" id="end">
    <input type="submit" value="Send" onclick="convert()">
</form>

<script>
    function convert() {
        var sd = new Date();   //start date
        var sds = new String();
        var ed = new Date();   //end date
        var eds = new String();
        var sd = document.getElementById("start");
        alert(sd);
        var sds = document.getElementById("end");
            alert(sds);
        }
</script>

有什么明显的突出之处吗？

Answer 1

只需调用 getElementById 即可返回一个 HTMLInputElement 对象。要获取它的值，需要调用.value

var sd = document.getElementById("start").value;

和

var sds = document.getElementById("end").value;

您还声明了变量 sd 两次。只需要一次。这增加了代码库并使事情变得不那么干燥。另外，不要像这样初始化一个新字符串

var eds = new String();

改为这样做

var eds = "";

我更新并改进了您的代码。

var startValue = document.getElementById("start-value");
var endValue = document.getElementById("end-value");

function convert() {
    var sd = new Date();   // start date
    var ed = new Date();   // end date
    var eds = new String();
    var sd = document.getElementById("start").value;
    startValue.innerHTML = sd;
    var sds = document.getElementById("end").value;
    endValue.innerHTML = sds;
}

<form>
    Start Time:
    <input type="datetime-local" id="start">
    End Time:
    <input type="datetime-local" id="end">
    <input type="submit" value="Send" onclick="convert()">
</form>

<p id="start-value"></p>
<p id="end-value"></p>