const form = document.querySelector("#user-form"); const userInput = document.querySelector("#name", "#surname", "#age", "#country"); const userList = document.querySelector(".list-group"); const firstCardBody = document.querySelectorAll(".card-body")[0]; const secondCardBody = document.querySelectorAll(".card-body")[1]; const filter = document.querySelector("#filter"); const clearButton = document.querySelector("#clear-users"); <form id="user-form" name="form"> <div class="form-row"> <div class="form-group col-md-6"> <input class="form-control" type="text" name="name" id="name" placeholder="İsim"> </div> <div class="form-group col-md-6"> <input class="form-control" type="text" name="surname" id="surname" placeholder="Soyadı"> </div> <div class="form-group col-md-6"> <input class="form-control" type="text" name="age" id="age" placeholder="Yaş"> </div> <div class="form-group col-md-6"> <input class="form-control" type="text" name="country" id="country" placeholder="Ülke"> </div> </div> <button type="submit" class="btn btn-primary">Bilgilerinizi Kaydedin</button> </form>Mi formulario se ve así. Pero cuando ejecuto mi código JS, solo me muestra el nombre, no el apellido, la edad o el país. ¿Cómo los muestro todos?
document.querySelector no se puede usar de la forma en que lo usa, ya que devuelve el primer elemento coincidente (en su caso, la entrada de name ). Para obtener todos los campos de entrada, puede hacerlo así:
const userInput = document.querySelectorAll(".form-control");Esto devuelve los 4 campos de entrada en una matriz que se puede iterar a través de
userInput.forEach(input => { ... });Obtenga un elemento específico como este:
Array.from(userInput).find(input => input.id === "name");Otro enfoque sería obtener los campos de entrada a través de sus ID:
const name = document.querySelector("#name"); const surname= document.querySelector("#surname"); const age = document.querySelector("#age"); const country = document.querySelector("#country");