使用javascript动态添加表单输入元素并处理事件

Question

我正在尝试使用spring创建一个简单的实时发布和评论系统。我需要在每条留言后动态创建输入表单以发表评论。当我在评论输入字段中发送消息时，会发生此错误：

Uncaught TypeError: Cannot read property 'addEventListener' of null

这是因为

var commentForm = null;

在创建元素时 javascript代码是这样的：

'use strict';

var usernamePage = document.querySelector('#username-page');
var chatPage = document.querySelector('#chat-page');
var usernameForm = document.querySelector('#usernameForm');
var messageForm = document.querySelector('#messageForm');
var messageInput = document.querySelector('#message');
var commentInput = document.querySelector('#comments');
var messageArea = document.querySelector('#messageArea');
var connectingElement = document.querySelector('.connecting');
var commentForm = null;

var stompClient = null;
var username = null;

var colors = [
    '#2196F3', '#32c787', '#00BCD4', '#ff5652',
    '#ffc107', '#ff85af', '#FF9800', '#39bbb0'
];

function connect(event) {
    username = document.querySelector('#name').value.trim();

    if(username) {
        usernamePage.classList.add('hidden');
        chatPage.classList.remove('hidden');

        var socket = new SockJS('/ws');
        stompClient = Stomp.over(socket);

        stompClient.connect({}, onConnected, onError);
    }
    event.preventDefault();
}


function onConnected() {
    // Subscribe to the Public Topic
    stompClient.subscribe('/topic/public', onMessageReceived);

    // Tell your username to the server
    stompClient.send("/app/chat.addUser",
        {},
        JSON.stringify({sender: username, type: 'JOIN'})
    )

    connectingElement.classList.add('hidden');
}


function onError(error) {
    connectingElement.textContent = 'Could not connect to WebSocket server. Please refresh this page to try again!';
    connectingElement.style.color = 'red';
}


function sendMessage(event) {
    var messageContent = messageInput.value.trim();

    if(messageContent && stompClient) {
        var chatMessage = {
            sender: username,
            content: messageInput.value,
            type: 'CHAT'
        };

        stompClient.send("/app/chat.sendMessage", {}, JSON.stringify(chatMessage));
        messageInput.value = '';
    }
    event.preventDefault();
}

function sendCommnet(event){
    var commentContent = commentInput.value.trim();

    if(commentContent && stompClient) {
        var chatMessage = {
            sender: username,
            content: commentInput.value,
            type: 'COMMENT'
        };
        console.log(JSON.stringify(chatMessage));
        stompClient.send("/app/chat.sendComment", {}, JSON.stringify(chatMessage));
        commentInput.value = '';
    }
    event.preventDefault();
}


function onMessageReceived(payload) {
    var message = JSON.parse(payload.body);

    var messageElement = document.createElement('li');

    if(message.type === 'JOIN') {
        messageElement.classList.add('event-message');
        message.content = message.sender + ' joined!';
        var textElement = document.createElement('p');
        var messageText = document.createTextNode(message.content);
        textElement.appendChild(messageText);

        messageElement.appendChild(textElement);
    } else if (message.type === 'LEAVE') {
        messageElement.classList.add('event-message');
        message.content = message.sender + ' left!';
        var textElement = document.createElement('p');
        var messageText = document.createTextNode(message.content);
        textElement.appendChild(messageText);

        messageElement.appendChild(textElement);
    } else if (message.type === 'CHAT') {
        messageElement.classList.add('chat-message');

        var avatarElement = document.createElement('i');
        var avatarText = document.createTextNode(message.sender[0]);
        avatarElement.appendChild(avatarText);
        avatarElement.style['background-color'] = getAvatarColor(message.sender);

        messageElement.appendChild(avatarElement);

        var usernameElement = document.createElement('span');
        var usernameText = document.createTextNode(message.sender);
        usernameElement.appendChild(usernameText);
        messageElement.appendChild(usernameElement);

        var textElement = document.createElement('p');
        var messageText = document.createTextNode(message.content);
        textElement.appendChild(messageText);

        messageElement.appendChild(textElement);

        var commentElement = document.createElement('form');
        commentElement.id="commentForm";
        commentElement.name="commentForm";
        var formElement = document.createElement('input');
        formElement.type = "text";
        formElement.id="comments";
        formElement.placeholder = "Leave a Comment ...";
        var formButton = document.createElement('Button');
        formButton.type="submit";
        formButton.className ="comment";
        formButton.textContent = "Send";
        commentForm = document.querySelector('#commentForm');
        commentElement.appendChild(formElement);
        commentElement.appendChild(formButton);
        messageElement.appendChild(commentElement);

    }
    else if (message.type === 'COMMENT'){


    }
    else if (message.type === 'REPLY') {}
    else
    {}




    messageArea.appendChild(messageElement);
    messageArea.scrollTop = messageArea.scrollHeight;
}


function getAvatarColor(messageSender) {
    var hash = 0;
    for (var i = 0; i < messageSender.length; i++) {
        hash = 31 * hash + messageSender.charCodeAt(i);
    }

    var index = Math.abs(hash % colors.length);
    return colors[index];
}

usernameForm.addEventListener('submit', connect, true)
messageForm.addEventListener('submit', sendMessage, true)
commentForm.addEventListener('submit', sendCommnet, true)