Javascript html中的无意义错误_Javascript_Html_Css

Javascript html中的无意义错误

javascript html css

Javascript html中的无意义错误,javascript,html,css,Javascript,Html,Css,下午我正在用javascript创建一个基本的待办事项列表，但当我打开电脑时，大约晚上8点，我发现一个错误，对我来说似乎是恶意的，请检查并告诉我为什么会发生这种情况 index.html：- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont

下午我正在用javascript创建一个基本的待办事项列表，但当我打开电脑时，大约晚上8点，我发现一个错误，对我来说似乎是恶意的，请检查并告诉我为什么会发生这种情况

index.html：-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDo List</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Grandstander:wght@200&display=swap" rel="stylesheet">
</head>
<body onload="changebg()">
    <div class="main">
        <h1 id="namelem" style="font-size: 30px;"></h1>
        <div class="list">
            <h id="msg" style="font-size:40px;font-family: 'Dancing Script', cursive;"></h><br>
            <h style="font-size:20px;font-weight:bold;">Your todo list cannot contain more than 8 tasks, it can tire you </h>
            <hr>
            <ul class="todolist">
                <li>Wake up</li>
                <br>
                <li id="1"></li>
                <li id="2"></li>
                <li id="3"></li>
                <li id="4"></li>
                <li id="5"></li>
                <li id="6"></li>
                <li id="7"></li>
                <li id="8"></li>
                <li>Sleep</li><br>
            </ul>         
            <hr><br>
            <input type="text" id="taskinp" placeholder="Enter your task here">
            <input type="button" value="Sumbit" class="sumbit_btn" onclick="takeTask()">
            <br><br>
            <input type="text" id="remtsk" placeholder="Enter task number to remove">
            <input type="button" value="Remove" class="delbtn" onclick="takeremTsk()">
        </div>
    </div>
    <script src="logic.js"></script>
</body>
</html>

及

logic.js：-

let name = prompt("Could you enter your name, please try to write only 9 charecter in your name");
alert("Do not enter too long task to mentain your daily tasks beautifully!");
let msg = document.getElementById('msg');
msg.innerHTML = "Todo list of " + name;
document.getElementById('namelem').innerHTML = "Todo list of " + name + dateNow;

const todoitem1 = document.getElementById('1');
const todoitem2 = document.getElementById('2');
const todoitem3 = document.getElementById('3');
const todoitem4 = document.getElementById('4');
const todoitem5 = document.getElementById('5');
const todoitem6 = document.getElementById('6');
const todoitem7 = document.getElementById('7');
const todoitem8 = document.getElementById('8');

const takeTask = () => {
    const task = document.getElementById('taskinp').value;
    addTask()
};

const addTask = () => {
    const task = document.getElementById('taskinp').value;
    if(todoitem1.innerHTML == ""){
        todoitem1.innerHTML = "1] " + task;
    }
    else if(todoitem2.innerHTML == ""){
        todoitem2.innerHTML = "2] " + task;
    }
    else if(todoitem3.innerHTML == ""){
        todoitem3.innerHTML = "3] " + task;
    }
    else if(todoitem4.innerHTML == ""){
        todoitem4.innerHTML = "4] " + task;
    }
    else if(todoitem5.innerHTML == ""){
        todoitem5.innerHTML  = "5] " + task;
    }
    else if(todoitem6.innerHTML == ""){
        todoitem6.innerHTML = "6] " + task;
    }
    else if(todoitem7.innerHTML == ""){
        todoitem7.innerHTML = "7] " + task;
    }
    else if(todoitem8.innerHTML == ""){
        todoitem8.innerHTML = "8] " + task;
    }
    else{
        alert("You have exceeded your limits !");
    }
};

const takeremTsk = () => {
    const removetotask = document.getElementById('remtsk').value;
    removetask()
};

const removetask = () => {
    const removetotask = document.getElementById('remtsk').value;
    if(removetotask == 1){
        todoitem1.innerHTML = "";
    }
    else if(removetotask == 2){
        todoitem2.innerHTML = "";
    }
    else if(removetotask == 3){
        todoitem3.innerHTML = "";
    }
    else if(removetotask == 4){
        todoitem4.innerHTML = "";
    }
    else if(removetotask == 5){
        todoitem5.innerHTML = "";
    }
    else if(removetotask == 6){
        todoitem6.innerHTML = "";
    }
    else if(removetotask == 7){
        todoitem7.innerHTML = "";
    }
    else if(removetotask == 8){
        todoitem8.innerHTML = "";
    }
    else{
        alert("Invalid Choice!");
    }
};

const changebg = () => {
    randNum = Math.floor(Math.random() * 11);

    colors = ['purple', 'indigo', 'blue', 'green', 'orange','yellow','red','aqua','royalblue','white', 'darkgreen','lightgreen'];

    randCol = colors[randNum];

    document.body.style.background = randCol;
}

我得到了一个错误

Unresolved reference changebg in body:onload

还有一个是

未解析的引用takeTask（）

这段代码在下午运行得很好，但现在我打开了它，没有对任何文件做任何更改，我得到的错误没有任何意义

另一个混乱是onclick，我在按钮上分配了一些onclick函数，但当我单击它们时，它会显示

未解析引用

，但我已经检查了它们是否已定义，并且还检查了javascript在页面正确加载后是否执行。所以请帮帮我

谢谢

没有无意义的错误消息

但是也有一些令人困惑的问题，在您的例子中，是在脚本顶部附近使用了变量

dateNow

，而该变量在任何地方都没有定义。由于这个错误在早期发生，下面的任何内容都不会被解释，因此当您使用像

changebg

lowerdown这样的方法时，它们就不存在了。修复这个错误（在下面的示例中，我刚刚注释掉了有问题的行），一切都正常

let name=prompt（“您能输入您的姓名吗，请尝试在您的姓名中只写9个字符”）；
提醒（“不要输入太长的任务来完美地完成日常任务！”）；
让msg=document.getElementById（'msg'）；
msg.innerHTML=“Todo列表”+名称；
//document.getElementById（'namelem'）.innerHTML=“Todo列表”+name+dateNow；
const todoitem1=document.getElementById（'1'）；
const todoitem2=document.getElementById（'2'）；
const todoitem3=document.getElementById（'3'）；
const todoitem4=document.getElementById（'4'）；
const todoitem5=document.getElementById（'5'）；
const todoitem6=document.getElementById（'6'）；
const todoitem7=document.getElementById（'7'）；
const todoitem8=document.getElementById（'8'）；
const takeTask=（）=>{
const task=document.getElementById（'taskinp'）.value；
addTask（）
};
const addTask=（）=>{
const task=document.getElementById（'taskinp'）.value；
如果（todoitem1.innerHTML==“”）{
todoitem1.innerHTML=“1]”+任务；
}
else if（todoitem2.innerHTML==“”）{
todoitem2.innerHTML=“2]”任务；
}
else if（todoitem3.innerHTML==“”）{
todoitem3.innerHTML=“3]”任务；
}
else if（todoitem4.innerHTML==“”）{
todoitem4.innerHTML=“4]”任务；
}
else if（todoitem5.innerHTML==“”）{
todoitem5.innerHTML=“5]”任务；
}
else if（todoitem6.innerHTML==“”）{
todoitem6.innerHTML=“6]”任务；
}
else if（todoitem7.innerHTML==“”）{
todoitem7.innerHTML=“7]”+任务；
}
else if（todoitem8.innerHTML==“”）{
todoitem8.innerHTML=“8]”+任务；
}
否则{
警告（“您已超出限制！”）；
}
};
const takeremTsk=（）=>{
const removetask=document.getElementById（'remtsk'）.value；
removetask（）
};
常量removetask=（）=>{
const removetask=document.getElementById（'remtsk'）.value；
如果（删除任务==1）{
todoitem1.innerHTML=“”；
}
否则如果（删除任务==2）{
todoitem2.innerHTML=“”；
}
否则如果（删除任务==3）{
todoitem3.innerHTML=“”；
}
否则如果（删除任务==4）{
todoitem4.innerHTML=“”；
}
否则如果（删除任务==5）{
todoitem5.innerHTML=“”；
}
否则如果（删除任务==6）{
todoitem6.innerHTML=“”；
}
否则如果（删除任务==7）{
todoitem7.innerHTML=“”；
}
否则如果（删除任务==8）{
todoitem8.innerHTML=“”；
}
否则{
警告（“无效选择！”）；
}
};
const changebg=（）=>{
randNum=Math.floor（Math.random（）*11）；
颜色=[‘紫色’、‘靛蓝’、‘蓝色’、‘绿色’、‘橙色’、‘黄色’、‘红色’、‘水蓝’、‘皇家蓝’、‘白色’、‘深绿色’、‘浅绿色’]；
randCol=颜色[randNum]；
document.body.style.background=randCol；
}

*{
填充：0px；
边际：0px；
}
梅因先生{
高度：100vh；
宽度：100%；
}
.名单{
高度：650px；
宽度：400px；
背景色：#6a89cc；
位置：相对位置；
顶部：-35px；
左：40%；
边框右上角半径：50px；
边框右下半径：50px；
左边框：15px黄色虚线；
}
托多利斯特先生{
位置：相对位置；
左：40px；
顶部：10px；
字体大小：25px；
字体系列：“正面看台”，草书；
填充：10px；
利润率：10px；
列表样式类型：方形；
}
#taskinp{
宽度：300px；
高度：40px；
大纲：无；
边框左上半径：50px；
边框左下半径：50px；
边界：无；
背景色：薰衣草色；
颜色：黑色；
}
.sumbit_btn{
宽度：96px；
高度：30px；
边框右上角半径：50px；
边框右下半径：50px；
边界：无；
大纲：无；
背景：巧克力；
}
#雷姆茨克{
宽度：300px；
高度：40px；
大纲：无；
边框左上半径：50px；
边框左下半径：50px；
边界：无；
背景色：薰衣草色；
颜色：黑色；
}
德尔布顿先生{
宽度：96px；
高度：30px；
边框右上角半径：50px；
边框右下半径：50px；
边界：无；
大纲：无；
背景：巧克力；
}


待办事项清单


您的待办事项列表不能包含超过8项任务，这可能会使您感到疲劳


醒醒









Unresolved reference changebg in body:onload