0
のjsファイル内でaddEventListenerとの違いとスクリプトタグ内
<!DOCTYPE html>
<html>
<head>
<title>Understanding File upload and File access Javascript</title>
</head>
<body>
<input type = "file" id = "files" name = "files[]" multiple></input>
<output id = "list"></output>
<script>
function handleFileSelect(evt){
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>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>
は、この例では、完璧に動作したindex.htmlとエラーなし。エラーが発生するTypeError：jsファイルからjavascript関数を呼び出すと、document.getElementById（...）がnullになっています。このコードは次のとおりです。
index.htmlを
<!DOCTYPE html>
<html>
<head>
<title>Understanding File upload and File access Javascript</title>
<script src = "fileaccess.js" type = "text/javascript"></script>
</head>
<body>
<input type = "file" id = "files" name = "files[]" multiple></input>
<output id = "list"></output>
</body>
</html>
index.js
function handleFileSelect(evt){
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>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
さて、これらの両方の例相違するものです。私はHTMLページでjavascript関数を呼び出すとエラーが発生する理由を理解できません。
など、など
window.onloadとして、DOMContentLoadedを待つハンドラ。スクリプトタグを一番下に置き、代わりに '