title: Using JavaScript to edit HTML style in .cshtml
body: <p>I am making a MVC Web Application and trying to edit the width of a progress bar to show an increase or decrease in the progress and am using a basic javascript function to do it but it is not working.</p>
  
  <p>Can anyone tell me what am I doing wrong? Thanks.</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>@{
      ViewBag.Title = "About";
  }
  
  &lt;h2&gt;@ViewBag.Title.&lt;/h2&gt;
  &lt;h3&gt;@ViewBag.Message&lt;/h3&gt;
  
  &lt;p&gt;Use this area to provide additional information.&lt;/p&gt;
  
  
  &lt;div class="progress progress-striped active progress-sm"&gt;
      &lt;div class="progress-bar progress-bar-success" name="blah" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"  id="pb1"&gt;
          &lt;span class="sr-only"&gt;45% Complete&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;input type="button" value="Change Width" onclick="increase()" class="btn btn-default btn-sm" /&gt;
  
  
  &lt;script type="text/javascript"&gt;
      function increase() {
          var pwidth = document.getElementByID("pb1").style.style="width: 80%";
      }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>