我如何从HTML(使用Parcel)调用Typescript函数?

问题描述 投票:0回答:1

我正在使用包裹。我正在尝试从HTML的oninput表单事件中调用函数。

即使在表单之前有script标记,我仍然收到函数未定义的错误。

我只是运行parcel index.html以使用以下代码启动Web服务器:

export function formInputChanged(input: HTMLInputElement, output: HTMLOutputElement){  
  output.value = input.value;
}
<html>
<header>
</header>

<body>
  <script src="./formChanges.ts"></script>
  <form id="input_form">
    <input type="range" name="min_lvr" value="20" min="0.0" max="100" step="1"
      oninput="formInputChanged(this, txt_min_lvr);">
    <output name="txt_min_lvr" for="min_lvr" value="min_lvr.value"></output>%
  </form>
</body>

</html>

我知道我可以在HTML代码中内联进行更新,但是我想知道如何使用外部函数来进行更新。

html typescript parcel
1个回答
0
投票

尝试将您的函数(事件处理程序)直接绑定到DOM元素

<html>
<header>
</header>

<body>
  <script src="./formChanges.ts"></script>
  <form id="input_form">
    <input id="range_input" type="range" name="min_lvr" value="20" min="0.0" max="100" step="1"
      oninput="formInputChanged(this, txt_min_lvr);">
    <output name="txt_min_lvr" for="min_lvr" value="min_lvr.value"></output>%
  </form>
</body>
</html>
export function formInputChanged(input: HTMLInputElement, output: HTMLOutputElement){  
  output.value = input.value;
}

document.querySelector('#range_input').addEventListener('oninput',formInputChanged)
© www.soinside.com 2019 - 2024. All rights reserved.