Очистить содержимое нескольких полей ввода? - PullRequest
Новая
       20

Очистить содержимое нескольких полей ввода?

2 голосов
/ 20 июня 2020

Привет, я динамически добавляю строки с помощью кнопки, и когда я закончу вводить информацию, я бы хотел, чтобы она очистила содержимое. Я хочу нажать кнопку «Добавить покемона», и она должна очистить все содержимое. 

function addPokemon() {
    var pokemonName = document.getElementById("pokemon-name-container");
    pokemonName.innerHTML = document.getElementById("pokemon-names").value;

    for (var i = 0; i < element.length; i++) {
        if (element[i].value !== "undefined") {
            pokemonArray.push(element[i].value);
        }
    }
    console.log(pokemonArray);
    for (var i = 0; i < pokemonArray.length; i++) {
        document.getElementById("pokemon-container").innerHTML += "<li>" + pokemonArray[i] + "</li>";
    }
    document.getElementById("pokemon-name-container").value = "";
    document.getElementById("move-name").value = "";
}

Это моя функция, которую я использую. ^^

А ниже мой HTML vv 

        <div>
            <table>
                <tbody id="tbody">
                    <tr>
                        <td>
                            <div id="pokemon-name-container">
                                <p>Pok&eacutemon Name:</p>
                                <input type="text" id="pokemon-names" size="30">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p class="moves">Moves:</p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input class="move-container" type="text" id="move-name" placeholder="Enter move here">
                        </td>
                        <td>
                            <input class="button-container" type="button" id="remove-btn" value="Remove Move" onclick="removeRow()">
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>

        <div>
            <input type="button" class="add-move-button" id="add-move-button" value="Add Move" onclick="addRow()">
        </div>
        <div>
            <input type="button" class="add-pokemon-button" id="add-pokemon-button" value="Add Pok&eacute;mon" onclick="addPokemon()">
        </div>

1 Ответ

1 голос
/ 20 июня 2020

Вы можете поместить ко всем входам, которые вы создаете, уникальный класс, который определяет их под родительским элементом с уникальным идентификатором. Затем используйте внутри функции javascript следующий кусок кода const childs = document.querySelectorAll('#idParent.classChilds'), этот querySelectorAll похож на getElementsById, но использует селекторы CSS, поэтому он более мощный. QuerySelectorAll возвращает вам NodeList всех элементов, которые соответствуют DOM с запросом CSS.

Тогда вам нужно будет сделать что-то подобное с помощью функционального программирования: 

const childs = document.querySelectorAll('#idParent .classChilds')
childs.forEach(child=>{
    child.value = ""
})

Я не уверен, работает ли этот код (у меня нет редактора кода и браузера, чтобы проверить, нет ли ошибок) , как я сказал, вы могли сделайте что-нибудь подобное

НАДЕЖДА ПОМОГАЕТ

К вашему сведению, старайтесь избегать таких селекторов, как getElementById или getElementsByClass .... Попробуйте использовать это: 

document.querySelector('CSS SELECTOR')   // GIVES YOU THE FIRST MATCH OF THE CSS SELECTOR
document.querySelectorAll('CSS SELECTOR') // GIVES YOU A NODELIST WITH ALL MATCHES
...