Changing the placeholder text of a login screen

Question

The landing page of our LMS: https://rainforrentlms.litmos.com/account/Login

We want to use the custom CSS option or the custom Javascript option in our LMS's theme setup screen to adjust the placeholder text from Username to Employee Number .

When I inspect the element this is what I extract:

 <input class="first-focus form-control input-lg" id="Username" name="Username" placeholder="Username" required="true" type="text" value=""> 

After reading many posts here on StackOverflow I surmised that I should use Javascript as we've used that successfully to tweak other things in the past.

Here is an existing snippet that is already in our LMS's custom Javascript box:

 <script type="text/javascript"> $(document).ready(function() { checkContainer(); }); function checkContainer () { if($('#SendEmail').is(':visible')){ //if the container is visible on the page $("#SendEmail").attr('checked', false); //Un-checks the checkbox using CSS ID } else { setTimeout(checkContainer, 50); //wait 50 ms, then try again } } </script> 

The code I guessed would work and need to be inserted:

 $('Username').attr('placeholder','Employee Number'); 

I'm not sure if that's correct, I've tried adding that at the top just inside the header and I've tried inserting it all by itself after removing the other code temporarily, neither seems to be working.

=========EDIT #1=========== So here is the code I tried using your suggestion for putting it in the document ready section, also didn't have any effect.

<script type="text/javascript">
$(document).ready(function() {
 $('#Username').attr('placeholder','Employee Number');
 checkContainer();
});
function checkContainer () {
 if($('#SendEmail').is(':visible')){ //if the container is visible on the page
 $("#SendEmail").attr('checked', false); //Un-checks the checkbox using CSS ID
 } else {
 setTimeout(checkContainer, 50); //wait 50 ms, then try again
 }
}
$('#Username').attr('placeholder','Employee Number');
</script>
<script type="text/javascript">
$('#Username').attr('placeholder','Employee Number');
</script>

Answer 1

You're missing the # before Username , so it should be:

$('#Username').attr('placeholder','Employee Number');

The # tells jQuery to look for an element with id="Username" , as opposed to a <Username> element.