Stepper.next()抛出TypeError

Question

我想使用MDL步进与材料设计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>

我不能运行这个，因为我有个错误.

未定义的TypeError:无法读取未定义的属性“next”

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

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