Weird OnsenUI behavior

jamal

Please check out the following codepen:

If I comment out the <div> tag block. The <ons-input> and Save button tag disappear!! Could you explain why this is happening?

<ons-navigator id="myNavigator" page="page2.html"></ons-navigator>  

    <template id="page2.html">
        <ons-page id="page2">
<!--    comment out the <div> tag block. The <ons-input> and Save button disappear -->
        <div>           
            <ons-input id="employeeID" placeholder="Employee ID" type="text" value="150" />
        </div>
            
              <input type="submit" id="save" value="Save" />
           
        </ons-page>
    </template>

JS:

document.addEventListener('click', function(event) { 

      if ( event.target.id == "save")
          {
                   var e = document.getElementById('employeeID');
               alert(e.value);
            
          }
    });

mmike

Jamal

Actually it’s quite simple.

Include closing </ons-input> tag. It works fine.

<ons-navigator id=“myNavigator” page=“page2.html”></ons-navigator>

<template id="page2.html">
    <ons-page id="page2">

             <ons-input id="employeeID" placeholder="Employee ID" type="text" value="150"></ons-input>

        
          <input type="submit" id="save" value="Save" />
       
    </ons-page>
</template>

jamal

@mmike, thanks! How did I miss that!!

I think the confusion comes from the fact that some HTML tags require an explicit closing tags while others do not such as:

VS

<ons-input id=“test”></ons-input>

Fran Diox

@jamal Only a few native HTML elements are self-closing tags, like <input /> or <link />. There is no way to create a self-closing tag using Custom Elements, so remember to close them when using Onsen UI or any other library

Weird OnsenUI behavior browsing