Question

我刚刚开始学习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;
    };

};

Answer 1

我做了一些编辑：

heading元素
错误id="dob"您有id="dod"

＆＃13;

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

＆＃13;

   <!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>

＆＃13;

坚持使用javascript（初学者）

1 个答案: