mdl-stepper Stepper.next (), выбрасывающий TypeError - PullRequest
Новая
       14

mdl-stepper Stepper.next (), выбрасывающий TypeError

0 голосов
/ 31 октября 2018

Я бы хотел использовать степлер MDL с 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>

Я не могу запустить это, потому что у меня была ошибка ...

Uncaught TypeError: Невозможно прочитать свойство 'next' из неопределенного

Что я могу сделать, чтобы использовать эту функцию?

1 Ответ

0 голосов
/ 31 октября 2018

возможно, ваш js запущен до того, как 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.
      }
    }
}
...