I am unable to execute my valid function inside the addblogger.js using type module

Question

I am using script type module to execute some function which is written in addblogger.js.

This is my html code:-

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AddBlogging</title>
    <!-- Custom styles for this template -->
    <link href="AddBloggsstylesheet.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

    <script type="module" src="./js/blogger.js " async></script>

    <script type="module" src="./js/addblogging.js " async></script>



</head>

<body>

    <hr />
    <div class="container ">
        <form class="form-group " action="AddBloggs.html " onsubmit="valid()">
            <h2>Blogger Page</h2>
            <label>Title</label>
            <input type="text " name="Title " id="title " class="form-control " /><br />
            <label>TextArea</label>
            <textarea name="comment " id="textarea1 " placeholder="Text " class=" form-control "></textarea>
            <br />
            <label>Image</label>
            <input type="file" name="myImage" id="myimage" accept="image/png, image/gif, image/jpeg" class="form-control " />
            <br />
            <br />
            <br />

            <!-- <input type="submit " value="submit " class="btn btn-success " /> -->
            <input type="submit" value="submit" class="btn btn-success  " />
            <input type="reset" value="reset" class="btn btn-info " />
        </form>
    </div>
    <hr />

    <div class="container ">
        <div class="row row-cols-auto ">

            <div class="col ">
                <div class="rightcolumn ">
                    <h2>TITLE HEADING</h2>
                    <h5>Title description, Sep 2, 2017</h5>
                    <!-- <div class="fakeimg " style="height:200px; ">Image</div> -->
                    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                </div>

            </div>

        </div>
    </div>




</body>

</html>

Now I create a class blogger type. Hare blogger.js code:-

class blogger {
    constructor(
        title,
        textarea,
        image
    ) {
        this.title = title;
        this.textarea = textarea;
        this.image = image;
    }

}

export default blogger;

Now I want to create a list of blogger object using submit button in above html code:-

Example:-addblogging.js

import blogger from "./blogger.js";


let listofobjects = [];

const validate =
    function() {

        alert("Welcome to External JS file")
        let title = document.getElementById("title").value;


        let textarea = document.querySelector("#textarea1").value;


        let image = document.getElementById("myimage").value;

        var obj = new blogger(

            title,
            textarea,
            image
        );

        listofobjects.push(obj);




        document.write(listofobjects);
    }

But somehow validate code not executed.I call addblogger.js using (type = module).When I remove import statement from addblogger.js and bypass other code apart from alert staement...I got alert messege.

Could you please help in this regards,why I am unable to execute valid() funtion.

Here is the picture valid funtion seems like it is not called.

score 0 · Answer 1 · answered Aug 02 '21 at 14:10

0

Try adding "blogger.js" as a module to your index.html!

I tried it and got "Cannot GET /stack01/AddBloggs.html".

I hope it works!

answered Aug 02 '21 at 14:10

Sayed Bondok

1
1

I have added blogger module but not helpful:- – SM2019 Aug 03 '21 at 04:42
I have added blogger module but not helpful.Have you got alert messege.I check response in browser I got this:-http://127.0.0.1:5501/SimplyBlogging/AddBloggs.html?Title+=SUBRATA+MITRA&comment+=I+am+online&myImage+=Subrata.jpg.Why this += is comming. this is also strange. – SM2019 Aug 03 '21 at 04:58

score 0 · Answer 2 · answered Aug 03 '21 at 04:45

I have tried with this but this is not helpful.

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AddBlogging</title>
    <!-- Custom styles for this template -->
    <link href="AddBloggsstylesheet.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

    <script type="module" src="./js/blogger.js "></script>

    <script type="module" src="./js/addblogging.js " async> </script>


</head>

I don't why this valid function is not enable:- see the picture:- valid function

devtye · Accepted Answer · 2021-08-03T19:27:46.200

UPDATE:

Since you are using the server-based solution. I can only think of one issue with your problem.

your addblogging.js is a module, and so validate is not globally available, but it is available within addblogging.js

however, in your HTML you are trying to access it globally.

Option1:

you can tie validate function to the window and then reference it in your HTML.

Add to addblogger.js window.validate = validate;

in your HTML refer to onsubmit="window.validate()"

I got this working with modules, but I'm not sure if this preferred solution you want.

Option 2: I like this solution bit better. This requires no global assignment.

in your HTML add id:

<form class="form-group" id="add-blog-form">

then in your addblogging.js . This is adding the onclick function to the element where the validate is available.

var form = document.getElementById('add-blog-form');
form.onsubmit = validate;

I checked both solutions, it seems to work.

ORIGINAL:

You will need to host the file via a static server. Are you currently doing that?

Modules work only via HTTP(s), not locally If you try to open a web-page locally, via file:// protocol, you’ll find that import/export directives don’t work. Use a local web-server, such as static-server or use the “live server” capability of your editor, such as VS Code Live Server Extension to test modules.

more info -> https://javascript.info/modules-intro

Or you have to remove it. Steps to do that here.

I got this to work with few tweeks:

first I change script tags to following:

    <script src="./js/blogger.js"></script>
    <script src="./js/addblogging.js"></script>

In your form ids have extra space after. Please remove those spaces

<input type="text" name="Title" id="title" class="form-control " /><br />
<textarea name="comment" id="textarea1" placeholder="Text" class=" form-control "></textarea>
<input type="file" name="myImage" id="myimage" accept="image/png, image/gif, image/jpeg " class="form-control " />

this change is to make sure you are able to target elements via js.

remove the export default blogger; from blogger.js

remove import blogger from "./blogger.js";

There is also an option which I did this example, which to preventDefault and not redirect like usual form action. That is completely up to you.

Cheers!

Thank you for your response.I think I am using "GO Live" option.If I remove import statement how can I call blogger class to my addblogging js because I need create objects of blogger type .Let me read the module document if that will help.Thank you f0r your suggestion. — SM2019, Aug 03 '21 at 17:21
@SM2019 btw I'm sure this is the issue... I found a similar question -> https://stackoverflow.com/questions/53630310/use-functions-defined-in-es6-module-directly-in-html — devtye, Aug 03 '21 at 18:21
Yes , you are right.If I need to excute that valid function, I need to write code inside the module similar like:-document.querySelector('button').addEventListener('click', hello);.ok I have other purpose .Thank you for your support. — SM2019, Aug 04 '21 at 04:24

score 0 · Answer 4 · answered Aug 04 '21 at 05:03

Finally I got the answare as per Mr. devtye suggestion. Update:-

import blogger from "./blogger.js";


let listofobjects = [];





const validate =
    function valid() {


        alert("Welcome to External JS file")
        let title = document.getElementById("title").value;


        let textarea = document.querySelector("#textarea1").value;


        let image = document.getElementById("myimage").value;

        var obj = new blogger(

            title,
            textarea,
            image
        );

        listofobjects.push(obj);

    }


var form = document.getElementById('add-blog-form');
form.onsubmit = validate;

console.log(listofobjects[0]);

I am unable to execute my valid function inside the addblogger.js using type module

4 Answers4