how can i make the input field to be empty after i click a button?

i tried using userinput.value = '' at the end of function but the input is still not empty. here is the code that i’ve tried

let input = document.querySelector('input')
let list = document.querySelector('ul')
let button = document.querySelector('button')

button.addEventListener('click', addtodo)

function addtodo() {
  let userinput = input.value
  let li = document.createElement('li')
  li.innerText = userinput
  list.appendChild(li)
  // console.log(this)
  console.log(userinput)
}

>Solution :

You can reset the value of the input with input.value = ""

let input = document.querySelector('input')
let list = document.querySelector('ul')
let button = document.querySelector('button')

button.addEventListener('click', addtodo)

function addtodo() {
  let userinput = input.value
  let li = document.createElement('li')
  li.innerText = userinput
  list.appendChild(li)
  input.value = ""
}
<input type="text" />
<ul></ul>
<button>button</button>

Leave a Reply