I do not have a <input> or any form. I want some way to toggle a plain text to something like **** on click of a button.

for example I have

<p id='one'>google_yahoo</p>
<button id='two'>toggle</button>

so when I click the button once, <p> should bee:

<p>************</p>

Then when I click the button then I should again get back google_yahoo
But by default I want it be in ***** form.

What I did:

<script>
  function myfunction(){
  $("#two").click(function(){
  $("#one").text("abc");
  });
  };
</script>

Any straightforward, easy to understand solution anyone?

I do not have a <input> or any form. I want some way to toggle a plain text to something like **** on click of a button.

for example I have

<p id='one'>google_yahoo</p>
<button id='two'>toggle</button>

so when I click the button once, <p> should bee:

<p>************</p>

Then when I click the button then I should again get back google_yahoo
But by default I want it be in ***** form.

What I did:

<script>
  function myfunction(){
  $("#two").click(function(){
  $("#one").text("abc");
  });
  };
</script>

Any straightforward, easy to understand solution anyone?

• javascript
• html

• Put the innerHTML in a variable and replace the innerHTML with *****. When they click the button again, put the variable back in innerHTML. – Barmar Commented Aug 27, 2016 at 13:27
• 2 It's not very plicated, you shouldn't need an expert to write it for you. – Barmar Commented Aug 27, 2016 at 13:28
• 1 Stackoverflow. rules said that you need to try something before ask, and share what you are trying. We are not a makemycode service – Marcos Pérez Gude Commented Aug 27, 2016 at 13:30
• @Barmar is it possible for you to please provide code. I'm not very good in js :/ – pyofey Commented Aug 27, 2016 at 13:30
• @Marco i have tried many things but its all in different context related to django... – pyofey Commented Aug 27, 2016 at 13:32

3 Answers 3

You need to create some variables to store value of your text. Try it on JSFiddle.

var txt = document.getElementById('one');
var btn = document.getElementById('two');
var visible = 1;
var value = '';

btn.addEventListener('click', function(){
  if(visible){
    value = txt.innerHTML;
    txt.innerHTML = '*'.repeat(value.length);
  }else{
    txt.innerHTML = value;
  }

  visible = !visible;
});

var pMemory = null;
$('button').click(function() {
  var pElement = $('p').get(0);

  if (pMemory === null) {
    // save to cache
    pMemory = $(pElement).text();
  }
  
  if (pMemory === $(pElement).text()) {
    $(pElement).text('*'.repeat(pMemory.length));
  } else {
    $(pElement).text(pMemory);
  }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>google_yahoo</p>
<button>toggle</button>

Using text-security css property as an option.

$(document).ready(function(){

  $("#two").on("click", function(){
    $("#one").toggleClass("password_field");
  })
  
})

.password_field{
 -webkit-text-security:disc; 
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id='one' class="password_field">google_yahoo</p>
<button id='two'>Toggle</button>