单击JavaScript中的第一个按钮时，一次不能显示一个图表吗？

Question

在检查了一些相关问题之后，找不到任何好的答案。 我创建了2个不同的图表（使用Chart.js）。 我有2个按钮（btn1和btn2），当单击btn1时，我要显示“ languageSkillchart”。 但是当单击btn2时，它应该显示'programmingSkillchart'。我已经尝试了几种方法，但是即使单击btn2，我也只能获得语言技能表。 您的帮助将不胜感激。

我的两个图表都在同一页面中：

在我的CV.html中，我有两个按钮

<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页面

<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

我得到的输出是：

Answer 1

选项1：通过打开新窗口，您可以打开2个不同的html文件（ langchartcontainer.html和codechartcontainer.html ），而不仅仅是打开一个文件并将图像放入其自己的html文件中：

  $(document).ready(function(){

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

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

选项2：如果您确实只想使用一个html文件打开，则需要传递一个变量，以指示在外部html中显示哪个图像。 因为您无法使用javascript控制其他文件中发生的情况：

就像是：

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

并且在外部html mySkillsChart.html中，您需要插入其他javascript代码，以读取变量whichImagetoShow并在该页面内显示/隐藏代码。

3）您想要与粘贴代码（CV.html）的页面在同一页面中显示图像，而不是不使用打开的窗口代码，只需显示/隐藏即可，但是您需要在同一页面中显示图像。

Answer 2

如果您使用window.open（），它将把MySkillChart.html页面放入新文档中，这意味着您将无法从CV页面访问它。 要从那里访问它，您需要将其放入CV文档的iframe或容器中。

因此，您的CV.html类似于：

<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

看来您需要在html按钮div上“切换”值：

<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>