对于本视频中的年龄挑战，我收到以下错误：
Uncaught TypeError: Cannot read properties of null (reading 'appendChild') at yearBorn (script.js:10:47) at HTMLButtonElement.onclick (challenge.html:19:64) yearBorn @ script.js:10 onclick @ challenge.html:19
JS:
函数年份Born((｛
var birthYear = prompt('What year were you born?');
var ageInDays = (2022 - birthYear) * 365;
var h1 = document.createElement('h1');
var textAnswer = document.createTextNode('You are ' + ageInDays + ' days old');
h1.setAttribute('id', 'yearBorn');
h1.appendChild(textAnswer);
document.getElementById('flex-box-result').appendChild(h1);
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.3.1/css/bootstrap.min.css"
/>
<title>Javascript Challenge</title>
<link rel="stylesheet" href="static/css/index.css"
</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="yearBorn()">Click Me</button>
</div>
<div>
<button class="btn btn-danger">Reset</button>
</div>
</div>
<div class="flex-box-container-1">
<div class="flex-box-result"></div>
</div>
</div>
<script src="static/js/script.js"></script>
</body>
</html>
为什么我会出错？
我希望在文档中的按钮下方的弹性框容器中打印年龄(以天为单位(。相反，得到错误
解决方案1这一行中的错误
document.getElementById('flex-box-result').appendChild(h1)
因为document.getElementById((需要一个id，您在创建像这样的html元素时可以提供这个id
<div id="id"></div>
您的灵活框结果是一个类
<div class="flex-box-result"></div>
至
<div class="flex-box-result"></div>
解决方案2在JavaScript代码中，您还可以将querySelector方法与元素的选择器(如CSS选择器(一起使用
document.querySelector('.flex-box-result').appendChild(h1)