Javascript 以编程方式附加脚本时出现未捕获异常_Javascript_Html

Javascript 以编程方式附加脚本时出现未捕获异常

javascript html

Javascript 以编程方式附加脚本时出现未捕获异常,javascript,html,Javascript,Html,我以编程方式向DOM添加脚本，因为我必须从配置文件动态创建URL。当我执行代码时，我在Firefox web控制台中得到一个未捕获的异常：对象。这发生在init.js的最后一行：document.head.appendChildscriptElement。但是，脚本添加成功，我能够成功访问GoogleMapsAPI js/init.js： console.log('importing') import config from "./config.js"; import {callGoogle,

我以编程方式向DOM添加脚本，因为我必须从配置文件动态创建URL。当我执行代码时，我在Firefox web控制台中得到一个未捕获的异常：对象。这发生在init.js的最后一行：document.head.appendChildscriptElement。但是，脚本添加成功，我能够成功访问GoogleMapsAPI

js/init.js：

console.log('importing')
import config from "./config.js";

import {callGoogle, handleError} from "./api.js";

const init = () => {
    console.log('init')
    console.log('apiKey', config.google.apiKey)

    window.onerror = function (msg, url, line) {
        const err = `Uncaught Exception: ${msg} ${url} ${line}`;
        // handleError(err);
    }


    const handleSubmit = function (caller) {
        console.log('handleSubmit', window, caller)
        try {
            const address = caller.form.elements.address.value;
            const phone = caller.form.elements.phone.value;
            const fileElement = document.getElementById('file') //caller.form.elements.file.baseURI;
            const file = fileElement && fileElement.files && fileElement.files[0]

            console.log('handleSubmit', 'address', address, 'phone', phone, 'file', file);

            if (!address && !phone && !file) {
                throw new Error('Address, phone number, or file must be provided')
            }

            if ((address && phone) || (address && file) || (phone && file)) {
                return handleError(new Error('You can only enter in an address or a phone number or a file'))
            }

            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    console.log('!!!!! onload', e)
                    var fileContents = e.target.result;
                    callGoogle(config.google.apiKey, address, phone, fileContents)
                };
                reader.readAsText(file);

            } else {
                callGoogle(config.google.apiKey, address, phone, null)
            }
        } catch (err) {
            handleError(err)
        }
    }

    window.onload = () => {
        try {
            console.log('onload');
            var button = document.getElementById('submit');
            button.addEventListener('click', function () {
                console.log('adding button event listener');
                handleSubmit(this);
            });


        } catch (err) {
            handleError(err)
        }
    };

    var scriptElement = document.createElement("script");
    scriptElement.src = "https://maps.googleapis.com/maps/api/js?key=" + config.google.apiKey + "&libraries=places&callback=initMap";
    scriptElement.defer = true;
    console.log('document', document);
    document.head.appendChild(scriptElement);

};

export {
    init,
}

HTML:

由于我没有在Place Search Google Maps URL中使用initMap回调，我只是将其从查询参数中删除，以消除错误。

老实说，我们需要更多关于这方面的信息。该错误不是很详细，甚至可能与您的代码根本没有关系，而是附加脚本中的代码。我们没办法知道。@Something，你说得对。看起来它与Place Search Google Maps URL中的initMap回调有关。我没有使用回调，所以只要删除它就可以摆脱错误。哇嘿！很高兴听到这个结果：

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Google Maps Places to CSV</title>
    <meta name="description" content="The HTML5 Herald">
    <meta name="author" content="SitePoint">

    <!--<link rel="stylesheet" href="css/styles.css?v=1.0">-->

    <style>
        .message {
            color: red;
            font-size: 150%;
        }

        input, textarea, select, submit {
            width: 400px;
            margin: 0;

            -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
            -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
            box-sizing: border-box;
        }
    </style>
    <script src="https://unpkg.com/google-libphonenumber@3.2.3/dist/libphonenumber.js"></script>
</head>

<body>
<div id="map"></div>
<br/>
<h3>Google Maps Places: Get Business Name, Address, Phone Numbers, and Website by Searching by Addresses or Phone
    Number. Results are Exported to CSV
</h3>
<div class="message" id="message"></div>
<div id="form">
    <form>
        <div>
            <label for="address">Address:</label>
            <br/>
            <input type="text" id="address" name="address">
        </div>
        <br/>
        or
        <br/>
        <br/>
        <div>
            <label for="phone">Phone:</label>
            <br/>
            <input type="text" id="phone" name="phone">
        </div>
        <br/>
        or
        <br/>
        <br/>
        <div>
            <label for="file">CSV File (Header in first row: 'address' first column, 'phone' in the second). Addresses
                and phone numbers don't need to match in the same row. Only the address or phone number is needed for
                each place searched:</label>
            <br/>
            <input type="file" id="file" name="file">
        </div>

        <br/>
        <br/>
        <!--<input id="submit" type="submit" value="Submit">-->
        <button id="submit" type="button">Submit</button>
    </form>
</div>
<script type="module">
    import {init} from './js/init.js';

    console.log('init1', init)
    init()
</script>
</body>
</html>