Function in script not being executed (HTML)

Question

I have this function "filename" which gets the name of a file and changes all text with the attribute class='filename' to the name of the file.

For example, in example.html, <p class='filename'></p> would read "example".

Here is the function, which I placed at the end of the body tag (I got the code from here if it helps):

<script type="text/javascript">
function filename() {
    var url = window.location.pathname; // gets the pathname of the file
    var str = url.substring(url.lastIndexOf('/')+1); // removes everything before the filename
    str = str.substring(0, str.length - 5); // removes the extension
    var filename = str.replace(/%20/g, " "); // if the filename has multiple words separated by spaces, browsers do not like that and replace each space with a %20. This replace %20 with a space.
    document.getElementsByClassName("filename").innerHTML = filename;
}
</script>

In example.html, I added the code <title class="filename"></title> and also <p class="filename"></p>, but the function does not work. I tried adding onload="filename()" to both the body and head tags but nothing changed.

`document.getElementsByClassName("filename")` returns a list of elements with that class name. A list of elements does not have a property named `innerHTML`. — Heretic Monkey, Jun 14 '21 at 17:46
I thing the `DOM` is not ready and you have already called your function, try the example below. — snd, Jun 14 '21 at 17:50

score -1 · Answer 1 · answered Jun 14 '21 at 17:50

Try this :

document.addEventListener('DOMContentLoaded', function() {
    filename();
});

function filename() {
    var url = window.location.pathname; // gets the pathname of the file
    var str = url.substring(url.lastIndexOf('/')+1); // removes everything before the filename
    str = str.substring(0, str.length - 5); // removes the extension
    var filename = str.replace(/%20/g, " "); // if the filename has multiple words separated by spaces, browsers do not like that and replace each space with a %20. This replace %20 with a space.
    document.getElementsByClassName("filename").innerHTML = filename;
}

Function in script not being executed (HTML)

1 Answers1