Get src attribute content in <img> tag via javascript

Question

I’m trying to make a password field, which by clicking on an image next to it, will make the password visible, and with that also I want to change the image when the click occurs.

My HTML is like this:

 <img src="~/Imagens/olho.jpg" style="width:7%;" align="right" onclick="mostraSenha(this)" id="img"/>

My javascript function is like this:

<script>
        function mostraSenha(e) {
            var x = document.getElementById("senha")
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
            if ($(e).attr("src") == "/Imagens/olho.jpg") alterarImagem('img', "/Imagens/olho-fechado.jpg");
            else alterarImagem('img', "/Imagens/olho.jpg");

        }

        function alterarImagem(objeto, caminhoNovaImagem) {
            document.getElementById(objeto).src = caminhoNovaImagem;       
        }
    </script>

I am trying in "if ($(e). attr("src")" to verify the value contained in src, but this does not work. I tried to give a window.Alert but also does not open anything.

Is there any way to check the content in my src attribute? That is, check when it is "/Images/eye.jpg" or "/Images/closed-eye.jpg".

Answer 1

I think you are performing an unnecessary check. You can put this condition as soon as you change the type of your text field:

<script>
    function mostraSenha(e) {

        var x = document.getElementById("senha")

        if (x.type === "password") {
            x.type = "text";
            alterarImagem('img', "/Imagens/olho-fechado.jpg");
        } else {
            x.type = "password";
            alterarImagem('img', "/Imagens/olho.jpg");
        }

    }

    function alterarImagem(objeto, caminhoNovaImagem) {
        document.getElementById(objeto).src = caminhoNovaImagem;       
    }

</script>

Just answering your question, to get the value of src tag img utilize document.getElementById('img').src, as you used to set the value in alterarImagem, or with jQuery $("img").attr("src"). Maybe the reason it didn’t work is that at first you inserted a ~ on the start path. See a test running:

function mostraSenha(e) {

    var x = document.getElementById("senha");
    
    if (x.type === "password") {
        x.type = "text";
    } else {
        x.type = "password";
    }
    
    if ($(e).attr("src") == "https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=f13ebeedfa9e") {
      alterarImagem('img', "https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-icon.svg?v=62f619494ccd");
    }
    else {
      alterarImagem('img', "https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=f13ebeedfa9e");
    }

}

function alterarImagem(objeto, caminhoNovaImagem) {
    document.getElementById(objeto).src = caminhoNovaImagem;       
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="password" id="senha" value="testesenha">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=f13ebeedfa9e" width="30" onclick="mostraSenha(this)" id="img"/>

Answer 2

As a suggestion, I believe that using an image for this is unnecessary. Several fonts have characters that reproduce the open and closed eye image; the Unicode table itself has the character U+1F441 which is an eye that could be used:

$('button').on('click', function(event) {
  $(this).toggleClass('closed-eye');
  const input = $('input');
  input.attr('type', input.attr('type') == 'password' ? 'text' : 'password');
});

.closed-eye span {
  text-decoration: line-through;
  color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='password' value='senha super segura'>
<button><span>&#128065;</span></button>

So you don’t need to upload two more images and make the application much faster.