Materialize input field in Apps Script - Updating/hiding label-CodePudding

I'm using materialize input fields in Google Apps Script UI. I want to have input fields hidden on launch of the form and only become visible once a control (button or drop down) is changed.

I'm hiding the fields using .style.display='none' which is working fine to hide the input field however the default label text still appears. I need to hide that as well. I'm not sure how to change the label text. I tried .label ="" and .textcontent = "" but not working. In the materialize documentation it says after making changes you need to use M.updateTextFields(); to refresh which I did but it doesn't change anything.

           <div >
            <input id="aname1" type="text" >
            <label for="aname1">Client 1</label>
      </div>

        <div >
            <input id="aname2" type="text" >
            <label for="aname2">Client 2</label>
      </div>

      <?!=staff?>


<div >
        <button  id="btn">Submit
        <i >send</i>
        </button>
</div>

--end row-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


<script>

var drop = document.addEventListener('DOMContentLoaded', function() {

var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);

});

  var clientNameBox = document.getElementById("cname");
  var accountNameBox = document.getElementById("aname");
  var clientNameBox1 = document.getElementById("aname1");
  var clientNameBox2 = document.getElementById("aname2");
  var dropRateBox = document.getElementById("drop");


  clientNameBox1.label='';
  clientNameBox1.textContent = '';

  clientNameBox1.style.display='none'


    M.updateTextFields();

Appreciate any thoughts on how to fix this.

CodePudding user response：

You need to hide the div . Probably assign an id and then to hide.

divId.style.display='none'

or to show.

divId.style.display='block'