我的动态网站没有响应特定的按钮点击
Posted
技术标签:
【中文标题】我的动态网站没有响应特定的按钮点击【英文标题】：My dynamic website is not responding to specific button click 【发布时间】：2021-04-08 14:23:21 【问题描述】：在我的动态单页网络应用程序上创建允许用户上传图像的功能时，我遇到了一个很大的问题。为了简化并找到问题的根源，我按功能进行了简化。该功能现在要做的就是从表单中获取值并将它们显示在控制台中，但是目前它似乎只是重新启动页面并返回主页。这个错误非常令人困惑，因为我已经为我的其他一些页面编写了功能，这些功能完全可以正常工作。我为这个函数使用了与这些函数类似的代码结构，但它什么也没做。我知道我发布的代码量可能不足以理解错误，但我不想在这里发布大量代码，但我愿意通过聊天向他们展示。谢谢你。这是我的代码： 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>
【问题讨论】：
你提到“这个错误太混乱了”，你能分享一下错误吗？您是否在浏览器控制台中看到任何其他错误或警告？您的所有网络呼叫都成功解决了吗？您是否尝试在事件侦听器的顶部和底部添加一些跟踪级别日志？您使用的是什么浏览器？ @EthanRadford 没有错误，因为每当我按下提交图像按钮时，它似乎会刷新整个网站，而不是将值记录到控制台并重置表单。我使用的是谷歌浏览器。该错误非常令人困惑，因为我编写了仍然可以正常工作的整个客户端服务器函数，并且该函数的编写方式与它们相同，所以我不明白为什么它不起作用。我不确定您的其他建议是什么意思 您的console.log 语句直到听者的中途才会出现。您是否尝试过将任何控制台输出语句作为侦听器的第一行？这至少应该告诉您您的侦听器是否正在执行和失败或根本没有执行。 WRT 如果没有错误，如果页面正在刷新，您的控制台和网络日志将在页面加载时清除，除非您专门选择了保留它们的选项。您目前是否保留日志？
@EthanRadford 我在函数的开头添加了一个 console.log，我认为该函数根本没有被调用，因为它仍然没有记录我添加到开头的消息。跨度>
事件名称应该是"submit"，并且按钮没有这样的类型“submitImage”。
【参考方案1】：
您在其中一个输入中缺少撇号：
titleofimage' >
正如@charlietfl 所说，要提交表单，您只能使用按钮类型submit，submitImage 将不起作用。您也可以省略它，因为表单中的按钮将始终提交它。
同样的事情需要在js文件中更正，imgform.addEventListener("submit", ImageHandler)而不是..submitImage...
【讨论】：
以上是关于我的动态网站没有响应特定的按钮点击的主要内容，如果未能解决你的问题，请参考以下文章