title: Changing of button text in javascript onclick
body: <p>i want to change of button text when i click the button. Here i have added the text <strong>Click me again</strong> but its not showing.</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-js lang-js prettyprint-override"><code>document.querySelector(".btn").classList.add("customBtn");
  
  document.querySelector(".btn").addEventListener("click", function(){
    document.querySelector(".bodyBG").classList.toggle("bodyBG1");
    document.querySelector(".btn").value="click me again!";
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    background: lightpink;
  }
  
  .customBtn{
    background: transparent;
    font-size: 14px;
    letter-spacing: 0.5px;
    border: 1px solid #000;
    padding : 10px 30px;
    cursor: pointer;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    
  }
  
  .bodyBG1{
    background: green !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body class="bodyBG"&gt;
    &lt;button class="btn"&gt;Click Me!&lt;/button&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>