I am practice ipcRenderer but I can not see the result which i think would happen

I am a student and actually English is not my native language so there must be lots of grammer problem I’m so sorry.And just like what I wrote on title I’m learning how to use ipcRenderer but it didn’t work.I mean when I press the button the application doesn’t quit.And I have try just console.log(), when I press button.It of course can work.However,After I addrequire("electron").ipcRenderer.send('close').Not only when i press button the application do not quit, but also it don’t cout any thing.

Here are my program

合庫8858.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style/sidebar.css">
    <link rel="stylesheet" href="style/合庫8858.css">
    <title>合庫8858</title>
</head>
<body>
    <button class="te"><p>close</p></button>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="module" src="script/合庫8858.js"></script>
</body>
</html>

合庫8858.js:

$(".te").on('click', ()=>{
    require("electron").ipcRenderer.send('close')
    $(".te").css('background-color', 'black')

    
    
})

main.js:

const { app, BrowserWindow, ipcMain} = require('electron')
const path = require('node:path')
//const { electron } = require('node:process')
const electron = require('electron')
const { ipcRenderer } = require('electron')




function createWindow () {
  const loading = new BrowserWindow({
    width:600,
    height:400,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    },
    frame:false,
    show:false
  })
  loading.loadFile('waiting.html')
  loading.once('ready-to-show', () =>{
    loading.show()
  })
  





  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    },
    show:false,
    frame:true
  })
  
  electron.Menu.setApplicationMenu(null)
  mainWindow.loadFile('合庫8858.html')
  
  mainWindow.once('ready-to-show', () =>{
    setTimeout(() => {
      //mainWindow.maximize()
      loading.hide()
      loading.close()
      mainWindow.show()
    }, 500);  
  })



}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

ipcMain.on('close', ()=>{
  app.quit()
})



I am really confuse that what happen.Thank you for helping me.

Hope someone can tell me what wrong or if I make some silly mistake.
I have ask this question one time before, but I don’t know who closed my question.
Actually, I am new here.Does it offen happen(question be closed).This time I try to make my question more detailed.

Please somebody help me solve this problem.and don’t ban the question.QQ