Question

我正在努力导入以下JS代码

'use strict';

;( function ( document, window, index )
{
var inputs = document.querySelectorAll( '.inputfile' );
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.querySelector( 'span' ).innerHTML = fileName;
        else
            label.innerHTML = labelVal;
    });

    // Firefox bug fix
    input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
    input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
});
}( document, window, 0 ));

在本网站上：https://pimarketing.flywheelsites.com/careers/

我在调试器中得到的错误是：TypeError：label为null。

我猜输入.nextElementSibling出了问题。它应该显示输入文件名，但它不显示。任何帮助都是适当的

Answer 1

我认为null错误意味着它没有找到那个元素，这意味着最好先检查一下这个元素是否存在，然后再做其他事情。请尝试以下代码，并告诉我它是否适合您。

  'use strict';
  ( function ( document, window, index )
  {
  var inputs = document.querySelectorAll( '.inputfile' );
  Array.prototype.forEach.call( inputs, function( input )
  {
    var label    = input.nextElementSibling;
     if(label){    //checking if label exist or not
       var 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.querySelector( 'span' ).innerHTML = fileName;
    else
        label.innerHTML = labelVal;
   });
}
    // Firefox bug fix
    input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
    input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
});
}( document, window, 0 ));

我希望这会帮助你。

Answer 2

我解决了！它似乎确实无法找到该元素。我使querySelector更具体，并更改了HTML标签中=“file-0”＆gt;

的标签

'use strict';

;( function ( document, window, index )
{
var inputs = document.querySelectorAll('#file-0');
Array.prototype.forEach.call( inputs, function( input )
{
    var label    = input.nextElementSibling;
    if (!label) {
    return;
    }
    var 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.querySelector( 'span' ).innerHTML = fileName;
        else
            label.innerHTML = labelVal;
    });

    // Firefox bug fix
    input.addEventListener( 'focus', function(){ input.classList.add(     'has-focus' ); });
    input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
});
}( document, window, 0 ));

Javascript输入文件联系表单

2 个答案: