Question

我正在尝试在GitHub上托管我的开发人员资料。我有一个正在处理的小型javascript输入项目，该项目从API获取报价，并让您输入显示错误和WPM的结果。现在有点困难，当然需要工作，但它的功能与我的本地计算机一样完美。当我上传到gitHub时，虽然css和html似乎工作正常，但是引号和加载新引号时加载的所有javascript函数似乎根本不起作用。

我收到以下控制台错误 “未捕获的TypeError：无法读取null的属性'addEventListener' 在script.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>

Answer 1

在html标签之前的body页面底部添加脚本标签，或在脚本标签

中添加“ defer”

defer属性是一个布尔属性。如果存在，它指定在页面完成解析后执行脚本。

<script src="script.js" type="text/JavaScript" defer></script>

GitHub部署后JavaScript无法正常工作

1 个答案: