title: Cannot to display one chart at a time when clicked on first button in JavaScript?
body: <p>After checking some related questions, couldn't find any good answers. 
  I have created 2 different charts(with Chart.js). And I have 2 buttons (btn1 and btn2), when clicked on btn1, I want to display the 'languageSkillchart'. However when clicked on btn2 then it should display 'programmingSkillchart'.I have tried in several ways but I am only getting the language skill chart even when i clicked btn2.
  Your help would be greatly appreciated.</p>
  
  <p><strong>Both Of my Charts in same page:</strong>
    <a href="https://i.stack.imgur.com/WKPU2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WKPU2.png" alt="enter image description here"></a></p>
  
  <p><strong>In my CV.html, I have two Buttons</strong></p>
  
  <pre><code>&lt;div id="chartButton" class="langBtn"&gt;
   &lt;button  id="btn1" class="button"&gt;Click Me!&lt;/button&gt;
   &lt;/div&gt;
  
  &lt;div id="chartButton"  class="codeBtn"&gt;
  &lt;button  id="btn2"  class="button"&gt;Click Me!&lt;/button&gt;
  &lt;/div&gt;
  
  //have added the script
  &lt;script src="js/showAndHideSkills.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>MySkillChart.html page</strong></p>
  
  <pre><code>&lt;div id="langchartcontainer" class="Chartcontainer"&gt;
  &lt;canvas id="languageSkillsChart"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;!--The hidden Programmingskill div, --&gt;
  &lt;div id="codechartcontainer" class="Chartcontainer" style="display: none"&gt;
  &lt;canvas id="codingSkillsChart"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>showAndHideSkills.js</strong></p>
  
  <pre><code>var btn1 = document.getElementById("btn1");
  var btn2 = document.getElementById("btn2");
  var langchartcontainer = document.getElementById("langchartcontainer");
  var codechartcontainer = document.getElementById("codechartcontainer");
  
  //alternative: 1
  /*btn1.addEventListener('click', function () {
    window.open('mySkillsChart.html', '_blank');
    langchartcontainer.style.display = 'block';
  });
  
  btn2.addEventListener('click', function () {
    window.open('mySkillsChart.html', '_blank');
    codechartcontainer.style.display == 'none';
    codechartcontainer.style.display = 'block';
  });*/
  
  
  //Alternative: 2
    /*if(btn1.onclick(window.open('mySkillsChart.html', '_blank'))){
         codechartcontainer.style.display == 'none';
         langchartcontainer.style.display = 'block';
       }else if (btn2.onclick(window.open('mySkillsChart.html', '_blank'))){
          langchartcontainer.style.display = 'none';
       }
    }*/
  
  //Alternative: 3
    $(document).ready(function(){
  
    $("#btn1").click(function(){
      window.open('mySkillsChart.html', '_blank');
      $("#langchartcontainer").slideToggle("fast");
      $("#codechartcontainer").hide("fast");
    });
  
    $("#btn2").click(function(){
      window.open('mySkillsChart.html', '_blank');
      $("#codechartcontainer").show("fast");
      $("#langchartcontainer").hide("fast");
    });
  });
  
  
  
  
  
  
    [1]: https://i.stack.imgur.com/7OZ1K.png
  </code></pre>
  
  <p><strong>The output I get is:</strong>
  <a href="https://i.stack.imgur.com/nNdlQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nNdlQ.png" alt="image"></a></p>