I'm trying to find a way to change the value of the input field below using Javascript. The problem is that I can't find any id or name of the input field and thus, not sure how to access it.
I have used document.getElementById to access other fields to change their value but since this input field does not have an Id I'm not sure how to approach it. The code below is not my own and thus I can't simply add an id. Any ideas on how to solve the problem?
<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>
You can use document.querySelector for targetting the same element with different attributes. You can even use a list of attributes aswell
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><input /> elements should always be enclosed within a <form />.
By giving a name to your <form name="my-form"><input name="firstName" /></form>, it become easy to access any fields of the form without having to use fixed id in your HTML and make those <form /> reusable anywhere in your view.
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>