使用JavaScript向Telegram发消息时getElementById返回null报错如何解决

核心报错原因 #

DOM加载顺序错误
你将JavaScript代码放在了<body>元素之前，浏览器按从上到下的顺序解析页面时，执行JS代码的阶段，id为myBtn的按钮还未被渲染到DOM树中，因此document.getElementById("myBtn")返回null，调用addEventListener方法就会抛出对应的类型错误。

可选修复方案二选一即可：

• 将整个script标签移动到</body>闭合标签之前，等待所有DOM元素加载完成后再执行JS逻辑
• 给现有JS代码外层包裹DOMContentLoaded事件监听，等待DOM加载完成后再执行绑定逻辑

其他隐藏问题 #

你现有的代码还存在两处会导致功能异常的问题：

1. 模板字符串语法错误：拼接message和url时你使用了普通单引号/双引号，无法解析${变量名}的插值语法，需要将包裹字符串的符号改为反引号 ` 才能正常读取变量值
2. 请求URL参数缺失分隔符：拼接的URL中chat_id=${chat_id}和text=${message}两个参数之间缺少&分隔符，会导致Telegram接口无法正确识别传入的参数

修复后完整代码 #

<!DOCTYPE html>
<html lang="en">
<body>
<form>
<input type="text" id="fname" name="fname" placeholder="fullname">
<input type="text" id="country" name="country" placeholder="country">
  <button id="myBtn" type="submit">Send</button>
</form>

<script>
document.getElementById("myBtn").addEventListener("click", function(e) {
  e.preventDefault(); 

  var fname = document.querySelector('input[name="fname"]').value;
  var country = document.querySelector('input[name="country"]').value;

  var message = `<html><br>| Fullname: ${fname} <br> | Country: ${country} <br></html>`;

  var token = "1750418914:AAGvauViE8H7CT7heYWqjDS00000000";
  var chat_id = -1001400000000;
  var url = `https://api.telegram.org/bot${token}/sendMessage?chat_id=${chat_id}&text=${message}&parse_mode=html`;

  var oReq = new XMLHttpRequest();
  oReq.open("GET", url, true);
  oReq.send();

  alert("Message sent");
}); 
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Jeff Docm