我正在使用包裹。我正在尝试从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代码中内联进行更新,但是我想知道如何使用外部函数来进行更新。
尝试将您的函数(事件处理程序)直接绑定到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)