[英]Why isn't this file opening?
尝试将此代码填充到文件 index.html、style.css 和 app.js 中,它不会打开。 浏览器显示“由于出现问题,网页已重新加载”并继续加载。如果有帮助,我正在使用带有 macOS Big Sur 和 M1 的 MacBook Air。 我删除了完整的 HTML 代码并重新编写了它,发现它是导致问题的 javascript。 但我不知道为什么,因为 1) 我认为我的代码是正确的 2) 我无法打开控制台来检查错误,因为文件没有打开。 有人可以帮我吗?
我的 HTML 文件是:
<!DOCTYPE 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="style.css">
<script src="./app.js" defer></script>
<title>Document</title>
</head>
<body>
<div class="type" contenteditable="true">In .type</div>
<div class="words">In .words</div>
</body>
</html>
我的 JavaScript 文件是:
const type = document.querySelector(".type");
const words = document.querySelector(".words");
console.log(type.innerHTML.split(""));
for (let i=0; i < type.innerHTML.split("").length; i++) {
type.innerHTML += `<span>${i}</span>`
}
我的 css 文件是:
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #333;
}
.type, .words {
font-family: 'JetBrains Mono', monospace;
color: #fff;
border: 2px solid #007bff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 200px;
border-radius: 20px;
display: flex;
align-items: center;
padding: 50px;
font-size: 100px;
outline: none;
}
.type {
background-color: transparent;
z-index: 2;
}
.words {
background-color: #333;
z-index: 1;
}
您正在对元素type
运行循环并在循环中更新它。 你创造了一个无限循环,我的朋友。
尝试改变这个 -
for (let i=0; i < type.innerHTML.split("").length; i++) {
type.innerHTML += `<span>${i}</span>`
}
对此——
let typesplit = type.innerHTML.split("")
for (let i=0; i < typesplit.length ; i++) {
type.innerHTML += `<span>${i}</span>`
}
这样它就不会每次都更新.type
的值。
也尽量不要使用type
作为变量名,因为它是Typescript
中类似于JavaScript
的保留字。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.