Get content of the src attribute in the img tag via javascript

Navigation
1

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

My HTML looks like this: 

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

My javascript function looks 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>

Is there any way to check the content in my src attribute? That is, check when it is as "/images/leon.jpg" or as "/images/green-photo.jpg".

    
asked by anonymous 06.06.2018 / 16:38

2 answers

2

I think you're doing an unnecessary scan. 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 of tag img use document.getElementById('img').src , just like you used to set the value to alterarImagem , or with jQuery $("img").attr("src") . Perhaps the reason it did not work is that you initially entered a ~ in the initial 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><inputtype="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"/>
    
06.06.2018 / 16:44
2

As a suggestion, I believe that using an image for this is unnecessary. Several fonts have characters that reproduce the image of the open and closed eye; 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 do not need to load two more images and make the application much faster.

    
06.06.2018 / 17:06
Dictionary for objects in Python Hide Menu Tab