JSFiddle - React, Tailwind, and code Playground

by NicoO

HTML

<input type="password" class="toggle-type" value="password plain" />
<input type="text" class="toggle-type" value="password plain" />
<div>
    <button id="change-type-vanilla">Change types, using vanilla js</button>
    <button id="change-type-jquery">Change types, using jQuery</button>
</div>

JavaScript

function invertType(type){
    if(type == "password") return "text"
    return "password"
}
$(function(){
    $('#change-type-jquery').click(function(){
        $('.toggle-type').each(function(){
            var type = $(this).prop("type");
            $(this).prop("type", invertType(type));
        });
    });  
});

document.getElementById("change-type-vanilla").addEventListener("click", function(){
    var inputElements = document.getElementsByClassName("toggle-type");
    for(var a = 0; a < inputElements.length; a++){
        var type = inputElements[a].type;
        inputElements[a].type = invertType(type);
    }
})