Svelte页面中JavaScript代码无法运行的问题求助

问题描述 #

我在Svelte页面编写HTML后添加了JavaScript代码，但代码无法运行。相关代码如下：

import {validate} from "+page.svelte";

<form>
  <label for="username">Kullanıcı Adı:</label>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">Şifre:</label>
  <input type="password" id="password" name="password"><br><br>
  <input type="button" value="Giriş Yap" onclick="validate()">
</form>

<script type="text" src="page.svelte">
  function validate() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    if (username === "kullaniciadi" && password === "sifre") {
      alert("Giriş başarılı!");
      window.location.href = "ana_sayfa.html";
    } else {
      alert("Kullanıcı adı veya şifre yanlış. Lütfen tekrar deneyin.");
    }
  }
</script>

启动页面后，JavaScript未生效，查看Chrome开发者工具发现页面生成的代码中缺少自定义的JavaScript逻辑，且点击按钮时出现报错：

Uncaught ReferenceError: validate is not defined
at HTMLInputElement.onclick ((dizin):28:63)
onclick @ (dizin):28

问题原因 #

你的代码存在几个Svelte用法错误，导致逻辑无法执行：

• 错误的脚本引入：Svelte组件内的<script>标签不需要src属性，添加该属性会让Svelte忽略标签内的代码，这也是页面没有生成自定义逻辑的核心原因。
• 原生事件绑定不兼容：用onclick="validate()"这种原生方式绑定事件，会去全局作用域查找validate函数，但你的函数定义在组件局部作用域内，所以会触发未定义报错。
• 无效的导入语句：import {validate} from "+page.svelte";属于无效导入，函数是你自己定义的，不需要从自身文件导入。
• DOM操作不规范：Svelte提供了更简洁的变量绑定方式，无需手动调用document.getElementById获取输入值。

修正后的代码 #

<script>
  let username = '';
  let password = '';

  function validate() {
    if (username === "kullaniciadi" && password === "sifre") {
      alert("Giriş başarılı!");
      window.location.href = "ana_sayfa.html";
    } else {
      alert("Kullanıcı adı veya şifre yanlış. Lütfen tekrar deneyin.");
    }
  }
</script>

<form>
  <label for="username">Kullanıcı Adı:</label>
  <input type="text" id="username" name="username" bind:value={username}><br><br>
  <label for="password">Şifre:</label>
  <input type="password" id="password" name="password" bind:value={password}><br><br>
  <input type="button" value="Giriş Yap" on:click={validate}>
</form>

关键改进说明 #

1. 移除了无效的import语句和<script>标签的src属性，直接在组件内编写脚本逻辑。
2. 使用Svelte的bind:value语法，将输入框的值与组件内的变量绑定，避免手动操作DOM。
3. 用on:click={validate}替代原生onclick，确保事件触发时能正确调用组件局部作用域内的validate函数。

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