the js file doesn't "see" an id in the html

Question

I have this file js:

$('#btn_sa').click(function saluta(){
            var username = document.getElementById("Name").value;
            var password = document.getElementById("Password").value;
            var blocco = $("<div></br>Ciao </div>");
            console.log("funziona");
            if(password === "errata"){
                $(blocco).append(username);
                blocco.appendTo(document.body);
                document.getElementById("btn_sa").disabled = true;
                }else{
                $(blocco).css({
                    "color" : "red",
                    "font-size" : "10px"                    
                    });
                $(blocco).text("Password Errata");
                blocco.appendTo(document.body);
                }
            });

and this button in the html file:

<button id = "btn_sa">LOGIN</button>

when I run the html, it import the file js, but when I click on the button nothing happens.

can someone help me?

Any errors in the console? Have you included jquery.js properly? Is there more than one element with that id? Have you put your code in a document.ready handler? ... — Rory McCrossan, Jan 19 '17 at 16:34
Maybe the JS code is evaluated before the button is added to the DOM. Try to put the code just before the closing tag — Giladd, Jan 19 '17 at 16:36
The last of those is the likely culprit. Are you trying to attach the handler before the DOM is ready? — Dave Newton, Jan 19 '17 at 16:37
var blocco = $("
Ciao
"); and $(blocco).... i think thats your problem.... — AthMav, Jan 19 '17 at 16:40

score 0 · Answer 1 · answered Jan 19 '17 at 16:37

I think its because the DOM is not fully loaded yet....

$(document).on('click', '#btn_sa', function saluta(){
    var username = document.getElementById("Name").value;
    var password = document.getElementById("Password").value;
    var blocco = $("<div></br>Ciao </div>");
    console.log("funziona");
    if(password === "errata"){
        $(blocco).append(username);
        blocco.appendTo(document.body);
        document.getElementById("btn_sa").disabled = true;
        }else{
        $(blocco).css({
            "color" : "red",
            "font-size" : "10px"                    
            });
        $(blocco).text("Password Errata");
        blocco.appendTo(document.body);
        }
});

the js file doesn't "see" an id in the html

1 Answers1