Adding Placeholder To Input Field By Name

I’m trying to add a placeholder to an an attribute using JavaScript.

The Input element’s HTML is:

<td class="gfield_list_cell gfield_list_72_cell3" data-label="Amount Paid">
<input type="text" name="input_72[]" value="" tabindex="67">
</td>

Seems I need to target it by the class also of the parent td “gfield_list_cell gfield_list_72_cell3”

I’m trying to target this using Javascript and a $ sign as the placeholder. I’m using this, but can’t get it work.

<script type="text/javascript">
  var input = document.getElementsByName('input_72[]')[0];
  input.setAttribute('placeholder', '$');
</script>

Any help would be appreciated. Thanks

Answer

You should use querySelector method.

document.querySelector('.gfield_list_cell.gfield_list_72_cell3 input').setAttribute('placeholder','$');

<table>
<td class="gfield_list_cell gfield_list_72_cell3" data-label="Amount Paid">
       <input type="text" name="input_72[]" value="" tabindex="67">
</td>
</table>