JavaScript - Uncaught TypeError: totype[totypeIndex] is undefined
JavaScript - Uncaught TypeError: totype[totypeIndex] is undefined
我正在关注 tutorial 并完成了教程并制作了项目，但过了一段时间我的 JS 显示错误 Uncaught TypeError: totype[totypeIndex] is undefined 当我首先尝试记录 totype[totypeIndex] 的类型时它显示 String 一段时间后显示 undefined.
我的代码：
const typedSpan = document.querySelector(".typed") // Storing the Span of HTML of Class 'typed' for changing the text
const totype = ["Fun", "Hard", "Love"] // Array in which all of the words which have to be typed are stored
const delayTyping_char = 200; // 200ms will be waited before next Character of the Text is typed
const delayErasing_text = 150; // 100ms will be waited before removing the next character
const delayTyping_text = 3000; // 2500ms will be waited before everything is erased & next text is typed
let totypeIndex = 0; // Index of The text which is being typed
let charIndex = 0; // Index of The Character which is being typed
function typeText() {
if (charIndex < totype[totypeIndex].length) {
typedSpan.textContent += totype[totypeIndex].charAt(charIndex); // Value of The Span in HTML is = the Character at the index of charIndex of the Text which is being typed
charIndex++; // Adding 1 to charIndex
setTimeout(typeText, delayTyping_char); // Calling typeText Until the charIndex is greater than the lenght of the Text which is being typed
} else {
setTimeout(eraseText, delayTyping_text); // if charIndex is Greater than lenght of the text which is being type then after the time setted (delayTyping_text) erase function will be called
}
}
function eraseText() {
if (charIndex > 0) {
typedSpan.textContent = totype[totypeIndex].substring(0, charIndex - 1); // substring(0, charIndex-1) here charIndex-1 is saying to select the text leaving one of last text behind
charIndex = charIndex - 1; // subtracting 1 from charIndex
setTimeout(eraseText, delayErasing_text); // Will call eraseText() Function until the charIndex is not equal to 0
} else {
totypeIndex++; // If everything is erased then the totypeIndex will be increased and next text in Array (totype) will be typed
if (totypeIndex > totype.length) // If totypeIndex is equal to or greater than the number of text to be typed then
totypeIndex = 0; // totypeIndex will be 0 so that we can start from the first text in the array (toType) and
setTimeout(typeText, delayTyping_text); // after some delay presetted (delayTyping_text) typeText() Function is called
}
}
window.onload = function() {
setTimeout(typeText, delayTyping_text);
} // typText() Function is called when everything is loaded
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #111111;
font-family: monospace;
color: #ffffff;
text-align: center;
}
.wrapper {
height: 100vh;
width: auto;
display: flex;
justify-content: center;
align-items: center;
}
.effect-wrapper {
text-align: center;
font-weight: normal;
}
.typed {
font-weight: bold;
color: #00bdff;
}
.cursor {
display: inline-block;
background-color: #b0ff95;
animation: blinker 800ms infinite;
}
.cursor.typing-true {
animation: none;
}
@keyframes blinker {
0% {
background-color: #b0ff95;
}
50% {
background-color: transparent;
}
100% {
background-color: #b0ff95;
}
}
<div class="wrapper">
<!-- Wrapper Start -->
<h1 class="effect-wrapper">Coding is <span class="typed"></span> <span class="cursor"> </span></h1>
</div>
<!-- Wrapper End -->
请告诉我错误是什么以及如何解决？
提前致谢
此处有错别字
if (totypeIndex > totype.length) // If totypeIndex is equal to or greater than the number of text to be typed then
您必须将此语句设置为更高或等于，因此请使用 >= 而不是 >
const typedSpan = document.querySelector(".typed") // Storing the Span of HTML of Class 'typed' for changing the text
const totype = ["Fun", "Hard", "Love"] // Array in which all of the words which have to be typed are stored
const delayTyping_char = 200; // 200ms will be waited before next Character of the Text is typed
const delayErasing_text = 150; // 100ms will be waited before removing the next character
const delayTyping_text = 3000; // 2500ms will be waited before everything is erased & next text is typed
let totypeIndex = 0; // Index of The text which is being typed
let charIndex = 0; // Index of The Character which is being typed
function typeText() {
if (charIndex < totype[totypeIndex].length) {
typedSpan.textContent += totype[totypeIndex].charAt(charIndex); // Value of The Span in HTML is = the Character at the index of charIndex of the Text which is being typed
charIndex++; // Adding 1 to charIndex
setTimeout(typeText, delayTyping_char); // Calling typeText Until the charIndex is greater than the lenght of the Text which is being typed
} else {
setTimeout(eraseText, delayTyping_text); // if charIndex is Greater than lenght of the text which is being type then after the time setted (delayTyping_text) erase function will be called
}
}
function eraseText() {
if (charIndex > 0) {
typedSpan.textContent = totype[totypeIndex].substring(0, charIndex - 1); // substring(0, charIndex-1) here charIndex-1 is saying to select the text leaving one of last text behind
charIndex = charIndex - 1; // subtracting 1 from charIndex
setTimeout(eraseText, delayErasing_text); // Will call eraseText() Function until the charIndex is not equal to 0
} else {
totypeIndex++; // If everything is erased then the totypeIndex will be increased and next text in Array (totype) will be typed
if (totypeIndex >= totype.length) // If totypeIndex is equal to or greater than the number of text to be typed then
totypeIndex = 0; // totypeIndex will be 0 so that we can start from the first text in the array (toType) and
setTimeout(typeText, delayTyping_text); // after some delay presetted (delayTyping_text) typeText() Function is called
}
}
window.onload = function() {
setTimeout(typeText, delayTyping_text);
} // typText() Function is called when everything is loaded
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #111111;
font-family: monospace;
color: #ffffff;
text-align: center;
}
.wrapper {
height: 100vh;
width: auto;
display: flex;
justify-content: center;
align-items: center;
}
.effect-wrapper {
text-align: center;
font-weight: normal;
}
.typed {
font-weight: bold;
color: #00bdff;
}
.cursor {
display: inline-block;
background-color: #b0ff95;
animation: blinker 800ms infinite;
}
.cursor.typing-true {
animation: none;
}
@keyframes blinker {
0% {
background-color: #b0ff95;
}
50% {
background-color: transparent;
}
100% {
background-color: #b0ff95;
}
}
<div class="wrapper">
<!-- Wrapper Start -->
<h1 class="effect-wrapper">Coding is <span class="typed"></span> <span class="cursor"> </span></h1>
</div>
<!-- Wrapper End -->
我正在关注 tutorial 并完成了教程并制作了项目，但过了一段时间我的 JS 显示错误 Uncaught TypeError: totype[totypeIndex] is undefined 当我首先尝试记录 totype[totypeIndex] 的类型时它显示 String 一段时间后显示 undefined.
我的代码：
const typedSpan = document.querySelector(".typed") // Storing the Span of HTML of Class 'typed' for changing the text
const totype = ["Fun", "Hard", "Love"] // Array in which all of the words which have to be typed are stored
const delayTyping_char = 200; // 200ms will be waited before next Character of the Text is typed
const delayErasing_text = 150; // 100ms will be waited before removing the next character
const delayTyping_text = 3000; // 2500ms will be waited before everything is erased & next text is typed
let totypeIndex = 0; // Index of The text which is being typed
let charIndex = 0; // Index of The Character which is being typed
function typeText() {
if (charIndex < totype[totypeIndex].length) {
typedSpan.textContent += totype[totypeIndex].charAt(charIndex); // Value of The Span in HTML is = the Character at the index of charIndex of the Text which is being typed
charIndex++; // Adding 1 to charIndex
setTimeout(typeText, delayTyping_char); // Calling typeText Until the charIndex is greater than the lenght of the Text which is being typed
} else {
setTimeout(eraseText, delayTyping_text); // if charIndex is Greater than lenght of the text which is being type then after the time setted (delayTyping_text) erase function will be called
}
}
function eraseText() {
if (charIndex > 0) {
typedSpan.textContent = totype[totypeIndex].substring(0, charIndex - 1); // substring(0, charIndex-1) here charIndex-1 is saying to select the text leaving one of last text behind
charIndex = charIndex - 1; // subtracting 1 from charIndex
setTimeout(eraseText, delayErasing_text); // Will call eraseText() Function until the charIndex is not equal to 0
} else {
totypeIndex++; // If everything is erased then the totypeIndex will be increased and next text in Array (totype) will be typed
if (totypeIndex > totype.length) // If totypeIndex is equal to or greater than the number of text to be typed then
totypeIndex = 0; // totypeIndex will be 0 so that we can start from the first text in the array (toType) and
setTimeout(typeText, delayTyping_text); // after some delay presetted (delayTyping_text) typeText() Function is called
}
}
window.onload = function() {
setTimeout(typeText, delayTyping_text);
} // typText() Function is called when everything is loaded
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #111111;
font-family: monospace;
color: #ffffff;
text-align: center;
}
.wrapper {
height: 100vh;
width: auto;
display: flex;
justify-content: center;
align-items: center;
}
.effect-wrapper {
text-align: center;
font-weight: normal;
}
.typed {
font-weight: bold;
color: #00bdff;
}
.cursor {
display: inline-block;
background-color: #b0ff95;
animation: blinker 800ms infinite;
}
.cursor.typing-true {
animation: none;
}
@keyframes blinker {
0% {
background-color: #b0ff95;
}
50% {
background-color: transparent;
}
100% {
background-color: #b0ff95;
}
}
<div class="wrapper">
<!-- Wrapper Start -->
<h1 class="effect-wrapper">Coding is <span class="typed"></span> <span class="cursor"> </span></h1>
</div>
<!-- Wrapper End -->
请告诉我错误是什么以及如何解决？
提前致谢
此处有错别字
if (totypeIndex > totype.length) // If totypeIndex is equal to or greater than the number of text to be typed then
您必须将此语句设置为更高或等于，因此请使用 >= 而不是 >
const typedSpan = document.querySelector(".typed") // Storing the Span of HTML of Class 'typed' for changing the text
const totype = ["Fun", "Hard", "Love"] // Array in which all of the words which have to be typed are stored
const delayTyping_char = 200; // 200ms will be waited before next Character of the Text is typed
const delayErasing_text = 150; // 100ms will be waited before removing the next character
const delayTyping_text = 3000; // 2500ms will be waited before everything is erased & next text is typed
let totypeIndex = 0; // Index of The text which is being typed
let charIndex = 0; // Index of The Character which is being typed
function typeText() {
if (charIndex < totype[totypeIndex].length) {
typedSpan.textContent += totype[totypeIndex].charAt(charIndex); // Value of The Span in HTML is = the Character at the index of charIndex of the Text which is being typed
charIndex++; // Adding 1 to charIndex
setTimeout(typeText, delayTyping_char); // Calling typeText Until the charIndex is greater than the lenght of the Text which is being typed
} else {
setTimeout(eraseText, delayTyping_text); // if charIndex is Greater than lenght of the text which is being type then after the time setted (delayTyping_text) erase function will be called
}
}
function eraseText() {
if (charIndex > 0) {
typedSpan.textContent = totype[totypeIndex].substring(0, charIndex - 1); // substring(0, charIndex-1) here charIndex-1 is saying to select the text leaving one of last text behind
charIndex = charIndex - 1; // subtracting 1 from charIndex
setTimeout(eraseText, delayErasing_text); // Will call eraseText() Function until the charIndex is not equal to 0
} else {
totypeIndex++; // If everything is erased then the totypeIndex will be increased and next text in Array (totype) will be typed
if (totypeIndex >= totype.length) // If totypeIndex is equal to or greater than the number of text to be typed then
totypeIndex = 0; // totypeIndex will be 0 so that we can start from the first text in the array (toType) and
setTimeout(typeText, delayTyping_text); // after some delay presetted (delayTyping_text) typeText() Function is called
}
}
window.onload = function() {
setTimeout(typeText, delayTyping_text);
} // typText() Function is called when everything is loaded
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #111111;
font-family: monospace;
color: #ffffff;
text-align: center;
}
.wrapper {
height: 100vh;
width: auto;
display: flex;
justify-content: center;
align-items: center;
}
.effect-wrapper {
text-align: center;
font-weight: normal;
}
.typed {
font-weight: bold;
color: #00bdff;
}
.cursor {
display: inline-block;
background-color: #b0ff95;
animation: blinker 800ms infinite;
}
.cursor.typing-true {
animation: none;
}
@keyframes blinker {
0% {
background-color: #b0ff95;
}
50% {
background-color: transparent;
}
100% {
background-color: #b0ff95;
}
}
<div class="wrapper">
<!-- Wrapper Start -->
<h1 class="effect-wrapper">Coding is <span class="typed"></span> <span class="cursor"> </span></h1>
</div>
<!-- Wrapper End -->