CODEWITHSUNDEEP
javascripthtml
DoubleDoinked
DoubleDoinked

Reputation: 17

How to dynamically add amount of times same input has been entered into textbox?

I have only recently started with Javascript and been stuck on this problem that seems rather easy but breaking my head on it.

I am trying to basically ask people for their name for a not specified amount of time and instantly add and show it as a LI under the textbox. But I can not figure out how to make it so that someone enters Pablo but Pablo has been entered already it will make it like this Pablo: 2 or 3 if more get entered..

Jsfiddle here --> https://jsfiddle.net/uw1qeg7y/1/

HTML CODE

<!doctype html>
<html lang="nl">

<head>
    <script src="AantalVoornamen.js" defer></script>
    <title>Voornamen</title>
    <link rel="icon" href="javascript.ico" type="image/x-icon">
    <link rel="stylesheet" href="default.css">
</head>

<body>
    <label>Voornaam: <input id="voornaam" autofocus></label>
    <button id="toevoegen">Toevoegen</button>
    <ul id="voornamen">
    </ul>
</body>

</html>

JS CODE

"use strict";

document.getElementById("toevoegen").onclick = function () { 
const voornaamInput = document.getElementById("voornaam"); 
const voornaam = voornaamInput.value; 
const li = document.createElement("li"); 
li.innerText = voornaam; 
document.getElementById("voornamen").appendChild(li); 
voornaamInput.value = ""; 
voornaamInput.focus(); 
};

Thank you and have a great day!

Upvotes: 0

Views: 40

Answers (2)

Nithish
Nithish

Reputation: 6009

You can just store the list in a variable and keep pushing the names into that array before adding li in the Dom. Also before adding we can also check whether the name is being added already or not.

let namesList = [];

document.getElementById("toevoegen").onclick = function () { 
   const voornaamInput = document.getElementById("voornaam"); 
   const voornaam = voornaamInput.value; 
   if(!namesList.includes(voornaam)) {
     const li = document.createElement("li"); 
     li.innerText = voornaam; 
     namesList.push(voornaam);
     document.getElementById("voornamen").appendChild(li); 
     voornaamInput.value = ""; 
     voornaamInput.focus(); 
   }
};
<body>
   <label>Voornaam: <input id="voornaam" autofocus></label>
   <button id="toevoegen">Toevoegen</button>
   <ul id="voornamen">
   </ul>
</body>

If I understand correctly this is what you are looking for, please try with the below code. I have modified your code taken from here.

"use strict";

var valueMap = {};
document.getElementById("toevoegen").onclick = function() {

  const voornaamInput = document.getElementById("voornaam");
  const voornaam = voornaamInput.value;

  let valToDisplay = "";
  if (valueMap[voornaam]) {
    valueMap[voornaam] = valueMap[voornaam] + 1;
    valToDisplay = `${voornaam} ${valueMap[voornaam]}`
  } else {
    valToDisplay = voornaam;
    valueMap[voornaam] = 1;
  }
  voornaamInput.value = "";
  voornaamInput.focus();
};


document.getElementById("stop").onclick = function() {
	const ulElement = document.getElementById("voornamen");
  if(ulElement) {
  	ulElement.innerHTML = '';
  }
  for (let key in valueMap) {
    const li = document.createElement("li");
    li.innerText = `${key} ${valueMap[key]}`;
    ulElement.appendChild(li);
  }
}
    <label>Voornaam: <input id="voornaam" autofocus></label>
    <button id="toevoegen">Toevoegen</button>
    <button id="stop">Stop</button>
    <ul id="voornamen">
    </ul>

Upvotes: 1

Modi Mohammed
Modi Mohammed

Reputation: 179

You can use the map to store the input value as the Key and count as the value for the object.

JS Code

"use strict";

var valueMap = {}; // A global map to store the values
document.getElementById("toevoegen").onclick = function() {

  const voornaamInput = document.getElementById("voornaam");
  const voornaam = voornaamInput.value;

  let valToDisplay = "";
  if (valueMap[voornaam]) {
    valueMap[voornaam] = valueMap[voornaam] + 1; // Increment if already present
    valToDisplay = `${voornaam} ${valueMap[voornaam]}`
  } else {
    valToDisplay = voornaam;
    valueMap[voornaam] = 1; // Make the new entry
  }
  const li = document.createElement("li");
  li.innerText = valToDisplay;
  document.getElementById("voornamen").appendChild(li);
  voornaamInput.value = "";
  voornaamInput.focus();
};

Hope this helps.

Upvotes: 0

Related Questions