为什么HTML按钮没有't调用onclick事件分配的函数

Why does HTML button doesn't invoke onclick event assigned function

本文关键字：onclick 调用 事件 分配 函数 按钮 HTML 为什么      更新时间：2023-09-26

当尝试从.html文件调用.js文件的JavaScript函数时，不会调用该函数。

项目层次结构：

  • html（文件夹）
    • main.html
  • js（文件夹）
    • script.js

示例#1-使用.html-工作

main.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Main page</title>
    </head>
    <body>
        <label id="label1"></label>
        <input id="text1" type="text"/>
        <button onclick="document.getElementById('label1').innerHTML = document.getElementById('text1').value">Button</button>
    </body>
</html>

示例#2-使用.html和.js-不适用于

main.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Main page</title>
    </head>
    <body>
        <label id="label1"></label>
        <input id="text1" type="text"/>
        <button onclick="outputInput()">Button</button>
        <script src="/js/script.js"></script>
    </body>
</html>

script.js

function outputInput(){
    document.getElementById('label1').innerHTML = document.getElementById('text1').value;}

在<script src="/js/script.js"></script>中，您使用的是绝对URL。根据进一步的测试，你的"js"文件夹似乎不在你网站的根目录下，所以在那里找不到它。使用相对URL src="../js/script.js"可以更宽容地将东西放在哪里。

相关文章：