未捕获的类型错误：无法读取 null 的属性“发送”答案

【问题标题】：Uncaught TypeError: Cannot read property 'send' of null未捕获的类型错误：无法读取 null 的属性“发送”
【发布时间】：2021-06-11 07:55:55
【问题描述】：

document.getElementById('id_chat_message_input').focus();
document.getElementById('id_chat_message_input').onkeyup = function(e) {
    if (e.keyCode === 13 && e.shiftKey) {  // enter + return
        // Handled automatically by textarea
    }
    else if(e.keyCode === 13 && !e.shiftKey){ // enter + !return
        document.getElementById('id_chat_message_submit').click();
    }
    console.log("received message");
};

document.getElementById('id_chat_message_submit').onclick = function(e) {
    const messageInputDom = document.getElementById('id_chat_message_input');
    const message = document.getElementById('id_chat_message_input').value;
    console.log(message);
    chatSocket.send(JSON.stringify({
        "command": "send",
        "message": message,
        "room": roomId
    }));
    messageInputDom.value = '';
};




<div class="card-body p-1">
                <div class="d-flex flex-column" id="id_chat_log_container">
                
                    <div class="d-flex flex-row justify-content-center" id="id_chatroom_loading_spinner_container">
                        <div class="spinner-border text-primary"  id="id_chatroom_loading_spinner" role="status"  style="display: none; ">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
                    <div class="d-flex chat-log" id="id_chat_log">
                        
                    </div>
                    <span class="{% if not debug %}d-none{% endif %} page-number" id="id_page_number">1</span>
                    
                    <div class="d-flex flex-row chat-message-input-container">
                        <textarea class="flex-grow-1 chat-message-input" id="id_chat_message_input"></textarea>
                        <button class="btn btn-primary chat-message-submit-button">
                            <span id="id_chat_message_submit" class="material-icons">send
                            </span>
                        </button>
                    </div>
                </div>
            </div>

错误：未捕获的类型错误：无法读取 null 的属性“发送” 在 HTMLSpanElement.document.getElementById.onclick

我正在使用 django 做聊天应用程序。当我输入一条消息并单击发送时，我收到此错误，它没有发送。

非常感谢你:)

【问题讨论】：

chatSocket 是 null - 找出原因。
Chatsocket 为空。请显示其他参考资料和您对chatsocket的定义声明。

标签： javascript django

【解决方案1】：

可能是您尝试在没有值的情况下发送消息值。

所以你可以使用 if 语句检查是否有值，如果没有返回值。

document.getElementById('id_chat_message_input').focus();
document.getElementById('id_chat_message_input').onkeyup = function(e) {
  if (e.keyCode === 13 && e.shiftKey) { // enter + return
    // Handled automatically by textarea
  } else if (e.keyCode === 13 && !e.shiftKey) { // enter + !return
    document.getElementById('id_chat_message_submit').click();
  }
  console.log("received message");
};

document.getElementById('id_chat_message_submit').onclick = function(e) {
  const messageInputDom = document.getElementById('id_chat_message_input');
  const message = document.getElementById('id_chat_message_input').value;
  if (!message) return; // CHECK IF THERE IS A VALUE HERE
  console.log(message);
  chatSocket.send(JSON.stringify({
    "command": "send",
    "message": message,
    "room": roomId
  }));

  messageInputDom.value = '';
};

【讨论】：