Home > front end >  Button not responding (even not hover)
Button not responding (even not hover)

Time：11-19

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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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.

CodePudding user response：

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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>
<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Page link：https//www.codepudding.com/frontend/196935.html

Prev:CSS scale and transform shows lines in my Chrome browser
Next:<hr>:after places element before
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding