javascript 中未定义函数冲突

Question

我有一个 Javascript 倒数计时器，它在单击按钮时调用。 Javascript 在外部文件中定义。 timer的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);
}

文件夹结构：

Answer 1

请检查为什么会出现 clock.queryselector is not a function this 错误。

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

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

javascript 中未定义函数冲突

function is not defined conflicts in javascript

html

javascript

vb.net

asp.net

countdowntimer