Estoy tratando de encontrar una manera de cambiar el valor del campo de entrada a continuación usando Javascript. El problema es que no puedo encontrar ninguna identificación o nombre del campo de entrada y, por lo tanto, no estoy seguro de cómo acceder a él.
He usado document.getElementById para acceder a otros campos para cambiar su valor, pero dado que este campo de entrada no tiene una identificación, no estoy seguro de cómo abordarlo. El código a continuación no es mío y, por lo tanto, no puedo simplemente agregar una identificación. ¿Alguna idea sobre cómo resolver el problema?
<ul class="form-control recipient-input ac-input rounded-left"> <li class="input"> <input type="text" tabindex="1" autocomplete="off" aria-autocomplete="list" aria- expanded="false" role="combobox" aria-haspopup="false"> </li> </ul>Puede usar document.querySelector para orientar el mismo elemento con diferentes atributos. Incluso puedes usar una lista de atributos también
const node1 = document.querySelector('input[type="text"]'); console.log(node1); const node2 = document.querySelector('input[tabindex="1"]'); console.log(node2); const node3 = document.querySelector('input[autocomplete="off"]'); console.log(node3); const node4 = document.querySelector('input[aria-autocomplete="list"]'); console.log(node4); const node5 = document.querySelector('input[aria-expanded="false"]'); console.log(node5); const node6 = document.querySelector('input[role="combobox"]'); console.log(node6); const node7 = document.querySelector('input[aria-haspopup="false"]'); console.log(node7); const node8 = document.querySelector('input[type="text"][tabindex="1"][autocomplete="off"][aria-autocomplete="list"][aria-expanded="false"][role="combobox"][aria-haspopup="false"]'); console.log(node8); <ul class="form-control recipient-input ac-input rounded-left"> <li class="input"> <input type="text" tabindex="1" autocomplete="off" aria-autocomplete="list" aria-expanded="false" role="combobox" aria-haspopup="false"> </li> </ul> const el = document.querySelector('input[type=text]'); console.log(el) <ul class="form-control recipient-input ac-input rounded-left"> <li class="input"> <input type="text" tabindex="1" autocomplete="off" aria-autocomplete="list" aria- expanded="false" role="combobox" aria-haspopup="false"> </li> </ul>Los elementos <input /> siempre deben encerrarse dentro de un <form /> .
Al darle un name a su <form name="my-form"><input name="firstName" /></form> , se vuelve fácil acceder a cualquier campo del formulario sin tener que usar una id fija en su HTML y haga que esos <form /> sean reutilizables en cualquier lugar de su vista.
window.onload = bindEvents function bindEvents() { const { name } = document.forms['my-form'] name.addEventListener('keypress', onChangeName, true) } function onChangeName(event) { console.log(event.target.value) } <form name="my-form"> <ul> <li> <label for="name">Name</label> <input name="name" /> </li> </ul> </form>