Challenges with the Task List Board

Question

Challenges with the Task List Board

I'm facing a bit of a challenge with this task. As a newcomer to JavaScript, I've set out on a quest to create a task list board where users can input tasks along with dates and times. The goal is for these entries to appear inside a photo using JavaScript upon submission. While I have successfully made the photo appear when clicking "Submit," I have encountered a couple of issues:

Unfortunately, the text, date, and time do not display correctly inside the photo. Instead, it shows as "[object HTMLInputElement]."
Even though I have marked the input fields for text, date, and time as "required" in the HTML, the form still submits without any validation occurring.

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
}

<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>

javascript html css function

Answer 1

Answer №1

Your current issue involves a combination of JavaScript and HTML form handling techniques. To address these issues effectively, follow these steps:

Prevent Default Form Submission Behavior: By default, clicking an input within a form will submit the form and reload the page. To prevent this behavior, adjust your addTask function to accept the event as a parameter and call event.preventDefault() within it.

Displaying Text, Date, and Time Inside the Photo: Ensure that you are fetching input values and integrating them into your output string when creating a div with an img tag.

Issue with " [object HTMLInputElement] ": This error occurs when attempting to concatenate an element object without accessing its value property. Make sure to access the value property of your input elements to resolve this issue.

JavaScript

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

function addTask(event) {
    event.preventDefault(); // Prevent default form submission

    // Retrieve input values
    const taskValue = dd("task").value;
    const dateValue = dd("date").value;
    const timeValue = dd("time").value;

    // Create output string with task, date, and time
    output = `<div><img src="/assets/images/notebg.png" alt="Sticky Note"><p>${taskValue}</p><p>${dateValue}</p><p>${timeValue}</p></div>`;

    // Append new content
    let mainDiv = dd("main-page");
    mainDiv.innerHTML += output;
}

HTML

To handle form submission more effectively in JavaScript, change the onclick attribute of your submit button to include a return statement and set its type to button. Add an id to your submit button for the event listener:

<input class="btn btn-primary" type="button" id="submitButton" value="Submit">

You can also leave the type as "submit" and handle form submission directly in JavaScript, but changing it to button simplifies things for this example. Ensure to correctly attach your event listener in the JavaScript file:

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('submitButton').addEventListener('click', addTask);
});

Answer 2

Your current issue involves a combination of JavaScript and HTML form handling techniques. To address these issues effectively, follow these steps:

Prevent Default Form Submission Behavior: By default, clicking an input within a form will submit the form and reload the page. To prevent this behavior, adjust your addTask function to accept the event as a parameter and call event.preventDefault() within it.

Displaying Text, Date, and Time Inside the Photo: Ensure that you are fetching input values and integrating them into your output string when creating a div with an img tag.

Issue with " [object HTMLInputElement] ": This error occurs when attempting to concatenate an element object without accessing its value property. Make sure to access the value property of your input elements to resolve this issue.

JavaScript

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

function addTask(event) {
    event.preventDefault(); // Prevent default form submission

    // Retrieve input values
    const taskValue = dd("task").value;
    const dateValue = dd("date").value;
    const timeValue = dd("time").value;

    // Create output string with task, date, and time
    output = `<div><img src="/assets/images/notebg.png" alt="Sticky Note"><p>${taskValue}</p><p>${dateValue}</p><p>${timeValue}</p></div>`;

    // Append new content
    let mainDiv = dd("main-page");
    mainDiv.innerHTML += output;
}

HTML

To handle form submission more effectively in JavaScript, change the onclick attribute of your submit button to include a return statement and set its type to button. Add an id to your submit button for the event listener:

<input class="btn btn-primary" type="button" id="submitButton" value="Submit">

You can also leave the type as "submit" and handle form submission directly in JavaScript, but changing it to button simplifies things for this example. Ensure to correctly attach your event listener in the JavaScript file:

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('submitButton').addEventListener('click', addTask);
});

Challenges with the Task List Board

Answer №1

Similar questions

The module specifier "tslib" could not be resolved due to a TypeError. It is necessary for relative references to begin with either "/", "./", or "../"

transferring data from an express server to a JavaScript script in a jade template

Ensure the content spans the full width of the container without displaying an overflow scrollbar by using the "position: absolute

Is it possible to dynamically load a CSS link using jQuery in a unique way? Perhaps through the use of $.ajax or another method?

Best practices for displaying a Multidimensional JSON Object using JavaScript

Triggering AJAX call from several buttons within a single page in Django

Seamless creation of numerous SystemJS/JSPM modules

The issue of React hover style malfunctioning in conjunction with Radium and Material-UI

Marionette's Take on the Undead: Zombie Perspectives

Tips for keeping two divs aligned horizontally on a webpage

Achieving dynamic page number display in relation to Pagination in ReactJS

Essential Understanding of HTML Query Strings Required

Implementing RXJS subscription using a Subject object

What is the best way to extract specific values from a JSON array of objects using JavaScript?

Issues with Carousel Plugin Functionality

I want to know the process of increasing the id name of a div and the name of the content stored

Social Count Total Using AddThis HTML Plugin

Ensure that the submit button triggers the display of results with each click

Restricting the number of rows in each div in a JSP data table

What is the best way to upload this file in VueJS?