'B2C- Unable to hide element with JS in my custom policy

In my custom policy, I try to hide email_intro label but without success : validateEmail

- This is my html code :

<div id="api" data-name="Unified">
    <form id="attributeVerification">
        <div id="attributeList" class="attr">
            <ul>
                ...
                <li class="TextBox">
                    <div class="attrEntry">
                        <div>
                            <div class="verificationInfoText" id="email_intro" style="display: 
                            inline;" aria-hidden="false" aria-live="polite" 
                            role="alert">Verification is necessary. Please click Send button. 
                            </div>
                        ...
                        </div>
                    </div>      
                </li>
                ...                             
            </ul>
        </div>
        <div class="buttons">
            ...         
        </div>
    </form>
</div>

- My JS code

var intro = document.getElementById("email_intro");
intro.style.setProperty('display','none');

Could someone know what the error might be please?

PS : I do the same thing to other elements and it works!!

javascriptcssazure-ad-b2cazure-ad-b2c-custom-policy


Solution 1:[1]

Thank you Nicolas and micahlt for your valuable discussions. Posting your discussions as answer to help other community members.

This seems to be an issue occurred due to style sheet miss match. Targeting the correct style sheet [element.style {display: inline; }] to class name (.verificationInfoText) solved the issue.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 MadhurajVadde-MT

Related Questions