electron 未捕获的类型错误：无法读取null的属性(阅读'onclick')

niwlg2el 于 2022-12-08 发布在 Electron

关注(0)|答案(1)|浏览(293)

我收到一个错误：Uncaught TypeError: Cannot read properties of null (reading 'onclick')在以下位置：https://www.youtube.com/watch?v=3yqDxhR2XxE&t=4s
这里是main.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <link rel="stylesheet" href="index.css" />
    <script defer src="render.js"></script>
  </head>
  <body>
    <h1>Electron recorder</h1>
    <video></video>

    <button id="startBtn" class="button is-primary"></button>
    <button id="stopBtn" class="button is-warning"></button>

    <hr />
    <button id="videoSelectionBtn" class="button is-text"></button>
  </body>
</html>

在render.js中，以下代码行似乎有问题：

console.log(videoSelectionBtn)          // prints NULL 
videoSelectionBtn.onclick() = getVideoResources;

整个文件

// Buttons
const videoElement = document.querySelector('video');
const startBtn = document.querySelector('startBtn');
const stopBtn = document.querySelector('stopBtn');
const videoSelectionBtn = document.querySelector('videoSelectionBtn');

console.log(videoSelectionBtn)          // prints NULL 
videoSelectionBtn.onclick() = getVideoResources;

const { desktopCapturer, remote } = require('electron')
const { Menu } = remote;

async function getVideoResources() {
    const inputSource = await desktopCapturer.getSources({
        types: ['window', 'screen']
    })

    const videoOptionsMenu = Menu.buildFromTemplate(
        inputSource.map(source => {
            return {
                label: source.name,
                click: () => selectSource(source) 
            };
        })
    );

    videoOptionsMenu.popup();
}

async function selectSource(source) {
    videoSelectionBtn.innerText = source.name;
    const constraints = {
        audio: false,
        video: {
            mandatory: {
                chromeMediaSource: 'dekstop',
                chromeMediaSourceId: source.id
            }
        }
    };

    const stream = await navigator.mediaDevices.getUserMedia(constraints);

    videoElement.srcObject = stream;
    videoElement.play();
}

谁能解释一下-
1.如何去调试这样的示例。不同的东西，我可以检查之前，张贴在这里
1.实际的根本原因是什么
PS：错误似乎一般，我已经通过职位（没有太多的帮助）：

electron

来源：https://stackoverflow.com/questions/73408327/uncaught-typeerror-cannot-read-properties-of-null-reading-onclick