javascript - JavaScript 中函数未定义冲突

标签 javascript html asp.net vb.net countdowntimer

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

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

clock.queryselector is not a function

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

initializeClock is not defined

我应该把这个文件保存在哪里。请帮助我缺少什么?

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);
}

文件夹结构:

enter image description here

最佳答案

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

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

当您在底部包含 JS 文件时,您会收到错误,因为函数被调用但不存在。因此最好选择将其仅放在顶部。

关于javascript - JavaScript 中函数未定义冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38868539/

相关文章:

jquery - 滚动时重新计算 Canvas 高度

jquery - 如何在页面加载时设置文本框值?

c# - 如何在不使用属性路由在 Route 属性上指定名称的情况下生成 Web Api 2 URL?

asp.net - ASP.NET 虚拟路径在哪里解析波浪号 "~"?

javascript - 无法使用 JDBC (Node.js) 访问 ignite 数据库的元数据?

javascript - 风格拖鬼元素

javascript - 使用 JavaScript 进行表单验证?

javascript - iframe 视频显示不正确

javascript - 如何捕获内部异常?

javascript - 使用javascript从图像源获取文件名