Creé un campo de entrada donde puede ingresar texto y estoy tratando de insertar ese texto en un literal de plantilla. Luego quiero usarlos en otros scripts. El problema al que me enfrento es que después de obtener el texto del campo de entrada y asignarlo a una variable, coloco esa variable en el literal de la plantilla y obtengo 'indefinido' en lugar del texto que escribí. ¿Alguna idea de por qué esto podría estar pasando y formas de solucionarlo? Gracias por adelantado.
Aquí está el código html:
<label style="color:black;">Enter words:</label> <input type="text" name="" id="myText"><br> <button id="myButton">Button</button> <button onclick="zipFile()">Download Button</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script> <script src="http://cdn.jsdelivr.net/g/filesaver.js"></script>Aquí está el javascript
let inputText = "originalText"; document.getElementById("myButton").onclick = function (){getMyName()}; function getMyName(){ inputText = document.getElementById("myText").value; console.log("This is input Text: ", inputText); console.log("This is input text but from scriptTemplate " + scriptTemplate); } const scriptTemplate = ` ${inputText}; `; var zip = new JSZip(); function zipFile(){ zip.file("script.js", scriptTemplate); zip.generateAsync({type:"blob"}) .then(function(content){ saveAs(content, "test1.zip"); }); }Está creando el valor de scriptTemplate en la inicialización del script, mientras que debe intentar crearlo desde la propia función. De esta forma, se crea después de cada llamada a zipFile :
function zipFile(){ const scriptTemplate = ` ${inputText}; `; zip.file("script.js", scriptTemplate); zip.generateAsync({type:"blob"}) .then(function(content){ saveAs(content, "test1.zip"); }); }Su problema aquí es que está declarando scriptTemplate fuera de cualquier cuerpo de función. Eso significa que se ejecuta cuando el script se carga por primera vez en la página, pero no es parte de la función que se ejecuta cuando hace clic en un botón. Intentaría agregar devoluciones a sus funciones, perder el botón para obtener el nombre y luego llamar a la función getMyName cuando el usuario vaya a descargarlo.
const zip = new JSZip(); function getMyName() { const inputText = document.getElementById("myText").value; console.log("This is input Text: ", inputText); return inputText; } function zipFile() { const inputText = getMyName(); const scriptTemplate = ` ${inputText}; `; console.log("This is input text but from scriptTemplate " + scriptTemplate); zip.file("script.js", scriptTemplate); zip.generateAsync({ type: "blob" }) .then(function (content) { saveAs(content, "test1.zip"); }); } <label>Enter words:</label> <input type="text" id="myText"><br> <button onclick="zipFile()">Download Button</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script> <script src="http://cdn.jsdelivr.net/g/filesaver.js"></script>¿Seguramente obtienes originalText al generar scriptTemplate ?
Tal vez tenías más esperanzas en cómo funcionan los literales de plantilla. No producen algún nuevo tipo de cadena funcional mágica que resulte en diferentes valores cada vez que se accede a ellos. Solo producen cadenas. Aunque es posible crear literales de plantilla "personalizados", las llamadas plantillas etiquetadas, que pueden producir lo que decida, y si logra diseñar algún valor de retorno interesante vinculado a algún otro valor, eso sería una ingeniería excesiva, por decir lo menos.
myButton por algún motivo? Si no, solo lea la entrada al hacer clic en el botón de descarga.myButton y leerlo cuando necesite el valor (es decir, hacer clic en el botón de descarga)¡Feliz codificación!