mercredi 2 juin 2021

Error: conditionalInput.push is not a function [duplicate]

I'm writing a js script for multistep form's next/submit button visibility.

In the js script, first I'm looking for input fields within querySelectorAll and storing them in a variable called conditionalInput. After that, I'm again looking for <select> fields by querySelectorAll and pushing them one by one into conditionalInput so that later on I can check their values by forEach().

Now it tells me .push is not a function.

(() => {
        'use strict'

            window.addEventListener('load', () => {
                var conditionalInput = document.querySelectorAll('.cs_sub_target_dep > input');

                if (document.querySelectorAll('.cs_sub_target_dep > select')) {
                    var a = document.querySelectorAll('.cs_sub_target_dep > select');
                    a.forEach( (v, k) => {
                        conditionalInput.push(v);
                    });
                }
                // Getting the submit button.
                var button = document.querySelector('button.frm_button_submit[type="submit"]');


                conditionalInput.forEach( (v,k) => {
                    
                    if ( v.type == "text" || v.type == "email" || v.type == "number" ) {
                        v.addEventListener('keydown', (e) => {
                            if ( v.value ) {                                
                                // Displaying the button.
                                button.style.visibility = "visible";
                            } else {
                                // Hiding the submit button.
                                button.style.visibility = "hidden";
                            }
                        });
                    } else if ( v.type == "checkbox" || v.type == "radio" ) {
                        v.addEventListener('change', () => {
                            if ( v.checked ) {
                                // Displaying the button.
                                button.style.visibility = "visible";
                            } else {
                                // Hiding the submit button.
                                button.style.visibility = "hidden";
                            }
                        });
                    } else if ( v.type == "select" ) {
                        v.addEventListener('change', () => {
                            if ( v.value ) {
                                // Displaying the button.
                                button.style.visibility = "visible";
                            } else {
                                // Hiding the submit button.
                                button.style.visibility = "hidden";
                            }
                        });
                    }
                } );
            });
        })();
:root {
            --white-color: #fff;
            --color-black: #2a2a2a;
        }

        input {
            padding: 9px 15px;
            color: var( --color-black);
            border: 1px solid var( --color-black );
        }
        button.frm_button_submit[type="submit"] {
            visibility: hidden;
            color: var( --white-color );
            padding: 9px 35px;
            font-weight: 500;
            font-size: 16px;
            background-color: var( --color-black);
        }
<form action="">
            <div class="cs_sub_target_dep">
                <input class="input_field" type="text" placeholder="Full name">
            </div>

            <div class="cs_sub_target_dep">
                <input class="input_field" type="email" placeholder="Email">
            </div>

            <div class="cs_sub_target_dep">
                <input class="input_field" type="checkbox" name="CHECK_BOX" value="Check box" id="">
            </div>

            <div class="cs_sub_target_dep"
                <input class="input_field" type="radio" name="RADIO_BUTTON" value="Male" id="">
                <input class="input_field" type="radio" name="RADIO_BUTTON" value="Female" id="">
            </div>
            
            <div class="cs_sub_target_dep">
                <select name="OPTIONS" id="">
                    <option value="hello">Hello</option>
                    <option value="hi">hi</option>
                </select>
            </div>

            
            <div class="cs_sub_target_dep">
                <select name="OPTIONS" id="">
                    <option value="hello">Hello</option>
                    <option value="hi" selected>hi</option>
                </select>
            </div>


            <div class="frm_submit">
                <button class ="frm_button_submit submit" type="submit">Submit</button>
            </div>
        </form>



Aucun commentaire:

Enregistrer un commentaire