Question

很抱歉这令人心烦，但这是我第一次编码。我只是想要一些建议。

经过大量研究，我没有找到任何我能理解的答案。我只需要在单击输入提交时显示图像。这是代码：

<!DOCTYPE html>
<head>
    <title> Data tracking </title>
    <script type="text/javascript" src="first script.js"></script>
</head>
<body>
    <h1>Track your data</h1>
    <p>Would you like to know how many data a web site can track from you?</p>
    <form method="get">
        <fieldset>
            <legend>Personal data</legend>
            <input type="radio" name="sex" value="male" checked>Male
            <br>
            <input type="radio" name="sex" value="female">Female
            <br>
            <input type="email" name="email" placeholder="your email">
            <br>
            <input type="text" name="firstname" placeholder="first name">
            <br>
            <input type="text" name="lastname" placeholder="last name">
            <br>
            <input id="submit" name="submit" type="submit">
        </fieldset>
        <div></div>
    </form>
</body>

JavaScript的：

$(document).ready(function ()){
    $("#submit").click(function () {
        $('body').append('<img src="cookie.png"></img>')
    });
});

我只是无法制作图像“cookie.png”，它与html和脚本文件位于同一文件夹中，在点击提交时显示，并且不知道原因。

感谢您的帮助！

Answer 1

在我填写所有输入并按下提交后，您的代码正在运行，至少对我而言，它会将图像加载到底部。但是你有一个括号错误

$(document).ready(function(){
 $("#submit").click(function(){
 $('body').append('<img src="cookie.png"></img>')
 });
});

在ready（function（）{

中）

你还需要包含jquery！

最重要的是，学习如何使用控制台，这些类型的错误非常自我解释

Answer 2

我不明白为什么你要submit没有实际提交任何东西，除非你想通过Ajax发布（但你要去错误的方式然后）。

然而，你需要像这样使用preventDefault();

$(document).ready(function()){
    $("#submit").click(function(e) {
        e.preventDefault(); // prevent from submitting
        $('body').append('<img src="cookie.png" />');
    });
});

但是，这会在您点击页面之后加载图像;这不是最好的。

更好的解决方案可能是让您的图片已经加载（但隐藏）并在点击时显示：

<!DOCTYPE html> <head> <title> Data tracking </title> <script type="text/javascript" src="first script.js"></script> </head> <body> <h1>Track your data</h1> <p>Would you like to know how many data a web site can track from you?</p> <form method="get"> <fieldset> <legend>Personal data</legend> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female <br> <input type="email" name="email" placeholder="your email"> <br> <input type="text" name="firstname" placeholder="first name"> <br> <input type="text" name="lastname" placeholder="last name"> <br> <input id= "submit" name= "submit" type="submit"> </fieldset> <div></div> </form> <igm src="cookie.png" id="formImg" style="display:none;" /> </body> $(document).ready(function()){ $("#submit").click(function(e) { e.preventDefault(); // prevent from submitting $("#formImg").show(); }); });

Answer 3

（更新）它不会遵循脚本文件的路径，而是跟踪html文件/ URL的文件夹！确保图片放在那里。

但请注意，提交时，页面将转发到新页面/重新加载。因此，您不能同时执行这两项操作：在同一页面上显示图片，并在下一页上显示时查看图片。您必须在停留在同一页面时通过Ajax提交表单。

图像应该像<img src="cookie.png" />而不是<img src="cookie.png"></img>

一样使用

并且不要将src="first script.js"与空格一起使用..使用src="first-script.js"

你是否包括jQuery？

单击提交按钮时显示图像

3 个答案: