javascript .innerhtml img 不显示答案

【问题标题】：javascript .innerhtml img doesn't displayjavascript .innerhtml img 不显示
【发布时间】：2015-11-19 14:31:32
【问题描述】：

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

下面的代码旨在为表单中正确填写的字段显示一个验证图标。关键是该函数确实获取了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();
}
};

非常感谢您的反馈。

汤姆。

【问题讨论】：

请在此处提供有问题的代码，不要链接到您的网站。
你能把问题/代码贴在这里吗
我们需要一些代码，一些 html，来理解我们在说什么。我们无法猜测您的 javascript 代码；)
提问前请阅读stackoverflow.com/help/how-to-ask。
查看您页面的控制台...您可以在那里看到错误...

标签： javascript image innerhtml

【解决方案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 为您完成。

【讨论】：

谢谢扎克！不幸的是，它现在返回一个“语法错误：缺少形式参数”跟踪“$document.ready(function("button"){"
嗨扎克！很抱歉反馈迟了。以上是更新后的代码。
您没有在 document.ready 函数中删除“按钮”作为参数。
其实我做到了；但随后控制台返回“缺少形式参数”错误。无论如何，我发现我的 js 文件中的 img url 出了点问题，所以我使用了旧的 javascript。

【解决方案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' />";

非常感谢您的帮助。

干杯，汤姆。

【讨论】：