title: how can I hide Element inside the innerHtml in JavaScript?
body: <p>Hi I have below calculator code , what I want to do is when I click calculate button,when &quot;Additional Ongoing Deployment&quot; this input value (id=SNEAD ) = 0, the result should hide from the output (which id is ong1), if !=0 then show it, the calculation output is innerHTML,so I was wondering if I can use &quot;if else&quot; statement inside the innerHTML?? At the moment my solution is add id ong1 and use  <code>$('.ong1').show();</code>  <code>$('.ong1').hide();</code> but it is not working,</p>
  <p>It is too long, please see my code here: <a href="https://jsfiddle.net/jackwei/9co5s07w/58/" rel="nofollow noreferrer">https://jsfiddle.net/jackwei/9co5s07w/58/</a></p>
  <p>below is the js code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;script&gt;
          function calculation() {
              var SNE = document.getElementById("SNE").value;
              var MNE = document.getElementById("MNE").value;
              var SAE = document.getElementById("SAE").value;
              var MAE = document.getElementById("MAE").value;
              var MAEAD = document.getElementById("MAEAD").value;
              var first4Value = document.getElementById("first4Value").value;
              var SNEAD = document.getElementById("SNEAD").value;
              var MNEAD = document.getElementById("MNEAD").value;
              var SAEAD = document.getElementById("SAEAD").value;
              var MAEAD = document.getElementById("MAEAD").value;
              var result = document.getElementById("result");
              var resultall = document.getElementById("resultall");
              var ToEmail = document.getElementById("ToEmail");
              var ToName = document.getElementById("ToName"); 
              var calc = (SNE * 1 + SAE * 1) * 1 + (MNE * 1 + MAE * 1) * 1.5 + SNE * 0.75 + MNE * 1 + SAE * 0.75 + MAE * 1 + SNE * 2 + MNE * 3 + SAE * 1 + MAE * 2 + SNEAD * 0.5 + MNEAD * 0.5 + SAEAD * 0.5 + MAEAD * 0.5;
              var TSNE = SNE * 2 + SNE * 1 + SNE * 0.75 + SNEAD * 0.5;
              var TMNE = MNE * 3 + MNE * 1.5 + MNE * 1 + MNEAD * 0.5;
              var TQTY = SNE * 1 + MNE * 1 + SAE * 1 + MAE * 1;
              var TSAE = SAE * 1 + SAE * 1 + SAE * 0.75 + SAEAD * 0.5;
              var TMAE = MAE * 2 + MAE * 1.5 + MAE * 1 + MAEAD * 0.5;
              var ongoing = SNEAD * 0.5 + MNEAD * 0.5 + SAEAD * 0.5 + MAEAD * 0.5;
              var THRS = TSNE + TMNE + TSAE + TMAE;
              result.innerHTML = "Your EDM Quote Total is: &lt;b&gt;" + THRS + " Hours&lt;/b&gt; &lt;br/&gt;&lt;br/&gt;&lt;b&gt;Quote Breakup:&lt;/b&gt;" + "&lt;br&gt;&lt;br&gt;&lt;table width=\'330\' bgcolor=\'white\' border=\'1\' bordercolor=\'black\' cellpadding=\'1\' cellspacing=\'1\' class=\'caltable\'&gt;\n" +
                          "   &lt;tr style=width:330px;background-color:#44546A;color:#FFFFFF;&gt;\n" +
                          "        &lt;td&gt;&lt;/td&gt;\n" +
                          "        &lt;td style=font-size:11px;&gt;New Simple&lt;/td&gt;\n" +
                          "        &lt;td style=font-size:11px;&gt;New Medium&lt;/td&gt;\n" +
                          "        &lt;td style=font-size:11px;&gt;Adapt. Simple&lt;/td&gt;\n" +
                          "        &lt;td style=font-size:11px;&gt;Adapt. Medium&lt;/td&gt;\n" +
                          "        &lt;td style=font-size:11px;&gt;Total&lt;/td&gt;\n" +
                          "        &lt;/tr&gt;\n"
                          +
                          "   &lt;tr style=max-width:310px&gt;\n" +
                          "        &lt;td style=background-color:#5B9BD5;color:#ffffff;font-size:11px;&gt;Quantity&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#D3EBF7;color:#000000;font-size:11px;&gt;" + SNE + "&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#D3EBF7;color:#000000;font-size:11px;&gt;" + MNE + "&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#D3EBF7;color:#000000;font-size:11px;&gt;" + SAE + "&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#D3EBF7;color:#000000;font-size:11px;&gt;" + MAE + "&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#D3EBF7;color:#000000;font-size:11px;&gt;&lt;b&gt;" + TQTY + "&lt;/b&gt;&lt;/td&gt;\n" +
                          "        &lt;/tr&gt;\n"
                          +
                          "   &lt;tr style=max-width:310px&gt;\n" +
                          "        &lt;td style=background-color:#eef9fe;color:#000000;font-size:11px;&gt;Build&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#eef9fe;color:#000000;font-size:11px;&gt;2&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#eef9fe;color:#000000;font-size:11px;&gt;3&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#eef9fe;color:#000000;font-size:11px;&gt;1&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#eef9fe;color:#000000;font-size:11px;&gt;2&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#eef9fe;color:#000000;font-size:11px;&gt;&lt;/td&gt;\n"
                          +
                          "   &lt;tr style=max-width:310px&gt;\n" +
                          "        &lt;td style=background-color:#eef9fe;color:#000000;font-size:11px;&gt;QC &amp; Approvals&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#eef9fe;color:#000000;font-size:11px;&gt;1&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#eef9fe;color:#000000;font-size:11px;&gt;1.5&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#eef9fe;color:#000000;font-size:11px;&gt;1&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#eef9fe;color:#000000;font-size:11px;&gt;1.5&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#eef9fe;color:#000000;font-size:11px;&gt;&lt;/td&gt;\n" +
                          "        &lt;/tr&gt;\n"
                          +
                          "   &lt;tr style=max-width:310px&gt;\n" +
                          "        &lt;td style=background-color:#eef9fe;color:#000000;font-size:11px;&gt;One Deployment &amp; Reports&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#eef9fe;color:#000000;font-size:11px;&gt;0.75&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#eef9fe;color:#000000;font-size:11px;&gt;1&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#eef9fe;color:#000000;font-size:11px;&gt;0.75&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#eef9fe;color:#000000;font-size:11px;&gt;1&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#eef9fe;color:#000000;font-size:11px;&gt;&lt;/td&gt;\n"
                          +
                          "   &lt;tr style=max-width:310px&gt;\n" +
                          "        &lt;td style=background-color:#5B9BD5;color:#ffffff;font-size:11px;&gt;Additional Ongoing Deployment(s)&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#D3EBF7;color:#000000;font-size:11px;&gt;" + SNEAD + "&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#D3EBF7;color:#000000;font-size:11px;&gt;" + MNEAD + "&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#D3EBF7;color:#000000;font-size:11px;&gt;" + SAEAD + "&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#D3EBF7;color:#000000;font-size:11px;&gt;" + MAEAD + "&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#D3EBF7;color:#000000;font-size:11px;&gt;&lt;/td&gt;\n"
                          +
                          "   &lt;tr style=max-width:310px&gt;\n" +
                          "        &lt;td style=background-color:#5B9BD5;color:#ffffff;font-size:12px;&gt;&lt;b&gt;Total Hours&lt;/b&gt;&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#BDD7EE;color:#000000;font-size:12px;&gt;&lt;b&gt;" + TSNE + "&lt;/b&gt;&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#BDD7EE;color:#000000;font-size:12px;&gt;&lt;b&gt;" + TMNE + "&lt;/b&gt;&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#BDD7EE;color:#000000;font-size:12px;&gt;&lt;b&gt;" + TSAE + "&lt;/b&gt;&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#BDD7EE;color:#000000;font-size:12px;&gt;&lt;b&gt;" + TMAE + "&lt;/b&gt;&lt;/td&gt;\n" +
                          "        &lt;td style=background-color:#BDD7EE;color:#000000;font-size:12px;&gt;&lt;b&gt;" + THRS + "&lt;/b&gt;&lt;/td&gt;\n"
                          +
                          "&lt;/table&gt;";
   if(SNEAD !== 0)
   {
    $('.ong1').show();
   }  
   else  if(SNEAD == 0)
   {
    $('.ong1').hide();
   }    
                          
               resultall.innerHTML = "&lt;B&gt;Inclusion:&lt;/B&gt;&lt;br /&gt;&lt;br /&gt;&lt;span style=padding-left:15px;&gt;&lt;span style=font-size:18px;&gt;•&lt;/span&gt; " + SNE + " New simple builds &lt;span id=ong1&gt;with " + SNEAD + " additional &lt;span style=padding-left:34px;&gt;deployments&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;" + "&lt;br /&gt;&lt;span style=padding-left:15px;&gt;&lt;span style=font-size:18px;&gt;•&lt;/span&gt; " + MNE + " New medium builds with " +  MNEAD + " additional &lt;span style=padding-left:34px;&gt;deployments&lt;/span&gt;&lt;/span&gt;"  + "&lt;br /&gt;&lt;span style=padding-left:15px;&gt;&lt;span style=font-size:18px;&gt;•&lt;/span&gt; " + SAE + " adaption simple builds with " + SAEAD + " additional &lt;span style=padding-left:34px;&gt;deployments&lt;/span&gt;&lt;/span&gt;"+ "&lt;br /&gt;&lt;span style=padding-left:15px;&gt;&lt;span style=font-size:18px;&gt;•&lt;/span&gt; " + MAE + " Adaption medium builds with " + MAEAD + " additional &lt;span style=padding-left:34px;&gt;deployments&lt;/span&gt;&lt;/span&gt;"
                          +
                          "&lt;br /&gt;&lt;span style=padding-left:15px;&gt;&lt;span style=font-size:18px;&gt;•&lt;/span&gt; Mobile responsive email build/s&lt;/span&gt;&lt;br /&gt;&lt;span style=padding-left:15px;&gt;&lt;span style=font-size:18px;&gt;•&lt;/span&gt; Standard Reports Covers:&lt;/span&gt;&lt;br /&gt;&lt;span style=padding-left:30px;&gt;&lt;span style=font-size:18px;&gt;•&lt;/span&gt; Suppressions on upload&lt;/span&gt;&lt;br /&gt; &lt;span style=padding-left:30px;&gt;&lt;span style=font-size:18px;&gt;•&lt;/span&gt; Sent report (Sent, Opens, Clicks, Bounces, &lt;span style=padding-left:38px;&gt;Unsubscribes)&lt;/span&gt;&lt;/span&gt;&lt;br /&gt; &lt;span style=padding-left:30px;&gt;&lt;span style=font-size:18px;&gt;•&lt;/span&gt; Click Report (Unique Clicks, Total Clicks per &lt;span style=padding-left:38px;&gt;link)&lt;/span&gt;&lt;/span&gt;    &lt;br /&gt;&lt;span style=padding-left:30px;&gt;&lt;span style=font-size:18px;&gt;•&lt;/span&gt; Click Report (Unique Clicks, Total Clicks per &lt;span style=padding-left:38px;&gt;link)&lt;/span&gt;&lt;/span&gt;  &lt;br /&gt;&lt;br /&gt;&lt;b&gt;Exclusions:&lt;/b&gt;&lt;br /&gt;&lt;br /&gt;&lt;span style=padding-left:15px;&gt;&lt;span style=font-size:18px;&gt;•&lt;/span&gt; Archiving&lt;/span&gt;&lt;br /&gt;&lt;span style=padding-left:15px;&gt;&lt;span style=font-size:18px;&gt;•&lt;/span&gt; Change requests&lt;/span&gt;&lt;br /&gt;&lt;span style=padding-left:15px;&gt;&lt;span style=font-size:18px;&gt;•&lt;/span&gt; Additional report&lt;/span&gt;&lt;br /&gt;&lt;span style=padding-left:15px;&gt;&lt;span style=font-size:18px;&gt;•&lt;/span&gt; Creative services&lt;/span&gt;&lt;br /&gt;&lt;span style=padding-left:15px;&gt;&lt;span style=font-size:18px;&gt;•&lt;/span&gt; Data manipulation&lt;/span&gt;&lt;br /&gt;&lt;span style=padding-left:15px;&gt;&lt;span style=font-size:18px;&gt;•&lt;/span&gt; Data transformation &lt;/span&gt;&lt;br /&gt;&lt;span style=padding-left:15px;&gt;&lt;span style=font-size:18px;&gt;•&lt;/span&gt; Data extraction&lt;/span&gt;&lt;br /&gt;&lt;span style=padding-left:15px;&gt;&lt;span style=font-size:18px;&gt;•&lt;/span&gt; Any automation&lt;/span&gt; "
            
  
              success([0, 1], null, null);
              document.getElementById("myButton").onclick = function () {
                  location.href = "email.html?SNE=" + SNE + "&amp;SNEAD=" + SNEAD + "&amp;TSNE=" + TSNE + "&amp;SAE=" + SAE + "&amp;SAEAD=" + SAEAD + "&amp;TSAE=" + TSAE + "&amp;MNE=" + MNE + "&amp;MNEAD=" + MNEAD + "&amp;TMNE=" + TMNE + "&amp;MAE=" + MAE + "&amp;MAEAD=" + MAEAD + "&amp;TMAE=" + TMAE + "&amp;TQTY=" + TQTY + "&amp;THRS=" + THRS + "&amp;ToName=" + $("#ToName").val() + "&amp;ToEmail=" + $("#ToEmail").val();
              };
          }
  
  
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>