Tengo una tabla en la que el valor de almacenamiento local se guarda y se muestra en el th . Quiero escribir una función que elimine el texto del almacenamiento local y abra el campo de entrada al hacer clic. Intenté algo como esto:
<html> <body> <table style="float: right ; padding-left: 10px;" id="table"> <tr> <th id="hello" style="padding-left:24px; text-align: center;" class="button" id="0"><input id="inside" name="inside" type="text" ></th> </table> <button onclick="again();">again</button> <script> function again() { document.getElementById("hello").innerHTML=input;} </script> </body> </html>pero no funciona ¿Alguien puede explicar cuál es el error? ¡Muchas gracias!
Su función again() está configurando el HTML interno del th al valor de una variable llamada input (que no existe).
Debe extraer el valor del campo de entrada y escribir esa (cadena) como el HTML interno de la cabeza. Prueba esto:
function again(){ const tableHeaderElement = document.getElementById("hello"); const userEnteredData = tableHeaderElement.getElementsByTagName('input')[0].value; tableHeaderElement.innerHTML = userEnteredData; }la segunda declaración está recuperando unaHTMLCollection de etiquetas de entrada dentro del encabezado. Su colección HTML solo tendrá un miembro, pero debe ser referenciado por índice, como una matriz, por lo tanto, [0]. Obviamente, .value extrae la propiedad de valor de ese elemento, que es el texto ingresado por su usuario.
Según el uso, puede haber problemas de seguridad al agregar datos ingresados por el usuario en un elemento html, ya que, si ingresaron etiquetas de script y javascript válido, es posible que puedan hacer cosas que usted no quiere que hagan. Es habitual filtrar los datos ingresados por el usuario, 'desinfectarlos', eliminar el código activo o, más fácil pero pronto quedará obsoleto, escapar los datos antes de escribirlos en un elemento html.