javascript - 被 javascript 困住了(初学者)-6ren

javascript - 被 javascript 困住了(初学者)

转载作者：行者123 更新时间：2023-12-03 03:22:34

24

4

我刚刚开始学习 javascript，但我一直在做我的第一个实验。我的 HTML 部分可以工作，但 javascript 没有工作。起初我认为它没有正确地将 javascript 代码链接到 HTML 代码，但现在我认为 onload 和 oninput 部分存在问题。但不知道为什么。如果有人可以提供帮助，将不胜感激。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lab 11 suits</title>
    <script src="Lab1.js"></script>
</head>
<body>
<heading>
    <h1>
        HTML 5 Test Page
    </h1>
</heading>
<p id="test"></p>
<button id="button">Press Me</button>
<p/>
Colours:<select id="list">
    <option>Red</option>
    <option>Green</option>
    <option>Blue</option>
</select>
<p/>
Your Birthday:<input type="date" id="dod"/>
A Number: <input type="range" id="range" min="1" max="10" value="1">
<span id="value">1</span>
</body>
</html>

window.onload = function() {
    var para = document.getElementById("heading");
    para.innerText = "A short exercise on creating dynamic web content.";
    var button = document.getElementById("button");
    button.onclick = function () {
        alert("Ive been clicked");
    };

    var list = document.getElementById("list");
    list.onchange = function () {
        var item = list.options[list.selectedIndex].text;
        changeColour(item);
    };
    var dob = document.getElementById("dob");
    dob.oninput = function () {
        alert("Your birth date is:" + dob.value);
    };
    var range = document.getElementById("range");
    var value = document.getElementById("value");
    range.onchange = function () {
        value.innerText = range.value;
    };

    function changeColour(colour) {
        var c = 0;
        switch (colour) {
            case "Red":
                c = "#f00";
                break;
            case "Green":
                c = "#0f0";
                break;
            case "Blue":
                c = "#00f";
                break;
        }
        document.bgColor = c;
    };

    function daysOld(dob) {
        var msPerDay = 1000 * 60 * 60 * 24,
            now = new Date(),
            diff = now - dob;
        return diff / msPerDay;
    };

};

最佳答案

我做了一些编辑:

heading 元素缺少 ID
您的 id="dob" 拼写错误 id="dod"

window.onload = function() {

    /******* EDIT 1 ********/
    // the heading element has no ID, so you need to add one, or use `querySelector` instead.
    //var para = document.getElementById("heading");
    
    var para = document.querySelector("heading");
    /***********************/
    
    para.innerText = "A short exercise on creating dynamic web content.";
    var button = document.getElementById("button");
    button.onclick = function () {
        alert("Ive been clicked");
    };

    var list = document.getElementById("list");
    list.onchange = function () {
        var item = list.options[list.selectedIndex].text;
        changeColour(item);
    };
    var dob = document.getElementById("dob");
    dob.oninput = function () {
        alert("Your birth date is:" + dob.value);
    };
    var range = document.getElementById("range");
    var value = document.getElementById("value");
    range.onchange = function () {
        value.innerText = range.value;
    };

    function changeColour(colour) {
        var c = 0;
        switch (colour) {
            case "Red":
                c = "#f00";
                break;
            case "Green":
                c = "#0f0";
                break;
            case "Blue":
                c = "#00f";
                break;
        }
        document.bgColor = c;
    };

    function daysOld(dob) {
        var msPerDay = 1000 * 60 * 60 * 24,
            now = new Date(),
            diff = now - dob;
        return diff / msPerDay;
    };

};

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lab 11 suits</title>
    <script src="Lab1.js"></script>
</head>
<body>
<heading>
    <h1>
        HTML 5 Test Page
    </h1>
</heading>
<p id="test"></p>
<button id="button">Press Me</button>
<p/>
Colours:<select id="list">
    <option>Red</option>
    <option>Green</option>
    <option>Blue</option>
</select>
<p/>
<!-- EDIT 2 -->
<!-- You had a typo on the id of your input 'dod' -> 'dob' -->
<!-- Your Birthday:<input type="date" id="dod"/> -->
Your Birthday:<input type="date" id="dob"/>

<!-- End EDIT -->
A Number: <input type="range" id="range" min="1" max="10" value="1">
<span id="value">1</span>
</body>
</html>

关于javascript - 被 javascript 困住了(初学者)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46504304/

24

4

0

文章推荐： javascript - 在 ReactVR 中创建 2D 场景

文章推荐： javascript - 如何通过 for 循环、mr[2] 和 test1[2] 添加 onclick

文章推荐： JavaScript。 Math.sqrt 将 NaN 赋予正数？

文章推荐： javascript - 如何将一根绳子翻转过来

haskell 初学者
我不明白为什么我会从 GHCi 得到以下回复。不是Maybe构造函数？ Prelude> :t Maybe :1:1: Not in scope: data constructor `Maybe' P
PHP登录认证问题(初学者)
场景是我在此网站上有不同的访问级别，我有一个适用于所有有效用户的简单登录流程，但是我现在尝试分隔不同的用户以实现对页面的不同访问。这是我页面开头的代码: // CHECKS IF THE USER
Javascript简单数学我不明白(初学者)
我的任务是:写下数字1-100。如果该数字可以被 3 整除，则将其写入数字“它可以被 3 整除”旁边的控制台。如果数字是 5，也将其写入数字旁边的控制台“它可以被 5 整除”，如果它不能被 3 整除，
Clojure元编程动态选择记录(初学者!)
我有一堆实现协议(protocol) P 的记录 (A B C)。我想编写一个方法，该方法将选择一种记录类型，构造它，然后调用它的方法。例如，如果我有一个记录列表(def types '(A B
JAVA数组与对象错误问题(初学者)
我的任务是编写一个程序，根据以下三个因素来预测您的年度燃料使用量汽车加油。我必须使用两个单独的类。这是我的第一个类，名为 AnnualFuelUse。 public class AnnualFuelU
javascript - 初学者
我是 JavaScript 新手。我已经通过 Learning JavaScript (o'reilly) 完成了我的工作，但我只是想制作我的第一个 JavaScript。我认为最好从事我感兴趣的事
python绘制一维波动方程(初学者)
我真的刚刚开始学习如何用 Python 编写代码。我有兴趣如何重现 u[x,t] 矩阵。我尝试了 return u，它抛出了一个错误。如果此代码中 for 循环的位置正确并正常运行。最重要的是，
Javascript语法困惑[初学者]？
我不明白 view("") 在作为 Model 对象一部分的以下 javascript 方法中的作用: addView: function(view) { this.views
Python模块错误-初学者
所以我正在尝试将 AppKit 导入到我的 python 项目中。我正在使用 pyCharm，但每次我尝试导入时，都会收到以下错误消息: You are using pip version 6.0.8
Java 初学者
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，
Hadoop 初学者
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 5 年前。 Improve this qu
Python 初学者- 一个程序只使用多个函数有什么问题吗？
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 2 年前。 Improve
prolog - PROLOG 初学者
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
Perl:初学者。我应该使用哪种数据结构？
好吧，不知道在哪里问这个，但我是一个初学者程序员，使用 Perl。我需要创建一个数组数组，但我不确定使用数组/哈希引用、哈希数组或数组哈希等是否更好。我需要一组匹配项:@totalmatches 每
PHP 身份验证(初学者)
我最近开始学习 PHP。我做了一个基本的网站，基本上想给它密码。如果有人能告诉我为什么这不起作用，我将不胜感激。我知道它不起作用，因为我已经尝试过了；我只是不明白为什么。 ... REST OF W
C 初学者，指针和取消引用
我试图理解 C 中的整个指针和取消引用。我几乎明白了，但遇到了非常简单的代码，结果我不明白: char *ptr = "Characters"; char val = *ptr; char *chrp
python 初学者 - 构建具有组约束的情侣列表
首先，我有这个列表(在练习中建议): Members = [('Tessa','G1'),('Evan','G2'),('Tom','G3'), ('Mia','G3'),('Claire','G3'
python - 根据字典对列表进行排序(初学者)
我有以下列表: listofanimals = ['Dog', 'Cat', 'Frog', 'Tiger', 'Sheep', 'Lion'] 我想根据字典对这个列表进行排序: score_card
php - 初学者...对同一函数中的同名变量感到困惑
1 userID = floatval($userID); 13 } else { 14 $this->userID = floatval(
R .Internal 初学者
我是 R 新手，遇到了一段我不理解的代码。更具体地说，我想知道 .Internal做。这是我尝试转换为 Matlab 的示例: dunif 我想知道.Internal和做。非常感谢您，西蒙最

首页

博学

6Ren·AI

商城

javascript - 被 javascript 困住了(初学者)