Я пытаюсь разместить свой профиль разработчика на GitHub. У меня есть небольшой javascript проект ввода текста, над которым я работаю, который получает цитату из API и позволяет вам печатать результаты, показывающие ваши ошибки и WPM. Сейчас он немного грубоват и, безусловно, нуждается в работе, но он отлично работает, как на моей локальной машине. Когда я загружал на gitHub, css и html, казалось, работали нормально, но кавычка и все функции javascript, которые загружаются при загрузке новой кавычки, не работают вообще.
Я получаю следующую консольную ошибку "Uncaught TypeError: Невозможно прочитать свойство 'addEventListener' с нулевым значением в сценарии. js: 16"
Я подумал, что GitHub может быть полезен также https://github.com/nicklandreth73/Nick-Landreth
const randomQuoteApiUrl = 'https://api.quotable.io/random'
const quoteDisplayElement = document.getElementById('quoteDisplay')
const quoteInputElement = document.getElementById('quoteInput')
const timerElement = document.getElementById('timer')
const wpmElement = document.getElementById('wpm')
const errorsElement = document.getElementById('errors')
let errors
let minutes
let words
let wpm
let startTime
// checks at each input and performs neccesary operation
quoteInputElement.addEventListener('input', () => {
const arrayQuote = quoteDisplayElement.querySelectorAll('span')
const arrayValue = quoteInputElement.value.split('')
let correct = true
arrayQuote.forEach((characterSpan, index) => {
const character = arrayValue[index]
if (character == null) {
characterSpan.classList.remove('correct')
characterSpan.classList.remove('incorrect')
correct = false
}
else if (character === characterSpan.innerText) {
characterSpan.classList.add('correct')
characterSpan.classList.remove('incorrect')
addLength()
} else {
characterSpan.classList.add('incorrect')
characterSpan.classList.remove('correct')
correct = false
removeLength()
}
})
if (correct) renderNewQuote()
})
// gets a new quote from randomQuoteApi
function getRandomQuote() {
return fetch(randomQuoteApiUrl)
.then(response => response.json())
.then(data => data.content)
}
// resets all elements and gets a new quote
async function renderNewQuote() {
const quote = await getRandomQuote()
quoteInputElement.maxLength = '1'
errors = 0
quoteDisplayElement.innerHTML = ''
quoteInputElement.value = null
quote.split('').forEach(character => {
const characterSpan = document.createElement('span')
characterSpan.innerText = character
quoteDisplayElement.appendChild(characterSpan)
})
startTimer()
startTracking()
}
function addLength() {
quoteInputElement.maxLength = (quoteInputElement.value.length + 1)
}
function removeLength() {
if (quoteInputElement.maxLength >= 2) {
quoteInputElement.maxLength = (quoteInputElement.value.length - 1)
}
errors++
}
// begins the timer
function startTimer() {
timerElement.innerText = 0
startTime = new Date()
setInterval(() => {
timerElement.innerText = "Time in seconds: " + parseInt(getTimerTime())
}, 1000)
}
//gets the timer
function getTimerTime() {
return ((new Date() - startTime) / 1000)
}
//begins the tracking of words per minute and errors
function startTracking() {
wpm = 0
minutes = (getTimerTime() / 60)
setInterval(() => {
words = (quoteInputElement.value.length / 5)
minutes = (getTimerTime() / 60)
wpm = (words / minutes)
wpmElement.innerText = "WPM:" + parseInt(wpm)
errorsElement.innerText = errors
}, 100)
}
renderNewQuote()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<title>Speed Typing</title>
</head>
<body>
<div class="timer" id="timer"></div>
<div class="wpm" id="wpm"></div>
<div class="errors" id="errors"></div>
<div class="container">
<div class="quote-display" id="quoteDisplay"></div>
<textarea id="quoteInput" class="quote-input" maxlength="1" autofocus></textarea>
</div>
</body>
</html>