Fatal编程技术网
  • javascript/
  • Javascript .getElementByID（链接html和js）问题

Javascript .getElementByID（链接html和js）问题

javascript html

Javascript .getElementByID（链接html和js）问题,javascript,html,innerhtml,getelementbyid,Javascript,Html,Innerhtml,Getelementbyid,我已经开始编写代码一个月了，所以还是很新的。我当前在将js文件链接到html文件时遇到问题。由于这个问题，我的javascript没有显示在浏览器中。 我不确定问题出在哪里（是document.getElementById（'clock'）？我应该添加innerHTML吗）？如果有人能帮我找出如何链接这些文件，那就太好了。非常感谢 <html> <head> <link href="clock.css" type=&quo

我已经开始编写代码一个月了，所以还是很新的。我当前在将js文件链接到html文件时遇到问题。由于这个问题，我的javascript没有显示在浏览器中。 我不确定问题出在哪里（是document.getElementById（'clock'）？我应该添加innerHTML吗）？如果有人能帮我找出如何链接这些文件，那就太好了。非常感谢

<html>
    <head>
        <link href="clock.css" type="text/css" rel="stylesheet"></link>
        <title>TIME Time!</title>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
    </head>

    <body class="mainbod"> 

        <p class="tagline">Time for the time!</p>
        <div class="zaddy">
            <div class="clock">clock goes here</div>

        <script src="clock.js"></script>

    </body>

</html>`

      
var morning = 6;
var noon = 12;
var evening = 17;
var night = 20;

var showCurrentTime = function() {

    var clock = document.getElementById('clock');
    var currentTime = newDate();

    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    var seconds = currentTime.getSeconds();
    var meridian = "AM";

        if (hours >= noon) {
            meridian = "PM";
        }
        if (hours > noon) {
            hours = noon - 12;
        }
        if (minutes > 10) {
            minutes = "0" + minutes;
        }
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
var clockTime = hours + " : " + minutes + " : " +  seconds + "  " + meridian;

clock.innerText = clockTime;
}


时间到了！

时间到了

时钟在这里走
`
var=6；
var=12；
var=17；
var夜间=20；
var showCurrentTime=函数（）{
var clock=document.getElementById（'clock'）；
var currentTime=newDate（）；
var hours=currentTime.getHours（）；
var minutes=currentTime.getMinutes（）；
var seconds=currentTime.getSeconds（）；
var meridian=“AM”；
如果（小时>=中午）{
子午线=“PM”；
}
如果（小时>中午）{
小时=中午12点；
}
如果（分钟>10）{
分钟=“0”+分钟；
}
如果（秒<10）{
秒=“0”+秒；
}
var时钟时间=小时+“：“+分钟+”：“+秒+”+子午线；
clock.innerText=时钟时间；
}
我们缺少很多信息来帮助您。这看起来也像是一种作业——如果是的话，我建议你向你的教授寻求帮助。我可能错了，所以我会尽力帮助你：

我将假设您在end标记下面发布的javascript是您的“clock.js”文件。我想你把一切都放对了。但是，在我们对您的问题进行太多的故障排除之前，您必须首先查看元素的右括号，并确保所有元素都正确配对/匹配

值得注意的是，你有
它还没有关闭。这意味着下面的所有内容现在都是该div的一部分，可能无法正确呈现或被DOM读取。关闭div，测试它，然后用一个更彻底的问题发回给我们：）祝你好运

首先，你试图使用document.getElementById，但你没有设置任何id，因此你的html代码应该如下

var morning = 6; 
var noon = 12; 
var evening = 17; 
var night = 20;

showCurrentTime = function() { 
  var clock = document.getElementById('clock'); 
  var currentTime = new Date(); 
  var hours = currentTime.getHours(); 
  var minutes = currentTime.getMinutes(); 
  var seconds = currentTime.getSeconds(); 
  var meridian = "AM";

    if (hours >= noon) {
        meridian = "PM";
    }
    if (hours > noon) {
        hours = noon - 12;
    }
    if (minutes > 10) {
        minutes = "0" + minutes;
    }
    if (seconds < 10) {
        seconds = "0" + seconds;
    }
  var clockTime = hours + " : " + minutes + " : " + seconds + " " + meridian; 
  clock.innerText = clockTime; 
}

showCurrentTime();


时钟在这里运行

第二，在javascript方法中，该方法已定义但从未调用，new和Date（）之间还需要一个空格；因此，您的js文件应该如下所示

var morning = 6; 
var noon = 12; 
var evening = 17; 
var night = 20;

showCurrentTime = function() { 
  var clock = document.getElementById('clock'); 
  var currentTime = new Date(); 
  var hours = currentTime.getHours(); 
  var minutes = currentTime.getMinutes(); 
  var seconds = currentTime.getSeconds(); 
  var meridian = "AM";

    if (hours >= noon) {
        meridian = "PM";
    }
    if (hours > noon) {
        hours = noon - 12;
    }
    if (minutes > 10) {
        minutes = "0" + minutes;
    }
    if (seconds < 10) {
        seconds = "0" + seconds;
    }
  var clockTime = hours + " : " + minutes + " : " + seconds + " " + meridian; 
  clock.innerText = clockTime; 
}

showCurrentTime();


var-morning=6；
var=12；
var=17；
var夜间=20；
showCurrentTime=函数（）{
var clock=document.getElementById（'clock'）；
var currentTime=新日期（）；
var hours=currentTime.getHours（）；
var minutes=currentTime.getMinutes（）；
var seconds=currentTime.getSeconds（）；
var meridian=“AM”；
如果（小时>=中午）{
子午线=“PM”；
}
如果（小时>中午）{
小时=中午12点；
}
如果（分钟>10）{
分钟=“0”+分钟；
}
如果（秒<10）{
秒=“0”+秒；
}
var时钟时间=小时+“：“+分钟+”：“+秒+”+子午线；
clock.innerText=时钟时间；
}
showCurrentTime（）；
如果无法加载js文件，请确保html和js文件都位于同一文件夹或目录中

您没有时钟专用类的id。试试
document.querySelector（“.clock”）
非常感谢。我不敢相信我用了class而不是id。我还调用了我的方法并应用了其他更正。经验教训：仔细阅读所有内容。再次感谢！