title: Reinvestigating "Trying to make different HTML paragraph show depending on selection"
body: <p>I asked about this <a href="https://stackoverflow.com/questions/59991014/trying-to-make-different-html-paragraph-show-depending-on-selection">previously</a> but failed to provide enough detail so I thought I'd give credit where it's due (the responses were excellent, but didn't answer my issue because I'd failed to provide enough information) and start over.</p>
  
  <p>So I have this pair of modals; one that accepts a text input, and one that gets input out of a dropdown selection, in <a href="https://docs.google.com/spreadsheets/d/1HjIyY6MUKmQghQOWTD4T2dNjAZ9jrOX-OXFkYUyWnAs/edit?usp=sharing" rel="nofollow noreferrer">google sheets</a> and <a href="https://script.google.com/d/19Wqa8peG5JoC2vvDRK51mkqndPRcaByoUpH2ul6y_LQBPv2eKReH0dYR/edit?usp=sharing" rel="nofollow noreferrer">scripts</a> (see hyperlinks) that is supposed to provide a different descriptive paragraph depending on which which selection the user has made from a dropdown step. Currently it just shows a single paragraph that doesn't change depending on selection. I want it to:</p>
  
  <ul>
  <li><p>show id='PUBLIC' paragraph when Public is selected, show id='INTERNAL' when internal is selected. Etc. Etc.</p></li>
  <li><p>Save their selection and send it to be pasted it where it's needed.</p></li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function AddValuesFromModal(selectValue) {
    var documentId = SpreadsheetApp.getActiveSpreadsheet().getId();
    console.log("Getting document log...");
   var infoSheet = SpreadsheetApp.getActive().getSheetByName('Information Control')
    console.log("Got document!");
    console.log("Selected value: " + selectValue);
    console.log("Start setting value....");
    infoSheet.getRange('C4').setValue(selectValue);
    console.log("Value has been set!");
  }
  
  function myFunk() {
    // Display a dialog box for each field you need information for.
    var documentProperties = PropertiesService.getDocumentProperties();
    var ui = SpreadsheetApp.getUi();
    //var response = ui.prompt('Enter Name', 'Enter owners person's name', ui.ButtonSet.OK);
    var nameResponse = ui.prompt("Enter the name of the document OWNER");
    var salesperson = nameResponse.getResponseText();
    var documentProperties = PropertiesService.getDocumentProperties();
    var infoSheet = SpreadsheetApp.getActive().getSheetByName('Information Control')
    var date = new Date();
    var htmlDlg = HtmlService.createHtmlOutputFromFile("HTML_myHtml")
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(200)
      .setHeight(150);
  
    var modal = SpreadsheetApp.getUi();
    modal.showModalDialog(htmlDlg, "Document Classification");
  
    //Get Current Document ID
    var documentId = SpreadsheetApp.getActiveSpreadsheet().getId();
    console.log(documentId);
  
    //Get the document body as a variable
    var body = SpreadsheetApp.openById(documentId).getDataRange().getValues();
    console.log(body);
  
    //Insert the entries into the document
    infoSheet.getRange('C5').setValue(salesperson);
    infoSheet.getRange('C8').setValue(date);
  
  
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="docType"&gt;
  &lt;select id="selectDocumentType" name="documentClass" onchange='CheckSelect(this.value);'&gt;
    &lt;option value="PUBLIC"&gt;Public&lt;/option&gt;
    &lt;option value="INTERNAL"&gt;Internal&lt;/option&gt;
    &lt;option value="CONFIDENTIAL"&gt;Confidential&lt;/option&gt;
    &lt;option value="SECRET"&gt;Secret&lt;/option&gt;
  &lt;/select&gt;       
  &lt;body&gt;
  &lt;p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;display:block;" class="light work"
           id="Choose" &gt;Please Choose any one&lt;/p&gt;
  &lt;p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;display:none;" class="light work"
           id="PUBLIC" &gt;Wizard Is working&lt;/p&gt;
  &lt;p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;display:none;" class="light work"
           id="INTERNAL" &gt;Wizard Is Twerking&lt;/p&gt;         
  &lt;p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;display:none;" class="light work"
           id="CONFIDENTIAL" &gt;Wizard Is Laughing&lt;/p&gt;
  &lt;p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;display:none;" class="light work"
           id="SECRET" &gt;Wizard Is Eating&lt;/p&gt;  
  &lt;/body&gt;
  &lt;hr/&gt;
   &lt;input type="button" onClick="formSubmit();" value="Submit" /&gt;
  &lt;/form&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;
      &lt;/script&gt;
      &lt;script&gt;
  
      function HideAll(val)
  {
   var all = document.getElementsByClassName(val);
    for(var i =0; i&lt;all.length; i++)
     all[i].style.display = 'none';
  }
   function CheckSelect(val){
   
    HideAll('work');
   document.getElementById(val).style.display='block';
   
  
  }
      function formSubmit(){
      Submit();
      }
     
      
      function Submit() {
      var selectedValue = $('#selectDocumentType').val();
      console.log(selectedValue);
        google.script.run
          .withSuccessHandler(closeIt)
          .AddValuesFromModal(selectedValue);
        };
        
      function closeIt(){
        google.script.host.close();
      };
      
  
      &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>