javascript中未定义函数冲突答案

【问题标题】：function is not defined conflicts in javascriptjavascript中未定义函数冲突
【发布时间】：2016-08-10 08:52:55
【问题描述】：

我有一个 Javascript 倒数计时器，它在单击按钮时被调用。 Javascript 在外部文件中定义。 timer的CSS也是一个外部文件。

当我在页面开头包含 javascript 时，我得到了

clock.queryselector 不是函数

当我在页面末尾包含 javascript 时，我得到了

initializeClock 没有定义

我应该把这个文件保存在哪里。请帮助我错过了什么？

HTML

<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

<%-- <script src="JScript.js" type="text/javascript"></script>--%>

 </head>
 <body>

<form id="form1" runat="server">
<div>
 <h3>Revervation Time Left</h3>
 <div id="clockdiv" runat="server"  style=" border: 1px solid red;">

   <div>
     <span class="minutes"></span>
     <div class="smalltext">Minutes</div>
   </div>
   <div>
     <span class="seconds"></span>
     <div class="smalltext">Seconds</div>
  </div>
 </div>

 <div >
   <asp:Button ID="Button1" runat="server" Text="Button" />
 </div>
</div>

  <asp:ScriptManager ID="ScriptManager1" runat="server">
  </asp:ScriptManager>

  </form>

   <script src="JScript.js" type="text/javascript"></script>

 </body>
 </html>

代码

 Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click

    ScriptManager.RegisterStartupScript(Me, Me.GetType(), "myFunction", "initializeClock('clockdiv', 'Aug 10 2016 13:02:23');", True)
    'ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "none", "CallMe();", True)

End Sub

Javascript

 function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);

return {

    'minutes': minutes,
    'seconds': seconds
};
}

 function initializeClock(id, endtime) {
  // alert(endtime);
  var clock = document.getElementById(id);

var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');

function updateClock() {
    var t = getTimeRemaining(endtime);


    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
        clearInterval(timeinterval);
    }
}

updateClock();
var timeinterval = setInterval(updateClock, 1000);
}

文件夹结构：

【问题讨论】：

点击按钮时是否会调用initialiseClock，还是在此之前触发？

标签： javascript html asp.net vb.net countdowntimer

【解决方案1】：

请检查为什么您会收到 clock.queryselector is not a function 这个错误。

您的 JS 文件中缺少某些内容，如果您能解决的话。它会帮助你。

当您在底部包含 JS 文件时，您会收到错误，因为函数被调用但不存在。所以更好的选择它只放在顶部。

【讨论】：

当我把它放在顶部时，当时 html 没有完全呈现，它会抛出 clock.queryselector is not defined。所以我把它放在底部，它是固定的。但随后它会引发第二个错误。
@abdul 他的意思是：你应该把它放在开头。错误：clock.queryselector 可以修复，你应该专注于调试它
@ssbb : 你能建议如何解决它吗？
您的代码看起来是正确的，我预计错误会附加，因为 getElementById 返回错误的内容，然后您尝试调用它会失败。你应该 console.log(clock) 看看这一步是否一切正常。我怀疑
@ssbb ：谢谢亲爱的。有效。我把它放在开头。仍然困惑为什么我之前把它放在上面时它不起作用。