javascript - chrome 未捕获异常错误 : cannot set property 'onclick' of null

Question

我将 HTML5 和 javascript 应用程序放在一起，但由于某种原因，我从 chrome 收到异常错误，我不知道为什么。

Uncaught exception error from chrome: cannot set property 'onclick' of null

这是我的 html

<section class="experiment">
<div class="inner" style="height: 5em;">
<audio id="audio" autoplay controls></audio>
<button class="recorder-btn" id="record-audio">Record</button>
<button class="recorder-btn" id="stop-recording-audio" disabled>Stop</button>
<h2 id="audio-url-preview"></h2>
</div>
</section>

这是我的 JS

   function getByID(id) {
    return document.getElementById(id);
}

var recordAudio = getByID('record-audio'),
    stopRecordingAudio = getByID('stop-recording-audio');

var audio = getByID('audio');


var audioConstraints = {
    audio: true,
    video: false
};

var audioStream;
var recorder;

recordAudio.onclick = function() {
    if (!audioStream)
        navigator.getUserMedia(audioConstraints, function(stream) {
            if (window.IsChrome) stream = new window.MediaStream(stream.getAudioTracks());
            audioStream = stream;

            audio.src = URL.createObjectURL(audioStream);
            audio.muted = true;
            audio.play();

            // "audio" is a default type
            recorder = window.RecordRTC(stream, {
                type: 'audio'
            });
            recorder.startRecording();
        }, function() {
        });
    else {
        audio.src = URL.createObjectURL(audioStream);
        audio.muted = true;
        audio.play();
        if (recorder) recorder.startRecording();
    }

    window.isAudio = true;

    this.disabled = true;
    stopRecordingAudio.disabled = false;
};

Answer 1

鉴于您的代码仅使用 onclick 一次，很明显 recordAudio 为 null。 为什么？您的问题仅供猜测。

可能是因为您的 JavaScript 不在页面底部，并且当它运行时，DOM 树尚未构建。