Question 45227 in Html Question posted in
Some basic documentation can be found here.

Trying to check for empty value in input – Html

I have an input box that changes another paragraph in my site with JavaScript. It works flawlessly, except for the fact that when I enter nothing in the input, it blanks out the paragraph.

I don’t want this to happen. I’ve tried almost every piece of code I’ve found online to fix this issue but nothing has worked.

<div class="tasklist">
   <p id="task1" style="color:#d3d3a3">You don't have any tasks.</p>
</div><br>
<script>
  const element = document.getElementById("task1");
  var task = document.input["task"].value;
  function getInputValue() {
    let value = document.getElementById("task").value;
    element.innerHTML = (value);
    document.getElementById("task1").style.color = "white";
  }
</script>
Enter a task:<br>
<input type="text" id="task" name="task" placeholder="Pay Bills">
<button onclick="getInputValue();" onclick="changeColor()">+ Add</button>
Tags:

2

Answers


  1. 0

    First of all add value checker – it will prevent from setting innerHTML as "".
    Secondly i think You want to add element with another task, not removing older ones.
    use .append() to add at the end of parent or prepend() to add at the begginning of parrent.

     <div class="tasklist"><p id="task1" style="color:#d3d3a3">You don't have any tasks.</p></div><br>
    <script>
    const element = document.getElementById("task1");
    var task = document.input["task"].value;
    function changeColor(){console.log("color")};
    function getInputValue() {
    let value = document.getElementById("task").value;
    if(value.length>0){
    element.append(
        Object.assign(
            document.createElement("p"),
            {textContent:value}
        )
    );
    document.getElementById("task1").style.color = "white";}}
  </script>
  Enter a task:<br>
  <input type="text" id="task" name="task" placeholder="Pay Bills">
  <button onclick="getInputValue();changeColor()" >+ Add</button>

    if You rather want to replace Your first child then

    <div class="tasklist"><p id="task1" style="color:#d3d3a3">You don't have any tasks.</p></div><br>
    <script>
    const element = document.getElementById("task1");
    var task = document.input["task"].value;
    function getInputValue() {
    let value = document.getElementById("task").value;
    if(value.length>0){
    element.replaceChild(Object.assign(document.createElement("p"),{textContent:value}),element.firstChild);
    document.getElementById("task1").style.color = "white";}}
    </script>
  Enter a task:<br>
  <input type="text" id="task" name="task" placeholder="Pay Bills">
  <button onclick="getInputValue()" >+ Add</button>
    Login or Signup to reply.
  2. 0 
    <div id="tasklist">
  <p id="msg" style="color:red">You don't have any tasks.</p>
</div>
<br>

<script>
  const element = document.getElementById("msg");
  element.style.display = "none";

  function add() {
    let value = document.getElementById("task").value;

    if (value && value.trim() != "") {
      document.getElementById("task").value = "";
      element.style.display = "none";
      const taskContainer = document.getElementById('tasklist');

      const task = document.createElement('p');
      task.textContent = value;
      taskContainer.append(task)
    } else {
      element.style.display = "block";
    }

  }
</script>
Enter a task:<br>
<input type="text" id="task" name="task" placeholder="Pay Bills">
<button onclick="add();">+ Add</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search