css doesn't apply on Icon using dom-CodePudding

Hello I am trying to change the color of icon using dom. When I do that changing icon to h6 and instead of icon-exclamation use the text ! it works. How to apply it on the icon. Html code which do it:

<div class ="indicator">
                    <i id ="exclamation" class = "icon-exclamation"></i>
                    <h6 id = "pinfo" class ="passwordinfo" >dupa</h6>
            </div>

<script>
            var pass = document.getElementById("password");
            var pinfo =document.getElementById("pinfo");
            var exc = document.getElementById("exclamation");
            console.log(exc[0])
            pass.addEventListener('input', ()=>
            {
    
                if (pass.value.length === 0)
                {
                    pinfo.innerHTML = "Waiting for your password"
                }
                else if (pass.value.length <=4)
                {
                    pinfo.style.visibility = "visible";
                    exc.style.color = "blue";
                    exc.style.display = "block";
                    // exc.style.display = 'block';
                    pinfo.innerHTML = "Password is weak";
                    pinfo.style.color = "#ff0000"
    
    
                }
                else if (pass.value.length >=4 && pass.value.length <8)
                {
                    pinfo.innerHTML = "Password is medium";
                    pinfo.style.color ="#ff8000";
                }
                else
                {
                    pinfo.innerHTML = "Password is strong";
                    pinfo.style.color = "#00ff00";
                }
    
            })
        </script>

Why this code doesn't work and how to change the color of the icon dynamically?

CodePudding user response：

Your javascript code is working correctly. In your HTML file, please add the first line to add the fontawesome CSS library, and instead of the commented line, try to use fontawesome icon.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div >
  <input id="password" />
  <input id="pinfo" />

<!--   <i  ></i> -->
  <i id="exclamation" ></i>
  <h6 id="pinfo" >dupa</h6>
</div>

CodePudding user response：

If i well understood, if you want to change dinamically the icon color as you change the pinfo, you just have to put exc.style.color inside the ifs you want to change..

May be something like this:

pass.addEventListener('input', () => {
            if (pass.value.length === 0)
            {
                pinfo.innerHTML = "Waiting for your password"
            }
            else if (pass.value.length <=4)
            {
                pinfo.style.visibility = "visible";
                exc.style.color = "blue";
                exc.style.display = "block";

                pinfo.innerHTML = "Password is weak";
                pinfo.style.color = "#ff0000"
            }
            else if (pass.value.length >=4 && pass.value.length <8)
            {
                pinfo.innerHTML = "Password is medium";
                pinfo.style.color ="#ff8000";
                exc.style.color = "orange";
            }
            else
            {
                pinfo.innerHTML = "Password is strong";
                pinfo.style.color = "#00ff00";
                exc.style.color = "yellow";
            }

        })