如何在JavaScript函数内部调用自身且页面不刷新？getDomain未定义报错怎么解决

报错与取值错误的根源 #

1. Uncaught ReferenceError: getDomain is not defined报错：通过setAttribute设置的onclick属性，内部代码执行时会在全局作用域查找getDomain函数，如果你定义的getDomain不在全局作用域（比如封装在其他函数/闭包内），全局就找不到该函数。
2. 无法正确获取文本框值：你写的getDomain('txtDomain.value')给参数加了单引号，会直接把txtDomain.value作为纯字符串传入，不会读取输入框的实际值；且全局作用域也无法直接访问函数内部定义的txtDomain变量。

最优解决方案 #

推荐使用addEventListener绑定点击事件，避免全局作用域查找问题，也无需拼接字符串减少符号错误，同时天然支持阻止页面刷新：

// 提前获取你代码中的queryDiv节点，示例：const queryDiv = document.getElementById('query-area')
var getDomain = (domainName) => {
  console.log(domainName);
  // 可选判断：避免重复生成输入框和按钮，不需要可以删除
  if (!document.getElementById('txtDomain')) {
    let txtDomain = document.createElement('input');
    txtDomain.type = "text";
    txtDomain.setAttribute("id","txtDomain");
    queryDiv.appendChild(txtDomain);
    
    let btnDomain = document.createElement('button');
    btnDomain.innerHTML = "Sorgula";
    // 改用事件监听绑定点击逻辑
    btnDomain.addEventListener('click', (e) => {
      // 阻止默认行为，无论按钮是否在form标签内都不会触发页面刷新
      e.preventDefault();
      // 实时读取输入框的当前值传入函数
      const inputDomain = document.getElementById('txtDomain').value.trim();
      getDomain(inputDomain);
    })
    queryDiv.appendChild(btnDomain);
  }

  // 此处写你发送请求的业务逻辑
}

如果你一定要用onclick属性绑定的兼容方案 #

需要满足两个条件：

1. 把getDomain挂载到全局对象上，在函数定义后加一行：window.getDomain = getDomain
2. 修改onclick的传参逻辑，去掉参数的引号，改为直接获取输入框值：

btnDomain.setAttribute("onclick","getDomain(document.getElementById('txtDomain').value); return false;");

该写法需要手动处理作用域和字符串拼接，更容易出错，不推荐使用。

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