Reload on click of a button without onclick attribute

Question

I'm building a website on softr.io. It's a no-code builder to create a frontend for airtable data.

I would like to refresh a page on the click of a specific button. I unfortunately have little customization and this is what I have so far:

<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>

It's not working (not so surprised haha)

Please keep in mind I'm no developper and just trying to tinker with what I know.

Thank you for the help, Joachim

Answer 1

the document.getElementsByTagName function return a list of node and not a single one.

To retrive your button, you sould add an identifier to the button and retrieve it with the getElementById function instead.

For example :

const reloadButton = document.getElementById('myButton');

---

Then in your code you are doing the following :

const reloadButton = document. getElementsByTagName('button').innerHTML=='Save'

In js, the == operator return a boolean so you are assiging the boolean to reloadButton instead of the button itself.

If the purpose of your code is to add Save to the button, you can do it the following way :

//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>

---

Edit

In your case, it seems that you want to identify the button with the innerText save

In your case you can totally use the getElementsByTagName function which return the following as read in the documentation :

A live HTMLCollection of elements with a matching tag name, in the order they appear. If no elements are found, the HTMLCollection is empty.

Then you can loop through the collection and add your function if the innerText is save

Example :

//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>

Note : If multiple buttons contains the save innerText, then all of these buttons will run the function onclick

Answer 2

the getElementsByTagName method returns an array of elements, if there is only one button on that page, you can access it by reloadButton[0] Alternatively, you may use an id selector, document.getElementById("button_id") this would be way more convenient to work with

Answer 3

since your button is assigned an ID at runtime, you can't use the document.getElementById()

use document.querySelector() instead.

create a div and assign it an ID, then place your button inside it, use bellow code then;

<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>