Forum:

HTML Pages with CSS and JavaScript

Cannot understand why function is not detected in HTML

D.J. Quavern

Rancher

Posts: 304

I like...

posted 1 year ago

Hello!

Class assignment again:

I have an html page with different test-functions. One of those is to call a javascript function from a button.
The javascript file is in an js-folder, which is in an asset folder.
I get the error:
(index):55 Uncaught ReferenceError: fillForm is not defined
at HTMLButtonElement.onclick ((index):55)

when I am trying to fill the oneInput form.
Does anyone knows why and care to explain?

That's the main HTML:

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="">
    <title>JavaScript</title>
    <link rel="stylesheet" href="assets/styles/index.css">
    <script type="module" src="assets/js/exercise-5.js"></script>
</head>

<h2>This is my first text</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
        Reiciendis, saepe odit doloribus debitis accusantium ipsam error laboriosam natus dolorem earum in
        iure! Sapiente excepturi placeat ex ut minima reprehenderit commodi!
    </p>

<h2 id="h2">This is my second text</h2>
    <p class="important-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit.
        Reiciendis, saepe odit doloribus debitis accusantium ipsam error laboriosam natus dolorem earum in
        iure!

<h2>This is my first list</h2>
        <ol>
            <li class="item">Första</li>
            <li class="item">Andra</li>
            <li class="item">Tredje</li>
            <li class="item" id="fifth">Femte</li>
            <li class="item">Sjätte</li>
        </ol>

<h2>This is my second list</h2>
        <ul>

</ul>

<h2 id="h2">This is my third text</h2>
        <p class="third-text">
            Reiciendis, saepe odit doloribus debitis accusantium ipsam error laboriosam natus dolorem earum in
            iure! Sapiente excepturi placeat ex ut minima reprehenderit commodi!
        </p>
        <p class="hole">
        </p>
        <input id="oneInput">
        <button type="button" onclick="fillForm()">Submit</button>
        <p id="comment"></p>

</body>

</html>

That's the javascript located in assets/js

addEventListener('load', main);
let fruits = ["Banana", "Orange", "Grizzly", "Zimbabwe", "Apple", "Mango"];

function sortUnsorted(dummy){
    dummy = dummy.sort();
    alert(dummy);
}

"If you lie to the computer, it will get you."
Favorite Granny's Wisdom Pearl

Ron McLeod

Marshal

Posts: 3180

466

I like...

posted 1 year ago

It seems like your JS content is not being loaded.

Have you tried enabling the browser's developer tools to see it is logging errors or reporting anything else which might provide a clue?

Ron McLeod

Marshal

Posts: 3180

466

I like...

posted 1 year ago

Are you trying really to use ES6 modules? I don't really know much about this, but I thought it required exporting the module's functions, and then importing them into the code which calls them.

May try changing the type attribute to specify plain old javascript??

D.J. Quavern

Rancher

Posts: 304

I like...

posted 1 year ago

Dear Ron,
Thank you for your reply!

I did have error 304 (the page is not loading) for a while, but then resolved (itself, mostly! I am using live-server and it appears I have to save twice sometimes....). The javascript page appears to be loading now.

I tried to import in html, and export the function from the js file with :

but I have now:
exercise-5.js:33 Uncaught SyntaxError: Unexpected token export

(I also added the change you suggested:
)

Screenshot-2019-07-08-at-05.19.08.png

"If you lie to the computer, it will get you."
Favorite Granny's Wisdom Pearl

Ron McLeod

Marshal

Posts: 3180

466

I like...

posted 1 year ago

If you are going to specify type="text/javascript" and not use the module system, then remove the export from the fillForm ~~method~~ function.

I just gave your code a quick try and it did work ...

D.J. Quavern

Rancher

Posts: 304

I like...

posted 1 year ago

Thank you very much Ron.

I have still no clue why stuff work or don't, but it's really nice to get it rolling!

"If you lie to the computer, it will get you."
Favorite Granny's Wisdom Pearl

Put the moon back where you found it! We need it for tides and poetry and stuff. Like this tiny ad:

Thread Boost feature

https://coderanch.com/t/674455/Thread-Boost-feature