按鈕沒有回應（甚至沒有懸停）-有解無憂

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.

uj5u.com熱心網友回復：

請確認您的 CSS:root選擇器的結構是這樣的。為了讓它獲取原色，您必須先定義該顏色。此外，如評論中所述，您的按鈕似乎通過控制臺日志做出回應。

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>

uj5u.com熱心網友回復：

沒有 Javascript 代碼和定義的--lightprimaryand --darkprimary，一切正常。

: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>

uj5u.com熱心網友回復：

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/360077.html

標籤：javascript html css

上一篇：如何檢查名稱是否已在資料庫中使用？反應 Axios

下一篇：帶有文本按鈕innerHTML的手風琴