css doesn't apply on Icon using 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?

Probably I can but I am using fontenello and you won't see the icon without that — New_stud, Nov 23 '22 at 21:49
You should include proper library to use icons, like `fontawesome` — DreamBold, Nov 23 '22 at 21:52
The problem is that I can see the icon but I cannot change the color of it — New_stud, Nov 23 '22 at 21:58
Yes, like @DreamBold said we can't see where is element with id="password" coming from. You're missing something like — Milan, Nov 23 '22 at 22:00
I have updated the answer, it should solve your problem. @New_stud — DreamBold, Nov 23 '22 at 23:07

DreamBold · Answer 1 · 2022-11-23T23:06:35.793

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>

edited Nov 23 '22 at 23:06

answered Nov 23 '22 at 21:59

DreamBold

2,727
1
9
24

But the problem is tham I am using fontello not fontawesome – New_stud Nov 23 '22 at 22:01
Can you add the link to `fontello` here? – DreamBold Nov 23 '22 at 22:02
You need to download files and there are a lot of them. But if it works with fontawesome – New_stud Nov 23 '22 at 22:04
Looks to me you're using font awesome v3: https://fontawesome.com/v3/icon/exclamation – Milan Nov 23 '22 at 22:06
Your icon seems to be the same as this one `fa fa-exclamation-circle`, just replace it with `fa-exclamation` and you'll see the same icon as you have now. @New_stud – DreamBold Nov 23 '22 at 22:06
I have implemented the fully working code here as you did: `https://codesandbox.io/s/mutable-sea-fl3320?file=/src/index.js` @New_stud – DreamBold Nov 23 '22 at 22:51

score 0 · Answer 2 · answered Nov 23 '22 at 22:29

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

        })

css doesn't apply on Icon using dom

2 Answers2