Как я могу решить: шаблон HTML должен содержать один корневой элемент

Как я могу решить: шаблон HTML должен содержать один корневой элемент

Я пытаюсь использовать onsen навигатор с несколькими файлами «.html», но я получаю ту же ошибку, независимо от того, что я пробовал

Мой сценарий

  • -www
  • / скрипты
  • index.html
  • home.html

Я хочу перейти от index.html, к home.html

Ошибка:

 Uncaught (in promise) Error: [Onsen UI] HTML template must contain a single root element at Object.Q.throw (onsenui.min.js:2) at Object.Q.createElement (onsenui.min.js:2) at onsenui.min.js:2 

Мой index.html:

  {amp}lt;link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"{amp}gt; {amp}lt;link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"{amp}gt; {amp}lt;script src="https://unpkg.com/onsenui/js/onsenui.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src='scripts/loginScript.js' type='text/javascript'{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;link rel="stylesheet" href="style.css"{amp}gt; {amp}lt;title{amp}gt;Tu Psicologa de Cabecera{amp}lt;/title{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;ons-navigator id="navigator" page="index.html"{amp}gt;{amp}lt;/ons-navigator{amp}gt; {amp}lt;ons-template id="index.html"{amp}gt; {amp}lt;ons-page id="index"{amp}gt; {amp}lt;img class="imagenLogo" src="https://i.imgur.com/cq7BbWn.png"{amp}gt; {amp}lt;ons-card class="loginCard"{amp}gt; {amp}lt;ons-input id="userLogin" modifier="underbar" placeholder="Usuario" style="width: 100%; margin-top: 8px; margin-bottom: 8px;" float{amp}gt;{amp}lt;/ons-input{amp}gt; {amp}lt;ons-input id="passLogin" modifier="underbar" placeholder="Contraseña" type="password" style="width: 100%; margin-top: 8px; margin-bottom: 8px;" float{amp}gt;{amp}lt;/ons-input{amp}gt; {amp}lt;ons-button class="loginButton" onclick="loginNomral()"{amp}gt;ENTRAR{amp}lt;/ons-button{amp}gt; {amp}lt;ons-button class="loginFacebookButton"{amp}gt;ENTRAR CON FACEBOOK{amp}lt;/ons-button{amp}gt; {amp}lt;label class="labelRegister"{amp}gt;REGISTRARME{amp}lt;/ilabel{amp}gt; {amp}lt;/ons-card{amp}gt; {amp}lt;/ons-page{amp}gt; {amp}lt;/ons-template{amp}gt; {amp}lt;script type="text/javascript" src="cordova.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; 

Мой дом.html

  {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="utf-8"{amp}gt; {amp}lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"{amp}gt; {amp}lt;link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"{amp}gt; {amp}lt;link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"{amp}gt; {amp}lt;script src="https://unpkg.com/onsenui/js/onsenui.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;link rel="stylesheet" href="style.css"{amp}gt; {amp}lt;title{amp}gt;{amp}lt;/title{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;ons-page id="home"{amp}gt; {amp}lt;ons-toolbar{amp}gt; {amp}lt;div class="left"{amp}gt;{amp}lt;ons-back-button{amp}gt;Page 1{amp}lt;/ons-back-button{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/ons-toolbar{amp}gt; {amp}lt;p{amp}gt;This is the second page.{amp}lt;/p{amp}gt; {amp}lt;/ons-page{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

И мой сценарий:

  function loginNomral(){ const navigator = document.querySelector('#navigator'); navigator.resetToPage('home.html'); ons.notification.alert('test'); } 

Пожалуйста, помогите: v РЕДАКТИРОВАТЬ: Это для мобильного приложения Полный просмотр html: изображение index.html изображение home.html

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector