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' />";

非常感谢你的帮助。

干杯，汤姆。

javascript .innerhtml img不显示

2 个答案: