Unable to display the error message right below the input field in javascript

Question

I am creating a very basic todo application. My goal is to display an error message Please enter an input If the user press the 'add todo' button without entering any input. Now, when I am pressing the 'add todo' button without entering any input, then I am unable to see the error message but when I am inspecting, then, I can see the error message has been successfully added below the input field.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <p id="inp"><input type="text" name="inputText" id="userInput" /></p>
      <p id="add"><button class="addbtn">Add Todo</button></p>
      <p id="del"><button class="deletebtn">Delete Todo</button></p>
    </div>
    <script src="index.js"></script>
  </body>
</html>

index.js

const addButton = document.querySelector('.addbtn');
const userInput = document.querySelector('#userInput');

addButton.addEventListener('click', (e) => {
    e.preventDefault();
    const uinput = userInput.value;

    if(uinput === '') {
        const p = document.createElement('p');
        const message = document.createTextNode('Please enter an input');
        p.appendChild(message);
        userInput.appendChild(p);
    } else {
        return;
    }
});

Can anyone please tell me how can I solve this error and display the error message on the browser right below the input field please?

You are creating the element inside the input element not after it. — Sani Huttunen
– Sani Huttunen, Commented Mar 22, 2022 at 13:32
@SaniSinghHuttunen problem solved. Thanks for helping me out — Somenath Choudhury
– Somenath Choudhury, Commented Mar 22, 2022 at 13:34
You're also appending the node to the element, so that means every time a user clicks on the add todo with an empty input, you will get a new node with the same text... You can try a new approach where you can have an empty paragraph that you update the text with the appropriate value based on the event that has happened — Cypherjac
– Cypherjac, Commented Mar 22, 2022 at 13:37

little-fat · Accepted Answer · 2022-03-22 13:37:00Z

2

<input> object cannot contain HTML (What is innerHTML on input elements?)

You need to create the new <p> to the parent <p> (#inp)

index.js:

const addButton = document.querySelector('.addbtn');
const userInput = document.querySelector('#userInput');
const inputDiv = document.querySelector('#inp');

addButton.addEventListener('click', (e) => {
    e.preventDefault();
    const uinput = userInput.value;

    if(uinput === '') {
        const p = document.createElement('p');
        const message = document.createTextNode('Please enter an input');
        p.appendChild(message);
        inputDiv.appendChild(p);
    } else {
        return;
    }
});

answered Mar 22, 2022 at 13:37

little-fat

214 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeff · Accepted Answer · 2022-03-22 13:53:59Z

I would do it like this:

<p id="inp"><input type="text" name="inputText" id="userInput" /></p>
//add a dev to show your error message.
 <div class="errorMessage">
 <p class="text-danger"></p>
 </div>
 //your script should be something like this
 
 <script>
 function checkValue() {
 var userInput = document.getElementById("#userInput").val;
 if(userInput == ''){
 $('.errorMessage').text('Please enter an input');
 document.getElementById("inp").required = true;
 document.getElementsByClassName("errorMessage")[0].style.display = 
 "block";
 }
 else{
 $('.errorMessage').text(' ');
 document.getElementById("inp").required = false;
 document.getElementsByClassName("errorMessage")[0].style.display = 
 "none";
}
 }
$('#add').click(checkValue)
 </script>

Collectives™ on Stack Overflow

Unable to display the error message right below the input field in javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related