无法使用Jquery或Javascript更新输入框的值

Question

I am unable to upgrade the value of input box using Javascript or jquery. I could see the value is not forced into the dom. However, I see the change on UI but not in the elements console.

Manually when I am using the keyboard to input the value updates in console. However, I am trying to update using javascript the element console is not updated and change is seen in UI. Refer the attached image. Screenshot

Note: The UI code part cannot be changed by me and is controlled by Third party.

UI code
    <input type="email" name="email" class="auth0-lock-input" placeholder="yours@example.com" autocomplete="off" autocapitalize="off" aria-label="Email" aria-invalid="true" value="" aria-describedby="auth0-lock-error-msg-email" style="background-image:">

Jquery
    $(document).ready(function(){
    $('#email').val("test")
    });

Javascript
 let data = document.getElementsByName('email')
 for (elt of data) {
     elt.value = "test";
     }

Answer 1

Your problem is that you're trying to select the input by id , but it doesn't have any id so try with $('[name=email]')

$(document).ready(function(){
  $('[name=email]').val("test")
});

Demo

 $(document).ready(function() { $('[name=email]').val("test") console.log($('[name=email]').val()) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="email" name="email" class="auth0-lock-input" placeholder="yours@example.com" autocomplete="off" autocapitalize="off" aria-label="Email" aria-invalid="true" value="" aria-describedby="auth0-lock-error-msg-email" style="background-image:"> 

If you want it in JavaScript you can try with:

let data = document.getElementsByName('email')
data[0].value = "test";

Answer 2

Your JavaScript code works fine!

 let data = document.getElementsByName('email') for (elt of data) { elt.value = "test1234"; } 

 <input type="email" name="email" class="auth0-lock-input" placeholder="yours@example.com" autocomplete="off" autocapitalize="off" aria-label="Email" aria-invalid="true" value="" aria-describedby="auth0-lock-error-msg-email" style="background-image:"> 

Your jQuery code would work if you gave the element the ID you spcified:

 $(document).ready(function(){ $('#email').val("test1234") }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="email" type="email" name="email" class="auth0-lock-input" placeholder="yours@example.com" autocomplete="off" autocapitalize="off" aria-label="Email" aria-invalid="true" value="" aria-describedby="auth0-lock-error-msg-email" style="background-image:"> 

Answer 3

add id="email" on your input because on your jquery you are selecting by #

# = 'id' . = class . = class

 $(document).ready(function(){ $('#email').val("test") }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <input type="email" id="email" name="email" class="auth0-lock-input" placeholder="yours@example.com" autocomplete="off" autocapitalize="off" aria-label="Email" aria-invalid="true" value="" aria-describedby="auth0-lock-error-msg-email" style="background-image:">