javascript - mdl-stepper Stepper.next() 抛出 TypeError

Question

我想将 MDL Stepper 与 Material Design Lite 一起使用。

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>

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

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

我可以做些什么来使用这个功能？

标签： javascriptmaterial-designmaterial-design-lite

Answer 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.
      }
    }
}