How to hide an element with JavaScript

Question

I made a form in HTML with Symfony. There is an optional part, I want to hide this part by hiding the "Next" button. I think the JavaScript code is good because the CSS I want to attribute to my element is displayed in the inspector, but it is not used.

PS : I had no problem to hide an input inside a div. But when I try to hide the button, it doesn't work at all.

Thank you very much for helping.

JavaScript code :

const checkbox = document.querySelector("input[type=checkbox]");

checkbox.addEventListener( 'change', function() {
    if(this.checked) {
        document.querySelector(".optional").style.display = "none !important";
    } else {
        document.querySelector(".optional").style.display = "initial";
    }
});

EDIT : register.html.twig code :

{% extends 'base.html.twig' %}

{% block title %}Incris-toi sur Go Zpeak !{% endblock %}

{% block main %}

{{ form_start(userform) }}

    <div class="form container">

        <div class="formpage">
            
            <div class="form-floating mb-3">
                {{ form_widget(userform.email, {'attr' : {'placeholder' : 'Mon adresse e-mail', 'class' : 'form-control'}}) }}
                {{ form_label(userform.email, 'Mon adresse e-mail', {'label_attr' : {'class' : 'label'}}) }}
            </div>
            <div class="form-floating mb-3">
                {{ form_widget(userform.password.first, {'attr' : {'placeholder' : 'Mon mot de passe', 'class' : 'form-control'}}) }}
                {{ form_label(userform.password.first, 'Mon mot de passe', {'label_attr' : {'class' : 'label'}}) }}
            </div>
            <div class="form-floating">
                {{ form_widget(userform.password.second, {'attr' : {'placeholder' : 'Confirmation de mon mot de passe', 'class' : 'form-control'}}) }}
                {{ form_label(userform.password.second, 'Confirmation de mon mot de passe', {'label_attr' : {'class' : 'label'}}) }}
            </div>
            <div class="form-checkbox">
                {{ form_widget(userform.roles) }}
                <span class="checkbox"></span>
                <span class="checkmark"></span>
            </div>
            <div>
                <button type="button" class="next btn btn-lg btn-outline-primary mt-4 d-flex mx-auto">Je m'inscris</button>
            </div>
        </div>
        <div class="formpage">
            <div class="form-floating mb-3">
                {{ form_widget(userform.occupation, {'attr' : {'placeholder' : 'Quelle est ton occupation (ton métier, tes études…) ?', 'class' : 'form-control'}}) }}
                {{ form_label(userform.occupation, 'Quelle est ton occupation (ton métier, tes études…) ?', {'label_attr' : {'class' : 'label'}}) }}
            </div>
            <div class="mb-3">
                <p>De quel pays es-tu originaire ?</p>
                {{ form_widget(userform.nationality) }}
            </div>
            <div class="mb-3">
                <p>Quelle est ta langue maternelle ?</p>
                {{ form_widget(userform.nativelanguage) }}
            </div>
            <div class="d-flex">
                <button type="button" class="prev btn btn-lg btn-outline-secondary mt-4 d-flex align-items-center me-auto">&lt;<span class="previous">Précédent</span></button>
                <button type="button" class="next optional btn btn-lg btn-outline-primary mt-4 d-flex ms-auto">Suivant</button>
                <button class="btn optional-validation btn-lg btn-outline-primary mt-4 d-flex ms-auto">Je valide</button>
            </div>
        </div>
        <div class="formpage">
            <div class="mb-3">
                <p>Quelle langue souhaites-tu pratiquer ?</p>
                <div class="wishedlanguagelist">
                    {{ form_widget(userform.wishedlanguages, {'attr' : {'class' : 'form-control mb-3'}}) }}
                </div>
                <div class="d-flex justify-content-between">
                    <button type="button" class="question-button btn btn-outline-secondary" id="addwishedlanguage">+ Ajouter une langue</button>
                    <button type="button" class="question-button btn btn-outline-secondary" id="removewishedlanguage">- Supprimer la dernière langue</button>
                </div>
            </div>
            <div class="d-flex">
                <button type="button" class="prev btn btn-lg btn-outline-secondary mt-4 d-flex align-items-center me-auto">&lt;<span class="previous">Précédent</span></button>
                {{ form_row(userform.save, {'attr' : {'class' : 'btn btn-lg btn-outline-primary mt-4 d-flex ms-auto'}}) }}
            </div>
        </div>

    </div>

{{ form_end(userform) }}

{% endblock %}

{% block js %}

<script src="../assets/js/scripts.js"></script>

{% endblock %}

so what rule is overriding an inline style? Hard to guess what your problem is with what is provided. — epascarello, Sep 06 '22 at 15:14
Hello epascarelgo. I try to give the following style : display="none !important"; to the button with the class "optional". This was working for a div that had the same class, but it doesn't work for the button. — Emilie Tossan, Sep 06 '22 at 15:22
try `document.querySelector(".optional").style.display = "none";`, you don't need !impotant here. — zdd, Sep 06 '22 at 15:31
If you do need to override important with javascript, take of look of this post: https://stackoverflow.com/questions/462537/overriding-important-style — zdd, Sep 06 '22 at 15:34

score 1 · Accepted Answer · answered Sep 08 '22 at 17:25

I had to use .setAttribute. It worked very well :

const checkbox = document.querySelector("input[type=checkbox]");

checkbox.addEventListener( 'change', function() {
    if(this.checked) {
        document.querySelector("button.optional").setAttribute('style', 'display:none !important')
        document.querySelector("button.optional-validation").setAttribute('style', 'display:initial !important')
    } else {
        document.querySelector("button.optional").setAttribute('style', 'display:initial')
        document.querySelector("button.optional-validation").setAttribute('style', 'display:none')
    }
});

Chris G · Answer 2 · 2022-09-06T15:47:24.773

You can try by getting the element by class name For example this is your html checkbox and the button you want to hide

<input type="checkbox">hide 
<button class="optional">
Next
</button>

Then on your js you use getElementsByClassName("Optional")[0] why the [0] you say? because the getElementsByClassName return an array like object and you will get an error without it. In this example you only have 1 element you want to hide with the class optional, if you want to use this same method with multiple elements sharing that class, you can do it inside a for loop

const checkbox = document.querySelector("input[type=checkbox]");

checkbox.addEventListener( 'change', function() {
    if(this.checked) {
            document.getElementsByClassName("optional")[0].style.display  = "none";
    } else {
            document.getElementsByClassName("optional")[0].style.display  = "inline";
    }
});

No need for the !important; in this case

How to hide an element with JavaScript

2 Answers2