Javascript Twitter引导向导类型错误：容器未定义

使用twitter引导向导，当单击“下一个”标志时，我在控制台中收到一个“TypeError:container is undefined”错误。尽管出现错误，向导仍显示下一个选项卡。是什么导致了这个错误

Firefox 59.0.2控制台错误：

bootstrap.js:3768:

小提琴：

发布






表1中的一些文本
表2中的一些文本
表3中的一些文本
表4中的一些文本
完成

JS

//设置导航按钮
var next=document.getElementById（“向导”）.getElementsByClassName（“按钮下一步”）；
var previous=document.getElementById（“向导”）.getElementsByClassName（“按钮previous”）；
var finish=document.getElementById（“向导”）.getElementsByClassName（“按钮完成”）；
//设置引导向导
$（“#根向导”）.bootstrapWizard({
“下一个选择器”：下一个，
“previousSelector”：上一个，
onTabShow：功能（选项卡、导航、索引）{
var$total=navigation.find（'li'）.length；
var$当前=指数+1；
变量$百分比=（$当前/$总计）*100；
如果（$percent==0）{
$percent=（1/$total）*100；
}
$（'#rootwizard.progress bar'）.css({
宽度：$percent+“%”
});
如果（$current用于您在“下一步”按钮中添加了什么
data toggle=“tab”
？只需将其放下，错误就会消失

您在“下一步”按钮中添加了什么内容？只需将其放下，错误就会消失

我在小提琴上没有发现任何错误。Chrome66@AndreyEtumyan在点击“下一步”V形文字后，我在Chrome66中看到一个错误。在主帖子中添加了图像。我没有在小提琴上看到任何错误。Chrome66@AndreyEtumyan我在Chrome 66上看到一个错误，点击“下一步”的V形文字。将图像添加到主帖子中。啊，不知道这是怎么得到的好了。这就是问题所在。非常感谢！啊，不知道那是怎么回事。这就是问题所在。非常感谢！
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#wizard">Launch</button>

<div id="wizard" class="modal fade" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      </div>
      <div class="modal-body welcome-modal-body">
        <div id="rootwizard">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="container">
                <ul class="nav nav-pills">
                  <li class="nav-item"><a class="nav-link" href="#tab1" data-toggle="tab">Tab 1</a></li>
                  <li class="nav-item"><a class="nav-link" href="#tab2" data-toggle="tab">Tab 2</a></li>
                  <li class="nav-item"><a class="nav-link" href="#tab3" data-toggle="tab">Tab 3</a></li>
                  <li class="nav-item"><a class="nav-link" href="#tab4" data-toggle="tab">Tab 4</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div id="bar" class="progress progress-danger progress-striped active">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="1" aria-valuemax="100" style="width: 0%"></div>
          </div>
          <div class="tab-content">
            <div class="tab-pane" id="tab1">
              <h3>Some text in tab 1</h3>
            </div>
            <div class="tab-pane" id="tab2">
              <h3>Some text in tab 2</h3>
            </div>
            <div class="tab-pane" id="tab3">
              <h3>Some text in tab 3</h3>
            </div>
            <div class="tab-pane" id="tab4">
              <h3>Some text in tab 4</h3>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer justify-content-between welcome-modal-footer">
        <button id="button-previous" type="button" class="btn button-previous mr-auto" name='previous' value='Previous'><span class="fa fa-chevron-left"></span></button>
        <button id="button-next" type="button" class="btn button-next ml-auto" name='next' value='Next' data-toggle="tab"><span class="fa fa-chevron-right"></span></button>
        <button id="button-finish" type="submit" class="btn button-finish ml-auto" name='finish' value='Finish'>Finish</button>
      </div>
    </div>
  </div>
</div>

// set up navigation buttons
var next = document.getElementById("wizard").getElementsByClassName("button-next");
var previous = document.getElementById("wizard").getElementsByClassName("button-previous");
var finish = document.getElementById("wizard").getElementsByClassName("button-finish");

// set up bootstrap wizard
$('#rootwizard').bootstrapWizard({
  'nextSelector': next,
  'previousSelector': previous,
  onTabShow: function(tab, navigation, index) {
    var $total = navigation.find('li').length;
    var $current = index + 1;
    var $percent = ($current / $total) * 100;

    if ($percent === 0) {
      $percent = (1 / $total) * 100;
    }
    $('#rootwizard .progress-bar').css({
      width: $percent + '%'
    });

    if ($current <= 1) {
      $(previous).add(finish).css({
        'display': 'none'
      });
      $(next).css({
        'display': 'block'
      });
      $(next).removeClass('disabled');
    } else if ($current < $total) {
      $(previous).add(next).css({
        'display': 'block'
      });
      $(finish).css({
        'display': 'none'
      });
    } else {
      $(next).css({
        'display': 'none'
      });
      $(previous).add(finish).css({
        'display': 'block'
      });
    }
  }
});

$('#rootwizard').bootstrapWizard({
  'tabClass': 'nav nav-pills'
});
$('#welcomeWizard').modal('show');