innerHTML not updating the DOM

Question

A little problem I'm running into. I was trying to modify file inputs:

I wanted to update the label value with the filename selected. But for some reason innerHTML returns the updated value in the console but does not update in DOM.

In the attached snippet I want Choose File to be replaced by the filename chosen.

var inputs = document.querySelectorAll( '.file-input input[type="file"]' );
    Array.prototype.forEach.call( inputs, function( input )
    {
        var label    = input.nextElementSibling,
            labelVal = label.innerHTML;

        input.addEventListener( 'change', function( e )
        {
            var fileName = '';
            if( this.files && this.files.length > 1 )
                fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
            else
                fileName = e.target.value.split( '\\' ).pop();

            if( fileName ) {
                label.innerHTML = fileName;
                input.parentNode.parentNode.getElementsByClassName('gfield_label').innerHTML = fileName;
                console.log(input.parentNode.parentNode.getElementsByClassName('gfield_label').innerHTML);
            }
            else {
                label.innerHTML = labelVal;
            }
        });
    });

<form method="post" enctype="multipart/form-data" target="gform_ajax_frame_73" id="gform_73" class="career_form" action="/airmiles/#gf_73">
    <div class="gform_body">
        <ul id="gform_fields_73" class="gform_fields top_label form_sublabel_below description_below">
            <li id="field_73_8" class="gfield file-input field_sublabel_below field_description_below"><label class="gfield_label" for="input_73_8">Choose File</label><div class="ginput_container ginput_container_fileupload"><input type="hidden" name="MAX_FILE_SIZE" value="536870912"><input name="input_8" id="input_73_8" type="file" class="medium" aria-describedby="extensions_message" tabindex="1008"><span id="extensions_message" class="screen-reader-text"></span></div>
            </li>
        </ul>
    </div>
    <div class="gform_footer top_label"> 
        <input type="submit" id="gform_submit_button_73" class="gform_button button" value="OBTENIR MES 3 SOUMISSIONS GRATUITES" tabindex="1009">
    </div>
</form>

You're using `.innerHTML` on the result of `getElementsByClassName`. `getElementsByClassName` returns a **list**. You probably want to use `querySelector(".gfield_label")` instead so you get the first match. See the linked question's answers for details. — T.J. Crowder, May 09 '18 at 07:16

Mamun · Accepted Answer · 2018-05-09T07:16:27.450

1

getElementsByClassName() returns HTMLCollection. You have to use index.

Change

input.parentNode.parentNode.getElementsByClassName('gfield_label').innerHTML = fileName;

To:

input.parentNode.parentNode.getElementsByClassName('gfield_label')[0].innerHTML = fileName;

edited May 09 '18 at 07:16

answered May 09 '18 at 07:14

Mamun

66,969
9
47
59

It's an often-posted duplicate. No need to post Yet Another Answer for it. :-) – T.J. Crowder May 09 '18 at 07:15
1

Don't use a method that returns a collection when you only need to select the first item in the collection - use `querySelector` instead. Also, unless you're inserting HTML markup deliberately, better to assign to `textContent`. – CertainPerformance May 09 '18 at 07:29

innerHTML not updating the DOM

1 Answers1