외부 파일의 자바 스크립트 코드를 HTML에 연결

-1

내 코드는 이미 Brian 덕분에 작동하지만 외부 파일에 저장해도 작동하지 않습니다. 아무도 왜 그 이유를 이해하도록 도와 줄 수 있습니까?외부 파일의 자바 스크립트 코드를 HTML에 연결

JS 코드 (다른 기능이 확인되는 코드가 너무 긴 것 때문에, 여기에 넣어하지 않았다) :

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 코드 :

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

출처

2014-08-29 Alexandra

브라우저 개발자 도구를 사용 할 수 있습니다. JS 콘솔에 오류가 표시됩니까? Net 탭은 JS 파일이'200 OK' 상태와 올바른 content-type으로 성공적으로로드 된 것을 보여 줍니까? – Quentin

귀하의 HTML은 HTML 3.2와 HTML 5의 이상한 결합체입니다 [validator] (http://validator.w3.org)를 사용하십시오. – Quentin

도 doctype이 누락되었습니다. – MightyPork

변경 라인 -

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

대

"handleFileSelect (이벤트)"가 아닌 이벤트에 응답보다 즉시 기능 실행된다 써서 24,

OR-

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

는 (괄호 함수를 "이벤트"라는 정의 파라미터를 전달하고 그것을 바로 실행하십시오). jQuery는 자동으로 이벤트 객체를 첫 번째 매개 변수로 전달하여 정의한 이벤트 핸들러에 전달합니다.

evt가 정의되지 않았기 때문에 함수에서 파일이 정의되지 않아 오류가 발생합니다. 참고로

, 당신은 이벤트에 매개 변수를 전달하려는 경우가 this-

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

출처

2014-08-29 17:05:46 pwdst

모든 옵션을 시도했지만 여전히 작동하지 않습니다. – Alexandra

@Alexandra http://jsfiddle.net/pwdst/qztzzwgj/1/에 jsFiddle을 분기하고 JavaScript 오류가 사라졌습니다. 일하지 않는다면 무슨 뜻입니까? 그렇지 않다는 것이 무엇인가? – pwdst

나는 지금 그것을 보았고 네가 고맙다. D – Alexandra

외부 파일의 자바 스크립트 코드를 HTML에 연결

답변

관련 문제