非常简单的Javascript完全不起作用

Question

非常简单的Javascript完全不起作用

8

我的JavaScript在.php（静态网站）文件中不起作用。我在那里使用其他3个脚本，它们确实起作用，但不是这一个。

情况很简单

JavaScript如下：

var myFile = document.getElementById('myFile');

myFile.addEventListener('change', function() {

  alert(this.files[0].size); 
});

并且PHP文件中的HTML代码（已剥离）如下：

<form onsubmit="return anotherfunction();" action="sendForm.php" enctype="multipart/form-data" method="post">    
  <table>
    <tr>
        <td>Attach an image:</td>
        <td> <input type="file" name="priloha[]" accept="image/*" /></td>
    </tr>
  </table>
</form>

JavaScript好像没有作用，就像它不存在一样。我尝试在头部、头部下方、body中、input的TD中使用JS...我还尝试将其用于外部.js文件，但是完全没有作用。我试着将“change”改为“click”，也不起作用。我整天都在尝试，但是我无法弄清楚问题出在哪里。

所以，我尝试编写更简单的代码来检查问题所在，似乎change或onchange - JS的第二行不起作用。

我还尝试指定HTML5 doctype，但没有任何作用。

我的额外.html文件包含了更简单的代码，当然也没有用...

<!DOCTYPE html>
<html>
    <head>      
  </head> 
  <body>
    <table> 
        <tr>
            <td>Input field for click popup:</td>
            <td>
                <script type="text/javascript">
                var input = document.getElementById('input');
                input.addEventListener('click', function() {
                alert("Hello"); 
                });
                </script>
            <input type="text" id="input" />
            
            </td>
        </tr>
    <table>
    </body>  
</html>

请帮帮我，我不太清楚这是什么......我忘了提到，我尝试了不同的浏览器-Opera 12.15，最新的Firefox和Chrome，在任何情况下都无法工作。但在fiddle中可以工作......

- TeeJay

小提琴在哪里？你能在这里发布它吗？ - Anderson Green

2

你需要在元素准备好/渲染完成后运行JavaScript。这意味着你可以将代码放在window.onload = function(){};中，或者在输入框的HTML之后的任何时间运行。否则，document.getElementById()将无法找到该元素。 - Ian

这个在我的Chrome浏览器上可以运行：http://jsfiddle.net/GHzp5/ - Jason

在你的前几行中，你提到了 document.getElementById('myFile')，但是在你的HTML中没有id为myFile的元素。后来你有匹配的id，那么可能会出现问题吗？ - Marc B

1

你是对的Ian，谢谢...天啊，我为什么不能自己知道这个，浪费了这么多时间...但最终你让我开心了，谢谢你，我会好好睡一觉。非常感谢你。 - TeeJay

显示剩余6条评论

2个回答

2

您在所包含的html中没有id为"myFile"的DOM元素。

- Igor

抱歉，我的错。我为了这里更短小的代码而将其剥离了，实际上它在那里。 - TeeJay

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Greg · Accepted Answer

将脚本放在标签的末尾，就在</body>结束标签之前。

脚本会同步加载它们所放置的位置，因此任何放在该元素之前的脚本将不知道该元素的存在。

此外，Igor所说的也是一样。