Get src attribute content in <img> tag via javascript

Asked

Viewed 654 times

1

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".

2 answers

2


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"/>

  • 1

    Man, thank you so much, it was logic error anyway! The only thing I had to change was the order, starting with the "/Images/eye.jpg", it should be in the function Else, worth! =)

  • Cool @Bruno! Glad I helped! I changed the answer with what you said! :)

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.

  • Oops, thanks for the feedback, the point is I’m using ASP, so my field is like this: <div class="form-group has-feedback"> <img src="~/Images/eye.jpg" style="width:7%;" align="right" onclick="showNow(this)" id="img"/> Html.Passwordfor(m => m.password, new { @class = "form-control", placeholder = "Password", id = "password", style = "max-width:290px; max-height:35px;", required = "required" }) </div> So I did it this way, but I’ll try to adjust if it works! Thank you =)

  • I’m using the MVC standard, so I needed to use "Html.Something" to communicate my View with my Controller.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.