Javascript 未捕获类型错误：无法读取属性'；追加'；空的

我在这里重新创建了ployly.js下拉图：

我在我的应用程序中复制并粘贴了代码，效果非常好

现在我只想复制这张图，把它放在原图下面。以下是html：

<div class="showcase__section" id="bubble">
  <div class="spacer --small"></div>
  <div id="bubbleplots">
    <div class="bubbleplot" data-num="0">
      <div class="plot" id="plotdiv"></div>
      <div class="control-row">
        Country: <select class="countrydata">
        </select>
      </div>
    </div>
  </div>
</div>

<div class="showcase__section" id="bubble">
  <div class="spacer --small"></div>
  <div id="bubbleplots">
    <div class="bubbleplot" data-num="0">
      <div class="plot1" id="plotdiv1"></div>
      <div class="control-row">
        Country: <select class="countrydata1">
        </select>
      </div>
    </div>
  </div>

再说一遍

selector.appendChild(currentOption);

与第一个图形完美配合

因此currentOption1为空。为什么，我该如何修复它

这里有一个链接到

Plotly.d3.csv（

https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv，函数（错误，行）{
函数解包（行、键）{
返回行.map（函数（行）{returnrow[key]；}）；
}
var allCountryNames=unpack（行，'country'），
allYear=解包（行，“年”），
allGdp=unpack（行“gdpPercap”），
国家列表=[]，
当前国家，
当前国内生产总值=[]，
本年度=[]；
对于（var i=0；i”+chosenCountry+“GDP”
};
Plotly.newPlot（'plotdiv'，数据，布局）；
};
var innerContainer=document.querySelector（“[data num=“0”），
plotEl=innerContainer.querySelector（'.plot'），
countrySelector=innerContainer.querySelector（'.countrydata'）；
函数赋值选项（文本数组、选择器）{
对于（var i=0；i”+chosenCountry+“GDP”
};
Plotly.newPlot（'plotdiv1'，数据，布局）；
};
var innerContainer=document.querySelector（“[data num=“0”），
plotEl=innerContainer.querySelector（'.plot1'），
countrySelector=innerContainer.querySelector（'.countrydata1'）；
函数赋值选项（文本数组、选择器）{
对于（var i=0；i

调用第一个下拉框，因此我将其更改为

var innerContainer = document.getElementById('bubble1')

在我在html中创建'bubble1'id以区分两者之后，它从第二组相同的数据中检索到了正确的数据

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv', function(err, rows){

    function unpack(rows, key) {
        return rows.map(function(row) { return row[key]; });
    }

var allCountryNames = unpack(rows, 'country'),
    allYear = unpack(rows, 'year'),
    allGdp = unpack(rows, 'gdpPercap'),
    listofCountries = [],
    currentCountry,
    currentGdp = [],
    currentYear = [];

  for (var i = 0; i < allCountryNames.length; i++ ){
    if (listofCountries.indexOf(allCountryNames[i]) === -1 ){
      listofCountries.push(allCountryNames[i]);
    }
  }

  function getCountryData(chosenCountry) {
    currentGdp = [];
    currentYear = [];
    for (var i = 0 ; i < allCountryNames.length ; i++){
      if ( allCountryNames[i] === chosenCountry ) {
        currentGdp.push(allGdp[i]);
        currentYear.push(allYear[i]);
      }
    }
  };

// Default Country Data
setBubblePlot('Afghanistan');

function setBubblePlot(chosenCountry) {
    getCountryData(chosenCountry);

    var trace1 = {
      x: currentYear,
      y: currentGdp,
      mode: 'lines+markers',
      marker: {
        size: 12,
        opacity: 0.5
      }
    };

var data = [trace1];

var layout = {
  title: 'GDP per cap according to Country<br>'+ chosenCountry + ' GDP'
};

    Plotly.newPlot('plotdiv', data, layout);
};

var innerContainer = document.querySelector('[data-num="0"'),
    plotEl = innerContainer.querySelector('.plot'),
    countrySelector = innerContainer.querySelector('.countrydata');

function assignOptions(textArray, selector) {
  for (var i = 0; i < textArray.length;  i++) {
      var currentOption = document.createElement('option');
      currentOption.text = textArray[i];
      selector.appendChild(currentOption);
  }
}

assignOptions(listofCountries, countrySelector);

function updateCountry(){
    setBubblePlot(countrySelector.value);
}

countrySelector.addEventListener('change', updateCountry, false);
 });


Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv', function(err, rows){

    function unpack(rows, key) {
         return rows.map(function(row) { return row[key]; });
    }

var allCountryNames = unpack(rows, 'country'),
    allYear = unpack(rows, 'year'),
    allGdp = unpack(rows, 'gdpPercap'),
    listofCountries = [],
    currentCountry,
    currentGdp = [],
    currentYear = [];

  for (var i = 0; i < allCountryNames.length; i++ ){
    if (listofCountries.indexOf(allCountryNames[i]) === -1 ){
      listofCountries.push(allCountryNames[i]);
    }
  }

  function getCountryData(chosenCountry) {
    currentGdp = [];
    currentYear = [];
    for (var i = 0 ; i < allCountryNames.length ; i++){
       if ( allCountryNames[i] === chosenCountry ) {
        currentGdp.push(allGdp[i]);
        currentYear.push(allYear[i]);
      }
    }
  };

// Default Country Data
setBubblePlot('Brazil');

function setBubblePlot(chosenCountry) {
    getCountryData(chosenCountry);

    var trace1 = {
       x: currentYear,
       y: currentGdp,
      mode: 'lines+markers',
      marker: {
        size: 12,
        opacity: 0.5
      }
    };

    var data = [trace1];

    var layout = {
      title: 'GDP per cap according to Country<br>'+ chosenCountry + ' GDP'
    };

    Plotly.newPlot('plotdiv1', data, layout);
};

var innerContainer = document.querySelector('[data-num="0"'),
    plotEl = innerContainer.querySelector('.plot1'),
    countrySelector = innerContainer.querySelector('.countrydata1');

function assignOptions(textArray, selector) {
  for (var i = 0; i < textArray.length;  i++) {
      var currentOption1 = document.createElement('option');
        console.log('currentOption1')
      currentOption1.text = textArray[i];
      console.log('currentOption1')
      selector.appendChild(currentOption1);
      console.log('currentOption1')
  }
}

 assignOptions(listofCountries, countrySelector);

function updateCountry(){
    setBubblePlot(countrySelector.value);
}

countrySelector.addEventListener('change', updateCountry, false);
});

var innerContainer = document.querySelector('[data-num="0"')

var innerContainer = document.getElementById('bubble1')