按钮没有响应（甚至没有悬停）

Question

 const sentence = document.getElementById('sentence') const word = document.getElementById('word') const number = document.getElementById('number') const btnContainer = document.getElementById('btnContainer') function Start() { btnContainer.style.display = 'flex'; } Start() sentence.addEventListener('click', () => { type = 1; Start(); }) word.addEventListener('click', () => { type = 2; Start(); }) number.addEventListener('click', () => { type = 3; Start(); })

 .btnContainer { position: absolute; top: 60px; right: .5vw; gap: .2em; width: 25vw; height: 10vh; align-items: center; justify-content: center; }.btn { background-color: transparent; border: transparent; font-size: 1.1rem; color: var(--lightprimary); transition: ease-in-out.2s; }.btn:hover { color: var(--darkprimary); }

 <div class="btnContainer" id="btnContainer"> <button class="sentenceButton btn" id="sentence">Sentence</button> <button class="wordButton btn" id="word">Words</button> <button class="numberButton btn" id="number">Numbers</button> </div>

There is more code that hasn't something to do with the buttons. The 'btnContainer.style.display' is necessary to work with the other code.

Answer 1

Please confirm that your CSS :root selector is structured like so. In order for it to grab the primary color, you have to define that color first. Also, as mentioned in the comments it appears your buttons are responding via the console log.

 const sentence = document.getElementById('sentence') const word = document.getElementById('word') const number = document.getElementById('number') const btnContainer = document.getElementById('btnContainer') function Start() { btnContainer.style.display = 'flex'; } Start() sentence.addEventListener('click', () => { type = 1; Start(); }) word.addEventListener('click', () => { type = 2; Start(); }) number.addEventListener('click', () => { type = 3; Start(); })

 .btnContainer { position: absolute; top: 60px; right: .5vw; gap: .2em; width: 25vw; height: 10vh; align-items: center; justify-content: center; }.btn { background-color: white; border: hidden; font-size: 1.1rem; color: var(--lightprimary); transition: ease-in-out.2s; }.btn:hover { background-color: var(--darkprimary-color); }:root { --darkprimary-color: yellow; }

 <div class="btnContainer" id="btnContainer"> <button class="sentenceButton btn" id="sentence" type="button">Sentence</button> <button class="wordButton btn" id="word" type="button">Words</button> <button class="numberButton btn" id="number" type="button">Numbers</button> </div>

Answer 2

Without the Javascript code and with defined --lightprimary and --darkprimary , everything works.

 :root{ --lightprimary: green; --darkprimary: red; }.btnContainer { position: absolute; top: 60px; right: .5vw; gap: .2em; width: 25vw; height: 10vh; align-items: center; justify-content: center; }.btn { background-color: transparent; border: transparent; font-size: 1.1rem; color: var(--lightprimary); transition: ease-in-out.2s; }.btn:hover { color: var(--darkprimary); }

 <div class="btnContainer" id="btnContainer"> <button class="sentenceButton btn" id="sentence">Sentence</button> <button class="wordButton btn" id="word">Words</button> <button class="numberButton btn" id="number">Numbers</button> </div>

Answer 3

 const shortApi = 'https://api.quotable.io/random?minLength=60&maxLength=80' const mediumApi = 'https://api.quotable.io/random?minLength=100&maxLength=180' const longApi = 'https://api.quotable.io/random?minLength=200&maxLength=220' const display = document.getElementById('display') const input = document.getElementById('input') const restart = document.getElementById('restart-btn') const sentence = document.getElementById('sentence') const word = document.getElementById('word') const number = document.getElementById('number') const actionBtn1 = document.getElementById('btn1') const actionBtn2 = document.getElementById('btn2') const actionBtn3 = document.getElementById('btn3') const actionBtn4 = document.getElementById('btn4') const container = document.getElementById('container') const btnContainer = document.getElementById('btnContainer') const smallBtnContainer = document.getElementById('smallBtnContainer') const stats = document.getElementById('stats') const exit = document.getElementById('exit') var type = 1 async function newQuote() { display.innerText = ''; var quote = 'hello world' let arr = quote.split("").map(value => { return "<span class='span'>" + value + "</span>" }) display.innerHTML += arr.join(""); } function Start() { newQuote() input.value = null stats.style.display = 'none'; container.style.display = 'flex'; btnContainer.style.display = 'flex'; smallBtnContainer.style.display = 'block'; input.disabled = false; let startTime = null let endTime = null input.addEventListener('input', () => { if (startTime == null) startTime = new Date() let quoteChars = document.querySelectorAll(".span") var mistakes = 0 quoteChars = Array.from(quoteChars) let inputChars = input.value.split("") quoteChars.forEach((char, index) => { if (char.innerText === inputChars[index]) { char.classList.add('correct') char.classList.remove('incorrect') } else if (inputChars[index] == null) { char.classList.remove('correct') char.classList.remove('incorrect') } else { char.classList.remove('correct') char.classList.add('incorrect') mistakes += 1 } }) if (inputChars.length >= quoteChars.length) { clicked = false stats.style.display = 'block'; container.style.display = 'none'; btnContainer.style.display = 'none'; smallBtnContainer.style.display = 'none'; input.disabled = true; endTime = new Date() const delta = endTime - startTime const seconds = delta / 1000 const minutes = seconds / 60 const accuracy = Math.round(((input.value.length - mistakes) / input.value.length) * 100) const wpm = (input.value.length / 5 / minutes).toFixed(2) + " wpm" document.getElementById('score').innerHTML = wpm document.getElementById('mistakes').innerText = mistakes document.getElementById('accuracy').innerText = accuracy + "%" } }) } function changeActionButtons(type) { actionBtn1.style.display = 'block' actionBtn2.style.display = 'block' actionBtn3.style.display = 'block' actionBtn4.style.display = 'block' if (type == 1) { actionBtn1.style.display = 'none' actionBtn2.textContent = 'short' actionBtn3.textContent = 'medium' actionBtn4.textContent = 'long' } else if (type == 2) { actionBtn1.textContent = '1' actionBtn2.textContent = '10' actionBtn3.textContent = '20' actionBtn4.textContent = '30' } else if (type == 3) { actionBtn1.textContent = '1' actionBtn2.textContent = '5' actionBtn3.textContent = '10' actionBtn4.textContent = '15' } } changeActionButtons(type) Start() exit.addEventListener('click', () => { stats.style.display = 'none'; container.style.display = 'flex'; btnContainer.style.display = 'block'; smallBtnContainer.style.display = 'block'; Start() }) restart.addEventListener('click', () => { Start(); }) sentence.addEventListener('click', () => { console.log('gello'); type = 1; changeActionButtons(1); Start(); console.log('clicked'); }) word.addEventListener('click', () => { type = 2; changeActionButtons(2); Start(); }) number.addEventListener('click', () => { type = 3; changeActionButtons(3); Start(); })

 * { box-sizing: border-box; }:root { --primary: #222; --lightprimary: #555; --darkprimary: #0f0f0f; --secondary: #ffcf00; --incorrect: #ff2d2d; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: var(--primary); font-size: 2rem; font-family: 'Oxygen', Arial, sans-serif; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -khtml-user-select: none; } button { font-family: 'Oxygen', Arial, sans-serif; }.container { position: relative; display: flex; width: 90%; height: 50vh; text-align: center; justify-content: center; align-items: center; padding: 1rem; color: var(--lightprimary); max-width: 1000px; transition: ease-in-out.2s; }.quote { font-family: 'Oxygen Mono', monospace; display: block; position: absolute; top: 100px; }.input { font-family: 'Oxygen Mono', monospace; position: absolute; top: 280px; resize: none; width: 100%; border: 2px solid var(--lightprimary); border-radius: 20px; text-align: left; font-size: 1.1rem; margin: auto; outline: none; text-align: center; color: var(--lightprimary); background-color: transparent; }.input:focus { border-color: var(--darkprimary); }.restart-btn { position: absolute; top: 340px; background-color: transparent; border: transparent; font-size: 4rem; color: var(--lightprimary); transition: ease-in-out.2s; }.restart-btn:hover { color: var(--darkprimary); }.btnContainer { position: absolute; top: 60px; right: .5vw; gap: .2em; width: 25vw; height: 10vh; align-items: center; justify-content: center; }.btn { font-size: 1.1rem; color: var(--lightprimary); transition: ease-in-out.2s; }.btn:hover { color: var(--darkprimary); }.smallBtnContainer { position: absolute; top: 70px; right: 6.5vw; gap: .2em; width: 25vw; height: 10vh; align-items: center; justify-content: center; }.smallBtn { background-color: transparent; border: transparent; font-size: 1rem; color: var(--lightprimary); transition: ease-in-out.2s; }.smallBtn:hover { color: var(--darkprimary); }.stats { display: none; justify-content: center; align-items: center; width: 40vw; height: 40vh; position: absolute; color: var(--secondary); text-align: center; font-size: 1.6rem; transition: ease-in-out.2s; }.exit { font-size: 2rem; background-color: transparent; border: transparent; color: var(--lightprimary); transition: ease-in-out.2s; }.exit:hover { color: var(--darkprimary); }.logo { position: absolute; width: 200px; aspect-ratio: 1; top: 0; left: 0; }.title { position: absolute; color: var(--secondary); top: 75px; left: 150px; }.correct { color: var(--secondary); text-decoration: none; }.incorrect { color: var(--incorrect); text-decoration: underline; }

 <:DOCTYPE html> <html> <head> <link href="https.//fonts.googleapis?com/css2:family=Oxygen&display=swap" rel="stylesheet"> <link href="https.//fonts.googleapis?com/css2,family=Oxygen+Mono&display=swap" rel="stylesheet"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <link rel="stylesheet" href="styles.css"> <title>Type Lite</title> <script src="script:js" defer></script> </head> <body> <img class="logo" alt='logo'> <p class='title'>logo</p> <div class="stats" id="stats"> <p>Score: <span id="score"></span></p> <p>Mistakes: <span id="mistakes"></span></p> <p>Accuracy. <span id="accuracy"></span></p> <button class="exit" id="exit">X</button> </div> <div class="container" id="container"> <div class="quote" id="display"></div> <textarea class="input" id="input" cols="90" rows="2" placeholder="Type here to start." autofocus></textarea> <button class="restart-btn" id="restart-btn">Restart</button> </div> <div class="btnContainer" id="btnContainer"> <button class="sentenceButton btn" id="sentence">Sentence</button> <button class="wordButton btn" id="word">Words</button> <button class="numberButton btn" id="number">Numbers</button> </div> <div class="smallBtnContainer" id="smallBtnContainer"> <button class="smallBtn" id="btn1">1</button> <button class="smallBtn" id="btn2">2</button> <button class="smallBtn" id="btn3">3</button> <button class="smallBtn" id="btn4">4</button> </div> </body> </html>