I'm just a beginner, but can someone help me out?

I have an HTML page with a couple of input fields, and I want the fields to be cleared when the page is refreshed.

My HTML looks like this:

<input type='text' id='input_field' value=''>

Then, toward the beginning of my script, there's this:

document.getElementById('input_field').value = '';

This works fine in Firefox; when the page is refreshed, the value is emptied and the field is cleared.

It does not work in Microsoft Edge; when the page is refreshed, the actual value is emptied, but the contents of the field remain.

I've also tried wrapping my input element(s) in a form element, and using JavaScript to reset the form, but the results are the same.

As you can see, I've kept the value attribute in the HTML, but only for purposes of demonstration and experimentation. Omitting it has no effect in either browser. However, if I leave the HTML attribute but omit the JavaScript statement, both browsers behave differently: in Edge, the contents of the field catch up to the actual value (i.e., the field clears), but only after the page is refreshed twice; and in Firefox, this fails to update the value at all, no matter how many times the page is refreshed.

Finally, if I edit the source in any way and then reload the page in Edge, it empties the actual value and also clears the field, but only on that initial reload. After that, the problem persists. This makes me wonder if it's a cache issue.

Any help or suggestions?