JavaScript新手开发任务看板遇问题：内容不显示、表单校验失效

问题描述 #

我是JavaScript新手，正在开发一款任务看板，需求是用户输入任务内容、日期和时间，提交后这些信息需显示在图片内。目前点击“Submit”按钮可显示图片，但存在两个问题：

• 任务文本、日期和时间未显示在图片内，页面显示“[object HTMLInputElement]”；
• HTML中已为输入框设置required属性，但点击Submit时表单仍直接提交，未触发必填校验。

现有代码 #

JavaScript代码

function dd(x) {
    return document.getElementById(x);
}

let output = "";
function addTask() {
    output = `<div><img src="/assets/images/notebg.png" alt="Sticky Note"></div>`
    let mainDiv = dd("main-page").innerHTML += output
}

HTML代码

<main id="main-page">
<div class="myForm">
    <form>
        <input type="text" id="task" class="inputs" placeholder="Enter your task here" required>
        <br>
        <input type="date" id="date" class="inputs" placeholder="Enter the date here" required>
        <br>
        <input type="time" id="time" class="inputs" placeholder="Enter the time here" required>
        <br>
        <input class="btn btn-primary" type="submit" value="Submit" onclick="addTask()">
        <input class="btn btn-warning" type="reset" value="Reset">
    </form>
</div>
</main>
<div class="my-notes" id="myNotes">
    <p id="newNotes"></p>
</div>

解决方案 #

1. 修复表单必填校验失效问题 #

表单默认点击submit按钮会直接跳转提交，导致required校验被跳过。需要：

• 在addTask函数里接收事件参数，调用event.preventDefault()阻止默认提交行为；
• HTML的onclick事件里传入event对象。

2. 修复任务信息无法显示在图片内的问题 #

当前代码没获取输入框的实际内容，需要先读取task、date、time的value值，再把内容插入到图片所在的容器中（用绝对定位让文字叠加在图片上）。

修改后的完整代码 #

JavaScript代码

function dd(x) {
    return document.getElementById(x);
}

function addTask(event) {
    // 阻止表单默认提交，触发required校验
    event.preventDefault();
    
    // 获取输入框的实际内容
    const taskContent = dd("task").value;
    const taskDate = dd("date").value;
    const taskTime = dd("time").value;
    
    // 生成带任务信息的DOM结构，让文字叠加在图片上
    const output = `
        <div style="position: relative; display: inline-block; margin: 10px;">
            <img src="/assets/images/notebg.png" alt="Sticky Note">
            <div style="position: absolute; top: 20px; left: 20px; right: 20px; font-size: 14px; color: #333;">
                <p><strong>任务:</strong> ${taskContent}</p>
                <p><strong>日期:</strong> ${taskDate}</p>
                <p><strong>时间:</strong> ${taskTime}</p>
            </div>
        </div>
    `;
    // 将新任务添加到笔记容器，避免和表单区域混淆
    dd("myNotes").innerHTML += output;
    
    // 清空表单输入
    dd("task").value = "";
    dd("date").value = "";
    dd("time").value = "";
}

HTML代码

<main id="main-page">
    <div class="myForm">
        <form>
            <input type="text" id="task" class="inputs" placeholder="Enter your task here" required>
            <br>
            <input type="date" id="date" class="inputs" placeholder="Enter the date here" required>
            <br>
            <input type="time" id="time" class="inputs" placeholder="Enter the time here" required>
            <br>
            <!-- 传入event参数触发校验 -->
            <input class="btn btn-primary" type="submit" value="Submit" onclick="addTask(event)">
            <input class="btn btn-warning" type="reset" value="Reset">
        </form>
    </div>
</main>
<div class="my-notes" id="myNotes">
    <p id="newNotes"></p>
</div>

关键说明 #

• event.preventDefault()是核心，阻止表单默认提交后，浏览器才会先检查必填项是否填写；
• 必须用.value获取输入框的内容，之前的[object HTMLInputElement]是因为直接拼接了元素对象而非其值；
• 用绝对定位让文字叠加在图片上，实现“信息显示在图片内”的效果；
• 把新任务放在myNotes容器中，避免和表单区域混在一起。

内容的提问来源于stack exchange，提问作者Adam Adam