Am trying to get the value from input and display it, once I input another value, the previous value is still returned,once I click the add button but I dont want it to. How can I solve this is Javascript here is my code.
const addEvent = document.querySelector('.add');
const eventUserInput = document.querySelector('.input2');
const parentEl = document.querySelector('.event-list');
eventUserInput.addEventListener('keyup', (user_input)=>{
let userValue = user_input.target.value;
// console.log(userValue);
addEvent.addEventListener('click', ()=>{
const storeElement = document.createElement('p');
const storeElementText = storeElement.innerHTML = userValue;
console.log(storeElement);
parentEl.appendChild(storeElement);
eventUserInput.value = '';
// document.getElementById('input').value = '';
// parentEl.push(storeElement)
})
}) <div class="list">
<label for="input"></label>
<input type="text" id="input" class="input2" placeholder="enter activity">
<i class="ri-add-fill add">btn</i>
<div class="event-list">
</div>
</div>