浏览器JS未加载，onclick函数无法调用问题求助

1. 核心环境错误：SQLite3 无法在浏览器中直接运行 #

sqlite3是Node.js专属的数据库库，浏览器环境不支持直接调用它。你需要把数据库操作逻辑移到后端服务中，前端通过HTTP请求（如fetch）调用后端接口来完成数据交互。

2. 脚本加载与作用域问题 #

• 你的testing.js使用了import语法（ES模块），但HTML中脚本的type="common.js"是无效值，浏览器会直接忽略该脚本。需改为type="module"。
• ES模块中的函数默认是模块私有，不会挂载到全局window对象，因此HTML中的onclick="submitToDB()"无法找到该函数。建议在模块内部直接绑定事件监听，而非依赖全局函数。

3. HTML结构与表单行为问题 #

• <title>标签必须放在<head>内部，当前放在<body>里不符合HTML规范。
• 表单内的按钮默认类型为submit，点击后会触发表单提交、页面刷新，导致函数执行后立刻刷新页面，看起来像未生效。需阻止表单默认提交行为，或把按钮类型设为button。

修正后的代码示例 #

前端HTML（index.html）

<!DOCTYPE html>
<html>
<head>
  <title>hello</title>
  <!-- 以ES模块方式加载脚本 -->
  <script src="testing.js" type="module"></script>
</head>
<body>
  <header></header>
  <form id="submitForm">
    <input id="inputBox" type="text" />
    <button id="submitBtn">Submit</button>
  </form>
</body>
</html>

前端脚本（testing.js）

document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('submitForm');
  const inputBox = document.getElementById('inputBox');

  form.addEventListener('submit', (e) => {
    // 阻止表单默认提交刷新行为
    e.preventDefault();
    console.log("button pressed: " + inputBox.value);
    
    // 调用后端接口提交数据
    fetch('http://localhost:3000/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ value: inputBox.value })
    })
    .then(res => res.text())
    .then(msg => console.log(msg))
    .catch(err => console.error(err));
  });
});

后端服务（server.mjs）

用Node.js+Express搭建后端，处理数据库操作：

import express from 'express';
import sqlite3 from 'sqlite3';
import cors from 'cors'; // 解决跨域问题

const app = express();
app.use(express.json());
app.use(cors());

// 连接SQLite数据库
const db = new sqlite3.Database('./mydb.db');

// 初始化数据表（仅首次运行时创建）
db.run('CREATE TABLE IF NOT EXISTS data (id INTEGER PRIMARY KEY AUTOINCREMENT, value TEXT)');

// 处理前端提交请求的接口
app.post('/submit', (req, res) => {
  const { value } = req.body;
  db.run('INSERT INTO data (value) VALUES (?)', [value], (err) => {
    if (err) {
      return res.status(500).send('数据提交失败：' + err.message);
    }
    res.send('数据提交成功');
  });
});

// 启动服务器
app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

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