javascript .innerhtml img 不显示

Question

我是新来的，几天来我一直在为这段代码苦苦挣扎，老实说，没有办法修复它，所以我正在寻求一些反馈......

下面的代码旨在为表单中正确填写的字段显示验证图标。 关键是该函数确实获取了 img 相关文件，但不显示它们。

这是 HTML ：

<form>                
 <h6>Name</h6>
 <input type="text" name="name" id="name" value="User name" /><span id="okname"></span><span id="not-okname"></span>
 <h6>E-mail</h6>
 <input type="text" name="email" id="email" value="User email" /><span id="okemail"></span><span id="not-okemail"></span>
 <div class="row">
   <div class="btn-group" style="width:100%; padding:0%">
    <button type="button" class="btn btn-success"  onclick="valid()" style="width:84%"/>Click here</button>              
   </div>
 </div>
</form>

<script>

    $document.ready(function("button"){
        if(valid() === true) {
            $('#name').append("img/valid-icon.png");
            $('#email').append("img/valid-icon.png");
        }
    });

</script>

这是 JS ：

function valid() {

var userName = document.getElementById("name").value;
var userEmail = document.getElementById("email").value;
var okname = document.getElementById("okname");
var okemail = document.getElementById("okemail");

if (userName == "User name") {
    alert ( "Please enter your name" );
    document.getElementById("not-okname").innerHTML = "<img src='../img/invalid-icon.png' />";
    valid = false;
} else if (userName == ""){
    alert ( "Please enter your name" );
    document.getElementById("not-okname").innerHTML = "<img src='../img/invalid-icon.png' />";
    valid = false;
} else if (userEmail =="User email") {
    alert ( "Please enter your email" );
    document.getElementById("not-okemail").innerHTML = "<img src='../img/invalid-icon.png' />";
    valid = false;
} else if (userEmail == ""){
    alert ( "Please enter your email" );
    document.getElementById("not-okemail").innerHTML = "<img src='../img/invalid-icon.png' />";
    valid = false;
} else {
    plus3Date();
}
};

非常感谢您的反馈。

汤姆。

Answer 1

<script>

    $document.ready(function("button"){
        if(valid() === true) {
            $('#name').append("img/valid-icon.png");
            $('#email').append("img/valid-icon.png");
        }
    });

</script>

删除“按钮”，错误在控制台中：

index.html:106 Uncaught SyntaxError: Unexpected string

document.ready 函数可以这样写：

$( document ).ready(function(){
     //do something here
});

或者

根据jQuery文档，也可以这样做： // 传递命名函数而不是匿名函数。

function readyFn( jQuery ) {
    // Code to run when the document is ready.
}

$( document ).ready( readyFn );
// or:
$( window ).load( readyFn );

这样做的目的是等待DOM加载完毕，然后运行里面的代码。 jQuery 使用 document.ready 为您完成。

Answer 2

我解决了我的问题。 我不得不检查“scripts.js”文件中的 URL。 由于 js 文件位于“index.html”的父文件夹中，我这样写：

okname.innerHTML = "<../img src='img/valid-icon.png' />";

虽然我必须这样写，因为 URL 将写在 "index.html" 中：

okname.innerHTML = "<img src='img/valid-icon.png' />";

无论如何，非常感谢您的帮助。

干杯，汤姆。