Linking Javascript code in external file to HTML

Question

My code is already working thanks to Brian but still when I put it on an external file it doesn't work. Can anyone help me understand why?

js code (the other functions are ok, didn't put it here because the code would be too long):

function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    var files = evt.target.files;

    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
        f.size, ' bytes, last modified: ',
        f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a','</li>');
    }

    $("#list").html('<ul>' + output.join('') + '</ul>');    
 }


$(document).ready(function() {

    //showAllImages();
    //showAllImagesFromCategory("beach");
    styleWordCloud();


    //associar pesquisa de categoria a cada palavra da nuvem de palavras
    $( "nav ul li a" ).each(function( index ) {


        $(this).click( function(event) {
            event.preventDefault();
            clearResults();

            showAllImagesFromCategory( $(this).text() );

        });

    });


    $("#search_form").submit(function(event){
        event.preventDefault();

        var q = $("#query").val()

        clearResults();
        showAllImagesFromQuery( q );

     });

    $( "div.color" ).each(function( index ) {

        $(this).click( function(event) {
            event.preventDefault();

            var selectedColor = $(this).css("background-color");
            //alert( selectedColor );
            clearResults();
            showAllImagesNearDominantColor( selectedColor );

        });

    });

    $( "#files" ).change(handleFileSelect(event));

});

html code:

<head>
<title>Pesquisa de Imagens</title>
<meta charset="utf-8">  
<!-- Inclusao de biblioteca JQuery -->
<script src="js/jquery-2.1.1.min.js" language="javascript"></script>
<script src="js/XML_LStorage.js"></script>
<script src="js/jsCode.js" language="javascript"></script>

<link rel="stylesheet" type="text/css" href="my_style.css">


</head>

<body>

<!--zona do cabeçalho da página. Inclui logotipo e barra de navegacao-->
<header>        
    <h1 id="site_title"><a href="index.html">Pesquisa de Imagens</a></h1>


    <!-- Main Menu -->
    <h2>Main menu</h2>
    <nav class="main-navigation">
        <ol>
            <li><a class="menu" href="index.html">Home</a></li>
            <li><a class="menu" href="search_bar.html">Barra Pesquisa</a></li>
            <li><a class="menu" href="color_search.html">Pesquisa por cor dominante</a></li>
            <li class="current"><a class="menu" href="image_search.html">Pesquisa por imagens</a></li>
            <li><a class="menu" href="contact_us.html">Contacte-nos</a></li>
        </ol>
</nav>



</header>

<!-- zona de conteúdo da página. Inclui logotipo e barra de navegacao -->
<article>
    <nav class="cloud">
        <ul>
            <li><a href="#">beach</a></li>
            <li><a href="#">birthday</a></li>
            <li><a href="#">face</a></li>
            <li><a href="#">indoor</a></li>
            <li><a href="#">manmade</a></li> <!-- alterar para todos de uma maneira bacana -->
            <li><a href="#">marriage</a></li>
            <li><a href="#">nature</a></li>
            <li><a href="#">no people</a></li>
            <li><a href="#">outdoor</a></li>
            <li><a href="#">party</a></li>
            <li><a href="#">people</a></li>
            <li><a href="#">snow</a></li>
        </ul>
     </nav>

    <!-- Primeira secção -->
    <section class="search_bar">

        <h2>Pesquisa por imagens</h2>
        <p>Pesquisa por pastas</p>
        <form id="img_search">
            <input type="file" id="files" name="files[]" multiple/>
            <output id="list"></output>
        </form>
        <p>Ou arrasta a imagem para o quadrado a tracejado</p>
        <center>
        <div id="drop_zone">Drop files here</div>
        <output id="list_dropzone"></output></center>

    </section>          

</article>


</body>
</html>

Answer 1

Change the line-

$( "#files" ).change(handleFileSelect(event));

To-

$("#files").on("change", handleFileSelect); // See http://api.jquery.com/on/

Or-

$("#files").change(handleFileSelect); // See http://api.jquery.com/change/

By writing "handleFileSelect(event)" you are executing the function immediately, rather than in response to the event (the brackets pass a undefined parameter named "event" to the function and execute it straight away). jQuery will automatically pass an event object as the first parameter to the event handler you define.

As evt is undefined, files is undefined within the function - which is causing an error.

For reference, if you want to pass parameters to the event you could do this-

$("#files").on("change",  function (event) { handleFileSelect(event, someParameter); });

Linking Javascript code in external file to HTML

Question

1 answers

solution1
2 ACCPTED 2014-08-29 17:05:46

Linking Javascript code in external file to HTML

Question

1 answers

solution1 2 ACCPTED 2014-08-29 17:05:46

solution1
2 ACCPTED 2014-08-29 17:05:46