Cannot to display one chart at a time when clicked on first button in JavaScript?

Question

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.

Both Of my Charts in same page:

In my CV.html, I have two Buttons

<div id="chartButton" class="langBtn">
 <button  id="btn1" class="button">Click Me!</button>
 </div>

<div id="chartButton"  class="codeBtn">
<button  id="btn2"  class="button">Click Me!</button>
</div>

//have added the script
<script src="js/showAndHideSkills.js"></script>

MySkillChart.html page

<div id="langchartcontainer" class="Chartcontainer">
<canvas id="languageSkillsChart"></canvas>
</div>

<!--The hidden Programmingskill div, -->
<div id="codechartcontainer" class="Chartcontainer" style="display: none">
<canvas id="codingSkillsChart"></canvas>
</div>

showAndHideSkills.js

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

The output I get is:

Answer 1

Option 1: By opening new window you could open 2 different html files ( langchartcontainer.html and codechartcontainer.html ) instead of just only one and put images in their own html file:

  $(document).ready(function(){

  $("#btn1").click(function(){
    window.open('langchartcontainer.html', '_blank');
  });

  $("#btn2").click(function(){
    window.open('codechartcontainer.html', '_blank');
  });
});

Option 2: If you definitely want to use only one html file to open you need to pass a variable in order to dictate which image is shown in the external html. Because you can't control with javascript what happens in a different file:

something like:

window.open('mySkillsChart.html?whichImagetoShow=A', '_blank');

And in the external html mySkillsChart.html you need to insert a different javascript code in order to read the variable whichImagetoShow and do show/hide code inside of that page.

3) You want to show the images in same page with the one which you paste code above (CV.html), than don't use open window code, just show/hide but you need to have the images displayed in same page.

Answer 2

If you're using window.open() it will put your MySkillChart.html page in a new document, meaning you won't be able to access it from the your CV page. To have access to it from there you would need to put it into an iframe or container on your CV document.

So your CV.html would be something like:

<div class="chartContainer"></div">
<div>
  <button class="lang">Click Me!</button>
</div>    
<div>
  <button class="code">Click Me!</button>
</div>

<script>
  $.get('MySkillChart.html').done(charts=> {
    $(charts)
      .appendTo('.chartContainer')
      .find('.Chartcontainer')
      .hide();
  })

  $('button')
    .on('click', ()=> $('.Chartcontainer').hide())
    .on('click', '.code', ()=>  $('.codechartcontainer').show()
    .on('click', '.lang', ()=> $('.langchartcontainer').show());
</script>

Answer 3

It seems that you need to "switch" values on your html buttons divs:

<div class="chartButton" id="langBtn">
   <button  id="btn1" class="button">Click Me!</button>
</div>
<div class="chartButton"  id="codeBtn">
  <button  id="btn2"  class="button">Click Me!</button>
</div>