我的动态网站没有响应特定的按钮点击

Question

在我的动态单页 Web 应用程序上创建允许用户上传图像的功能时，我遇到了一个很大的问题。为了简化并找到问题的根源，我按功能进行了简化。所有功能现在要做的是从表单中获取值并将它们显示在控制台中，但是目前它似乎只是重新启动页面并 return 到主页。这个错误非常令人困惑，因为我已经为我的其他一些页面编写了功能，这些功能完全可以正常工作。我为此函数使用了与这些函数类似的代码结构，但它什么也没做。我知道我发布的代码量可能不足以理解错误，但我不愿意在此处发布大量代码，但愿意通过聊天展示它们。谢谢你。这是我的代码： client.js

.
.//code for other pages functions
.
async function ImageHandler(event){
    event.preventDefault();
    var name =document.getElementById('username').value;
    var title =document.getElementById('titleofimage').value;
    console.log(name);
    console.log(title);
    imgform.reset();

}

const imgform= document.getElementById("image-form");
imgform.addEventListener("submitImage", ImageHandler);

index.html

<html>
<body>
  <main>
        <div class='Page' id='pictures'>
            <h1>pictures</h1>
            <form id='image-form'>
                <div class='form-group'>
                    <label for='username'>username</label>
                    <input class='form-control' name='name' id='username' required>
                </div>
                <div class='form-group'>
                    <label for='titleofimage'>Tile</label>
                    <input class='form-control' name='title' id='titleofimage >
                </div>
                <input type='file' id='image' required><br>
                <button type='submitImage' class='btn btn-primary'>submit Image</button>
            </form>            
        </div>
     .(//other pages code)
     .
     .
  </main>
  <script src='client.js'></script>
</body>
</html>

Answer 1

您在其中一个输入中缺少一个撇号： titleofimage' >

正如@charlietfl所说，提交表单只能使用按钮类型submit，submitImage是行不通的。您也可以省略它，因为表单中的按钮将始终提交它。

同样的事情需要在js文件中更正，imgform.addEventListener("submit", ImageHandler)而不是..submitImage...

我的动态网站没有响应特定的按钮点击

My dynamic website is not responding to specific button click

html

javascript

logic

json

client-server