JS：ドロップダウン選択後にグラフの幅が変更されました

Question

グラフの種類が異なるグラフデータセットと選択メニューの間で選択するドロップダウン選択オプションを追加しましたが、デフォルトではグラフ幅が縮小されます"見えない"。

私は、次のコードでは成功しないエラーを見つけるのに苦労しています。

HTML：

<select id="target"> 
      <option value="sankey_1">Option 1</option> 
      <option value="sankey_2">Option 2</option> 
      <option value="sankey_3">Option 3</option> 
     </select> 

     <div id="sankey_1"; class="vis"></div> 
     <div id="sankey_2"; class="inv"></div> 
     <div id="sankey_3"; class="inv"></div> 

CSS：

.inv { 
    display: none; 
} 
.vis { 
    width: 100%; 
    height: 500px; 
} 

はJavaScript：

google.charts.load('current', {'packages':['sankey']}); 
     google.charts.setOnLoadCallback(drawChart); 

     function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'From'); 
     data.addColumn('string', 'To'); 
     data.addColumn('number', 'Weight'); 
     data.addRows([ 
      [ 'A', 'X', 5 ], 
      [ 'A', 'Y', 7 ], 
      [ 'A', 'Z', 6 ], 
      [ 'B', 'X', 2 ], 
      [ 'B', 'Y', 9 ], 
      [ 'B', 'Z', 4 ] 
     ]); 


     // Instantiates and draws our chart, passing in some options. 
     var chart = new google.visualization.Sankey(document.getElementById('sankey_1')); 
     chart.draw(data); 
     } 

     google.charts.load('current', {'packages':['sankey']}); 
     google.charts.setOnLoadCallback(drawChart1); 

     function drawChart1() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'From'); 
     data.addColumn('string', 'To'); 
     data.addColumn('number', 'Weight'); 
     data.addRows([ 
      [ 'A', 'X', 5 ], 
      [ 'A', 'Y', 7 ], 
      [ 'A', 'Z', 6 ], 
      [ 'B', 'X', 2 ], 
      [ 'B', 'Y', 9 ], 
      [ 'B', 'Z', 4 ] 
     ]); 


     // Instantiates and draws our chart, passing in some options. 
     var chart = new google.visualization.Sankey(document.getElementById('sankey_2')); 
     chart.draw(data); 
     } 

     google.charts.load('current', {'packages':['sankey']}); 
     google.charts.setOnLoadCallback(drawChart2); 

     function drawChart2() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'From'); 
     data.addColumn('string', 'To'); 
     data.addColumn('number', 'Weight'); 
     data.addRows([ 
      [ 'A', 'X', 5 ], 
      [ 'A', 'Y', 7 ], 
      [ 'A', 'Z', 6 ], 
      [ 'B', 'X', 2 ], 
      [ 'B', 'Y', 9 ], 
      [ 'B', 'Z', 4 ] 
     ]); 


     // Instantiates and draws our chart, passing in some options. 
     var chart = new google.visualization.Sankey(document.getElementById('sankey_3')); 
     chart.draw(data); 
     } 


     $(window).resize(function(){ 
     drawChart(); 
     drawChart1(); 
     drawChart2(); 

     }); 

       document 
       .getElementById('target') 
       .addEventListener('change', function() { 
         'use strict'; 
         var vis = document.querySelector('.vis'), 
           target = document.getElementById(this.value); 
         if (vis !== null) { 
           vis.className = 'inv'; 
         } 
         if (target !== null) { 
           target.className = 'vis'; 
         } 
       }); 

Answer 1

どうもありがとう、私のためにその仕事。

ここにコードの一部が変更されています。

document 
      .getElementById('target') 
      .addEventListener('change', function() { 
        'use strict'; 
        var vis = document.querySelector('.vis'), 
          target = document.getElementById(this.value); 
        if (vis !== null) { 
          vis.className = 'inv'; 
        } 
        if (target !== null) { 
          target.className = 'vis'; 
            drawChart(); 
            drawChart1(); 
            drawChart2(); 
        } 
      });