Question

我遇到的一个小问题。我试图修改文件输入：

我想用选中的文件名更新标签值。但由于某种原因，innerHTML在控制台中返回更新的值，但不在DOM中更新。

在附加的片段中，我想选择文件替换为所选的文件名。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

getElementsByClassName()返回 HTMLCollection 。你必须使用索引。

更改

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

要：

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

innerHTML不更新DOM

1 个答案: