Can't find a way to access input field with Javascript-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

<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>

CodePudding user response：

I think "document.querySelector" is enough to do that job. Below code might be useful.

document.addEventListener("DOMContentLoaded", function() {
    var elm = document.querySelector('.recipient-input input');
    // Get the full DOM object of input element 
    console.log(elm);    
    
    // Get input value
    var val = elm.value;
    console.log(val);
    
    // Get any attribute
    var attr  = elm.getAttribute("role");
    console.log(attr);
    
    // Set input value
    elm.value = "This is a form element";
    console.log(elm.value);
    
    // Change any attribute
    elm.setAttribute("role", "primary");
    console.log(elm.getAttribute("role")); 
});

<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>