admin管理员组

文章数量:1397102

I want to set up a very basic project with Vite vanilla

I scaffolded the project with yarn create @vitejs/app

Now I adjusted the following files:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <link rel="stylesheet" href="style.css">
    <script type="module" src="main.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>Chat</h1>
        Message
      <br/>
      <textarea placeholder="Message"></textarea>
      <button onclick="sendMessage()">Send</button>
    </div>
  </body>
</html>

style.css


h1 {
  color: blue;
}

main.js

console.log('hello main.js')

const chatInput = document.querySelector('textarea')

export function sendMessage() {
    let message =  chatInput.value
    window.alert(message)
    chatInput.value = "";
}

I am now getting the following error in the browser console when I click the "Send" button

client.ts:13 [vite] connecting...
main.js:35 hello main.js
client.ts:43 [vite] connected.
(index):18 Uncaught ReferenceError: sendMessage is not defined
    at HTMLButtonElement.onclick ((index):18)

Workaround

I can work around the problem by adding an event listener to the button instead of adding the onclick directly in the HTML

const sendButton = document.querySelector('button')
sendButton.addEventListener('click', sendMessage)

But why can't you use the first approach with onclick="sendMessage()" within the HTML?

I want to set up a very basic project with Vite vanilla

I scaffolded the project with yarn create @vitejs/app

Now I adjusted the following files:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <link rel="stylesheet" href="style.css">
    <script type="module" src="main.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>Chat</h1>
        Message
      <br/>
      <textarea placeholder="Message"></textarea>
      <button onclick="sendMessage()">Send</button>
    </div>
  </body>
</html>

style.css


h1 {
  color: blue;
}

main.js

console.log('hello main.js')

const chatInput = document.querySelector('textarea')

export function sendMessage() {
    let message =  chatInput.value
    window.alert(message)
    chatInput.value = "";
}

I am now getting the following error in the browser console when I click the "Send" button

client.ts:13 [vite] connecting...
main.js:35 hello main.js
client.ts:43 [vite] connected.
(index):18 Uncaught ReferenceError: sendMessage is not defined
    at HTMLButtonElement.onclick ((index):18)

Workaround

I can work around the problem by adding an event listener to the button instead of adding the onclick directly in the HTML

const sendButton = document.querySelector('button')
sendButton.addEventListener('click', sendMessage)

But why can't you use the first approach with onclick="sendMessage()" within the HTML?

  • javascript
  • html
  • vite
Share Improve this question edited May 13, 2021 at 12:18 basti500 asked May 13, 2021 at 12:09 basti500basti500 8949 silver badges27 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 8

Main.js is added as a type=module. Module creates a scope to avoid name collisions.

You can either expose your function to the window object

import { sendMessage } from './events.js'
window.sendMessage = sendMEssage

Or use the addEventListener method to bind the handler like you're doing.

本文标签： javascriptBasic Vite Vanilla SetupStack Overflow

版权声明：本文标题：javascript - Basic Vite Vanilla Setup - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744148518a2592952.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。