Question

我正在尝试创建一个电子应用程序，以减小图像文件的大小，但遇到一些错误。首先我得到一个

未捕获的TypeError：无法读取null的属性'addEventListener'

在我的form.addEventListener('submit', (e) => {

和一个

未捕获的TypeError：无法设置未定义的属性“值” 在HTMLInputElement处。（materialize.min.js：6）在HTMLDocument.r（materialize.min.js：6）

我已经在网上查看，并且在堆栈溢出中如何处理此问题，但找不到答案，所以我决定发布问题，看看是否有人可以帮助我解决问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
    <link rel="stylesheet" href="css/all.min.css">
    <link rel="stylesheet" href="css/materialize.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>ImageShrink</title>
</head>
<body>
    <div class="container center-align">
        <h3><i class="fas fa-images"></i> ImageShrink</h3>
        <p>Choose an image to resize</p>
        <form id="image-from">
            <div class="file-field input-field">
                <div class="btn">
                    <span>Browse</span>
                    <input type="file" id="img" value="ok">
                </div>
                <div class="file-path-wrapper">
                    <input type="text" class"file-path validate" placeholder="Upload file">
                </div>
            </div>
            <p>
                <strong>Quality:</strong>
                <em>The lower the quality, the smaller the file size</em>
            </p>
            <p class="range-field">
                <input type="range" min="0" max="100" id="slider">
            </p>
            <input type="submit" value="Resize" class="btn black">
        </form>

        <div class="card output">
            <div class="card-content">
                Output Path: <span id="output-path"></span>
            </div>
        </div>
    </div>

    <script src="js/materialize.min.js"></script>
    <script>
        const path = require('path');
        const os = require('os');

        const form = document.getElementById('image-form');
        const slider = document.getElementById('slider');
        const img = document.getElementById('img');

        document.getElementById('output-path').innerText = path.join(os.homedir(), 'imageshrink')

        // on submit
        form.addEventListener('submit', (e) => {
            e.preventDefault()

            const imgPath = img.files[0].path
            const quality = slider.value
            
            console.log(imgPath, quality)
        })
    </script>
</body>
</html>

我不知道我错了，有人可以帮我吗

0 个答案: