Блог

Итак, я пытался составить список имен в JavaScript. Я добавил текстовое поле и кнопку для добавления имен, и это работает отлично, но теперь мне нужно выполнить проверку в этом списке, и когда я ввел имя «Джон», например, дважды, в моем списке должно появиться «Джон 2 раза», при трехкратном вводе «Джон 3 раза» и так далее.. Я действительно застрял в этой части и надеюсь, что вы сможете мне с этим помочь.

 "use strict";

let voornaam = [];
document.getElementById("toevoegen").onclick=function(){
    const voornaamInput = document.getElementById("voornaam");
    const voornaam = voornaamInput.value;
    toevoegen(voornaam);
    voornaamInput.value="";
    voornaamInput.focus();
}

//add name//
function toevoegen (voornaam){
    const li = document.createElement("li");
    li.innerText=voornaam;
    document.getElementById("voornamen").appendChild(li);
}

//do the check//
function controle (voornaam) {

}  

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

Я внес некоторые изменения в код для вас. Я добавил кучу комментариев, чтобы помочь вам освоить некоторые новые приемы.

Использование правильного инструмента для работы здесь, на мой взгляд, было бы object , а не array . Если вы еще не разобрались в объектах, сделайте это, они великолепны, когда вы их понимаете.

 'use strict';

// let voornaam = [];
let names = {
    Steve: 1,
    Mathias: 2,
};

document.getElementById('toevoegen').onclick = function () {
    const voornaamInput = document.getElementById('voornaam');
    const voornaam = voornaamInput.value;
    tallyName(voornaam);
    displayList();
    voornaamInput.value = '';
    voornaamInput.focus();
};

// Tally name
function tallyName(name) {
    // Check name is not empty
    if (name !== '') {
        // Ternary operator - check the name is in our object and has a value of 0 or more.
        // If its already there, add 1, else set it to 0.
        // Try adding this without the check, you will see that you get unwanted behaviour such as NaN etc.
        names[name] > -1 ? (names[name]  = 1) : (names[name] = 0);

        // Above line is equivalent to:
        // if (names[name] > -1) {
        //  names[name] = names[name]   1;
        // } else {
        //  names[name] = 0;
        // }
    } else {
        console.log('Invalid input');
    }
}

// Set list
function displayList() {
    // Get list
    const list = document.getElementById('voornamen');

    // Remove existing list
    while (list.firstChild) {
        list.removeChild(list.firstChild);
    }

    // This may be a little confusing to start but is a great tool.
    // It cycles the object and reads the key and its corresponding value
    // Object.entries(names) would look like this: [['Steve', 0],['James',2]]
    // So the first loop we get ['Steve', 0] and "destructure" it with the ([key, value])
    console.log(Object.entries(names));
    Object.entries(names).forEach(([k, v]) => {
        // To see what this is doing.
        console.log(k, v);

        // Create new item
        let newItem = document.createElement('li');
        // Set text
        newItem.innerText = k   ': '   v;
        // Add to document
        list.appendChild(newItem);
    });
}