Javascript HTML DOM 不能在瀏覽器中工作，但 html、css 和 js 文件可以工作

Question

我正在從一個 YT 教程中學習 JS - 我遵循了教程中教授的完全相同的代碼，但我沒有得到正確的輸出。

在提示中輸入輸入后，輸出顯示在教程中：

在提示中輸入輸入后得到的輸出（輸入出生年份）：

代碼：

索引.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <title>Javascript on Steroids</title>
</head>
<body>
    <div class="container-1">
        <h2>Challenge 1: Your Age in Days</h2>
        <div class="flex-box-container-1">
        <div>
            <button class="btn btn-primary" onclick="ageInDays()">Click me</button>
        </div>
        <div>
            <button class="btn btn-danger" onclick="reset()">Reset</button>
        </div>
        </div>

        <div class="flex-box-container-1">
            <div id="flex-box-result">
            </div>
        </div>
    </div>
    <script src = "js/script.js"></script>
</body>
</html>

腳本.js

//challenge 1: your age in days
function ageInDays() {
    var birthyear = prompt("What year where you born ");
    var age =  (2021 - birthyear) * 360;
    let h1 = document.createElement('h1');
    let textAnswer = document.createTextNode("You are "+ age + " days old");
    h1.setAttribute('id', 'ageInDays');
    h1.appendChild(textAnswer);
    document.getElementsById("flex-box-result").appendChild(h1);
}

function reset() {
    document.getElementById("ageInDays").remove();

樣式文件

.container-1 {
    border: 1px solid black;
}

.flex-box-container-1{
    display: flex;
    border : 1px solid black;
    padding: 10px;
    flex-wrap: wrap; 
    flex-direction: row;
    justify-content: space-around;
}

.flex-box-container-1 div{
    display: flex;
    padding: 10px;
    border: 1px solid black;
    align-items: center;
}

Answer 1

采用

document.getElementById("flex-box-result").appendChild(h1);

而不是

 document.getElementsById("flex-box-result").appendChild(h1);

Javascript HTML DOM 不能在瀏覽器中工作，但 html、css 和 js 文件可以工作

問題描述

1 個解決方案

解決方案1
1 2021-06-29 16:07:43

Javascript HTML DOM 不能在瀏覽器中工作，但 html、css 和 js 文件可以工作

問題描述

1 個解決方案

解決方案1 1 2021-06-29 16:07:43

解決方案1
1 2021-06-29 16:07:43