0
160
VistasRecargar al hacer clic en un botón sin el atributo onclick
Estoy construyendo un sitio web en softr.io. Es un generador sin código para crear una interfaz para datos de airtable.
Me gustaría actualizar una página al hacer clic en un botón específico. Desafortunadamente tengo poca personalización y esto es lo que tengo hasta ahora:
<script> //get the <button> element const reloadButton = document. getElementsByTagName('button').innerHTML=='Save' ; //add the listener reloadButton.addEventListener("click", reloadPage); //callback for the 'click' event function reloadPage(){ window.location.reload(); } </script> No funciona (no tan sorprendido jaja) 
Tenga en cuenta que no soy un desarrollador y solo trato de jugar con lo que sé.
Gracias por la ayuda, Joaquín.
3 Respuestas
Responde la pregunta0
el método getElementsByTagName devuelve una matriz de elementos, si solo hay un botón en esa página, puede acceder a él mediante reloadButton[0] Alternativamente, puede usar un selector de ID, document.getElementById("button_id") , esto sería mucho más conveniente para trabajar con
0
la función document.getElementsByTagName devuelve una lista de nodos y no uno solo.
Para recuperar su botón, debe agregar un identifier al botón y recuperarlo con la función getElementById en su lugar.
Por ejemplo :
const reloadButton = document.getElementById('myButton');Luego en tu código estás haciendo lo siguiente:
const reloadButton = document. getElementsByTagName('button').innerHTML=='Save' En js, el operador == devuelve un booleano, por lo que está asignando el boolean a reloadButton en lugar del botón en sí.
Si el propósito de su código es agregar Guardar al botón, puede hacerlo de la siguiente manera:
//callback for the 'click' event function reloadPage(){ console.log("hello world") window.location.reload(); } const reloadButton = document.getElementById('myButton'); reloadButton.innerHTML = 'Save' //add the listener reloadButton.addEventListener("click", reloadPage); <button id="myButton"></button>Editar
En tu caso, parece que quieres identificar el botón con el innerText guardar
En su caso, puede usar totalmente la función getElementsByTagName que devuelve lo siguiente como se lee en la documentación:
Una colección HTML en vivo de elementos con un nombre de etiqueta coincidente, en el orden en que aparecen. Si no se encuentran elementos, HTMLCollection está vacío.
Luego puede recorrer la colección y agregar su función si el texto interno se guarda
Ejemplo :
//callback for the 'click' event function reloadPage(){ console.log("hello world") window.location.reload(); } const buttons = document.getElementsByTagName('button') for (let button of buttons){ if(button.innerText.toLowerCase() === "save"){ button.addEventListener('click', reloadPage) } } <button>Wrong button</button> <button>save</button> <button>Another wrong button</button>Nota: si varios botones contienen el texto interno guardado, todos estos botones ejecutarán la función al hacer clic
0
dado que a su botón se le asigna una ID en tiempo de ejecución, no puede usar document.getElementById()
use document.querySelector() en su lugar.
cree un div y asígnele una ID , luego coloque su button dentro de él, use el código a continuación;
<div id="demo"> <button>Reload</button> </div> <script> var btn = document.querySelector('#demo button'); btn.addEventListener('click', function () { alert('button clicked'); window.location.reload(); }); </script>