Javascript width based if else condition | React Js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>

<body>
    <div id="app" class="container">
      <h3>Javascript width based if else condition</h3>
      <div id="dynamicElement" style="width: 100%; border: 1px solid #333333;">
        Font Awesome Icons
      </div>
      <p id="widthText">width: 100%</p>
      <button id="toggleButton">Toggle Width</button>
    </div>

var dynamicWidth = "100%";

toggleButton.addEventListener("click", function () {
          if (dynamicWidth === "100%") {
            dynamicWidth = "50%";
          } else {
            dynamicWidth = "100%";
          }

dynamicElement.style.width = dynamicWidth;
          widthText.innerText = "width: " + dynamicWidth;
        });
      });
    </script>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
​
  <body>
    <div id="app" class="container">
      <h3>Javascript width based if else condition</h3>
      <div id="dynamicElement" style="width: 100%; border: 1px solid #333333;">
        Font Awesome Icons
      </div>
      <p id="widthText">width: 100%</p>
      <button id="toggleButton">Toggle Width</button>
    </div>
​
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        var dynamicElement = document.getElementById("dynamicElement");
        var widthText = document.getElementById("widthText");
        var toggleButton = document.getElementById("toggleButton");
​
        var dynamicWidth = "100%";
​
        toggleButton.addEventListener("click", function () {
          if (dynamicWidth === "100%") {
            dynamicWidth = "50%";
          } else {
            dynamicWidth = "100%";
          }
​
          dynamicElement.style.width = dynamicWidth;
          widthText.innerText = "width: " + dynamicWidth;
        });
      });
    </script>
​
    <style>
      .container {
        text-align: center;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12),
          0 2px 4px 0 rgba(0, 0, 0, 0.24);
        width: 600px;
        margin: 0 auto;
        padding: 20px;
      }
    </style>
  </body>
</html>
​