Estoy construyendo mi sitio web con Material Design Lite, el cual depende de lo siguiente:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" />
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
Cuando utilizo el formulario tiene un efecto que necesita de JavaScript. Todo carga perfecto si el formulario lo incluyo directamente en el HTML, pero al hacerlo mediante JavaScript deja de funcionar.
Lo que hago es esto:
<a onclick="myFunction()">Get Started</a>
Y mi JavaScript:
function myFunction() {
document.getElementById('business').innerHTML =
`<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<h4>Formulario</h4>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</div>
</div>`
};
Este es un ejemplo del efecto que debe hacer el input:
<link href="https://code.getmdl.io/1.3.0/material.min.css" rel="stylesheet"/>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<h4>Formulario</h4>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</div>
</div>