title: How to change button caption when div tag is visible using Javascript
body: <p>I have this Javascript and HTML</p>
  <pre><code>&lt;div class=&quot;col-lg-12&quot;&gt;
      &lt;button type=&quot;button&quot;  onclick=&quot;myFunction()&quot; class=&quot;btn btn-block btn-success&quot;&gt;&lt;i class=&quot;fas fa-search&quot;&gt;&lt;/i&gt; View Result&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div id=&quot;myDIV&quot; style=&quot;display:none&quot;&gt;
    This is my DIV element.
  &lt;/div&gt;
  
  &lt;script type=&quot;text/javascript&quot;&gt;
    function myFunction() {
    var x = document.getElementById(&quot;myDIV&quot;);
    if (x.style.display === &quot;none&quot;) {
      x.style.display = &quot;block&quot;;
    } else {
      x.style.display = &quot;none&quot;;
    }
   }
  &lt;/script&gt;
  </code></pre>
  <p>By default, myDiv div tag is hidden. Then when the button is clicked it becomes visible, when it's clicked again it hides the div.</p>
  <p>But beyond this, what I want is that when the div tag is visible the button caption should be</p>
  <blockquote>
  <p>Hide Result</p>
  </blockquote>
  <p>and when the div tag is hidden, the button caption should be</p>
  <blockquote>
  <p>View Result</p>
  </blockquote>
  <p>How do I modify ny current code to achieve this?</p>
  <p>Thanks</p>