mdl-stepper Stepper.next() 抛出 TypeError答案

【问题标题】：mdl-stepper Stepper.next() throwing TypeErrormdl-stepper Stepper.next() 抛出 TypeError
【发布时间】：2018-10-31 13:36:35
【问题描述】：

我想在 Material Design Lite 中使用 MDL Stepper。

HTML：

<ul class="mdl-stepper mdl-stepper--linear mdl-stepper--horizontal" id="demo-stepper-linear">
  <li class="mdl-step">
    <span class="mdl-step__label">
              <span class="mdl-step__title">
                <span class="mdl-step__title-text">Title of step 1</span>
    </span>
    </span>
    <div class="mdl-step__content">
    </div>
    <div class="mdl-step__actions">
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
            Continue
          </button>
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
            Cancel
          </button>
    </div>
  </li>
  <li class="mdl-step">
    <span class="mdl-step__label">
          <span class="mdl-step__title">
            <span class="mdl-step__title-text">Title longer than it should be</span>
    </span>
    </span>
    <div class="mdl-step__content"></div>
    <div class="mdl-step__actions">
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
            Continue
          </button>
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
            Cancel
          </button>
    </div>
  </li>
  <li class="mdl-step">
    <span class="mdl-step__label">
          <span class="mdl-step__title">
            <span class="mdl-step__title-text">Title of step 3</span>
    </span>
    </span>
    <div class="mdl-step__content"></div>
    <div class="mdl-step__actions">
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
            Continue
          </button>
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
            Cancel
          </button>
    </div>
  </li>
</ul>

JavaScript：

<script type="text/javascript">
      var stepperElement = document.querySelector('ul.mdl-stepper');
      var Stepper;

      // Check if MDL Component Handler is loaded.
      if (typeof componentHandler !== 'undefined') {
        // Get the MaterialStepper instance of element to control it.
        Stepper = stepperElement.MaterialStepper;
        // Moves the stepper to the next step for test.
        Stepper.next();
      } else {
        // Material Design Lite javascript is not loaded or for another
        // reason MDL Component Handler is not available globally and
        // you can't use (register and upgrade) Stepper component at this point.
      }
</script>

我无法运行它，因为我遇到了错误...

未捕获的类型错误：无法读取未定义的属性“下一个”

我该怎么做才能使用这个功能？

【问题讨论】：

无法从您发布的代码中看出，但mdl-stepper javascript and html 可能会有所帮助。

标签： javascript material-design material-design-lite

【解决方案1】：

可能是你的 js 在 DOM 完成加载之前运行用下面的代码包装你的代码，它会等到 dom 完成

document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        var stepperElement = document.querySelector('ul.mdl-stepper'); var Stepper;

      // Check if MDL Component Handler is loaded.
      if (typeof componentHandler !== 'undefined') {
        // Get the MaterialStepper instance of element to control it.
        Stepper = stepperElement.MaterialStepper;
        // Moves the stepper to the next step for test.
        Stepper.next();
      } else {
        // Material Design Lite javascript is not loaded or for another
        // reason MDL Component Handler is not available globally and
        // you can't use (register and upgrade) Stepper component at this point.
      }
    }
}

【讨论】：