javascript - 我无法使用类型模块在 addblogger.js 中执行我的有效函数

问题描述

我正在使用脚本类型模块来执行一些用 addblogger.js 编写的函数。

这是我的 html 代码：-

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

现在我创建一个类博客类型。野兔 blogger.js 代码：-

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

}

export default blogger;

现在我想使用上面 html 代码中的提交按钮创建一个博客对象列表：-

示例：-addblog.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);
    }

但是以某种方式验证未执行的代码。我使用 (type = module) 调用 addblogger.js。当我从 addblogger.js 中删除导入语句并绕过除警报状态之外的其他代码时...我收到警报消息。

您能否在这方面提供帮助，为什么我无法执行 valid() 函数。

这是图片有效的功能似乎没有被调用。

标签： javascripthtmljavascript-objects

javascript - 我无法使用类型模块在 addblogger.js 中执行我的有效函数

问题描述

解决方案

推荐阅读