Add a name to a list, remove its input field in modal

  javascript, modal-dialog

Hi I am really stumped on this simple problem.

I have a sign up sheet app where you enter your name in a modal (Bootstrap) click submit and your name appears on the homepage’s sign up sheet.

So far so good, but when the user opens the modal again the input field where they entered their name should be removed and replaced with a text node saying their name, that they have signed up already there.

As it is now, I can add a name and it appears in the home page but I can’t remove the input field which I used to enter a name.

My JS has it just trying to replace the input field with a text node saying "taken" but ideally it should be replaced with a text node with the name which was entered.

Thanks for any help. I’ve been wrestling with this problem for way too long.

//In modal
<ul class="list-group list-group-horizontal">
   <li class="list-group-item flex-fill border-0">
     15:00-15:20
       </li>
   <li id="input1500" class="list-group-item flex-fill border-0">
             <input id="nameInputThree" type="text"> //Input field to be replaced
             </input>
      </li>
</ul>

function addName(e) {
  if(nameInputThree.value === '') {
    alert('Please enter your name');
  }

//Adds name to homepage at the 15:00 field successfully 
    scheduleThree.appendChild(document.createTextNode(nameInputThree.value));
    storeNameInLocalStorage(nameInputThree.value); 

//Problems here
    const nameInputThree = document.getElementById('nameInputThree');
    const parentElement = document.getElementById('input1500')
    const newHeading = document.createElement('h3')
    newHeading.appendChild(document.createTextNode('taken'));

    parentElement.replaceChild(newHeading, nameInputThree.childNodes[0])
}

Source: Ask Javascript Questions

LEAVE A COMMENT