0

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.

enter image description here

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?

Somenath Choudhury
  • 172
  • 2
  • 11
  • 1
    You are creating the element *inside* the input element not after it. – Sani Huttunen Mar 22 '22 at 13:32
  • @SaniSinghHuttunen problem solved. Thanks for helping me out – Somenath Choudhury Mar 22 '22 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 Mar 22 '22 at 13:37

2 Answers2

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;
    }
});
little-fat
  • 21
  • 4
0

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>
Jeff
  • 115
  • 7