css 不适用于使用 dom 的图标

Question

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?

Answer 1

Your code works correctly, you might have not included all the assets including fonts and CSS files. You can have a look at the working code here: https://codesandbox.io/s/mutable-sea-fl3320?file=/src/index.js

You can read more about how to use fontello icons in your code here .

You can use fontawesome instead of fontello , of course. It's more simple and more robust for most situations. 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 class="indicator">
  <input id="password" />
  <input id="pinfo" />

<!--   <i  class="icon-exclamation"></i> -->
  <i id="exclamation" class="fa fa-exclamation-circle fa-2x"></i>
  <h6 id="pinfo" class="passwordinfo">dupa</h6>
</div>

Answer 2

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";
            }

        })