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

Question

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>

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

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

非常感谢你:)

标签： javascriptdjango

Answer 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 = '';
};