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(); 
} 
}; 

Большое спасибо за ваши отзывы.

Tom.

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 это также можно сделать, например, is: // Передача именованной функции вместо анонимной функции.

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

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

Целью этого является ожидание загрузки DOM, а затем запуск кода внутри. jQuery делает это для вас, используя document.ready.

Answer 2

Я решил свою проблему. Мне пришлось проверять URL-адреса в файле «scripts.js». Поскольку файл JS был в родительской папке «index.html» Я написал это:

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

Хотя я должен был написать это как URL будет написано в «index.html»:

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

Большое спасибо за вашу помощь в любом случае.

Cheers, Tom.