Я не могу изменить значение метки - PullRequest
Новая
       1

Я не могу изменить значение метки

0 голосов
/ 12 марта 2020

Я создал скрипт, в котором пользователь будет изменять некоторые значения моей игры (имя игрока, требование выиграть), но он не подчиняется ни одному из условий, тем более меняет значение, просто выдает мне ошибку, которая независимо от того, из введенных отображается. поскольку я сам начинающий DOM и javascirpt, возможно, я что-то пропустил, уже проверил все возможные ошибки, которые я мог совершить, но я не нашел решения

Я оставил только самые важные части своего кода 

document.querySelector('#btn-apply').addEventListener('click', function() { // Apply the settings
    
    namePlayer0 = document.querySelector('#player-name-0').textContent // Current name of player 1
    namePlayer1 = document.querySelector('#player-name-1').textContent 
    inputNamePlayer0 = document.querySelector('#ipt-player-0').textContent // Name to be changed
    inputNamePlayer1 = document.querySelector('#ipt-player-1').textContent 
    winnerPoints = document.querySelector('.winner-condiction').textContent 
    iptScore = document.getElementById('ipt-score').textContent // Condition for the winner

    if(inputNamePlayer0 === '' || inputNamePlayer1 === '') { // Check if the inputs are empty
        document.querySelector('.msg').classList.add('warning')
        document.getElementById('warning-msg').textContent = 'Name fields are empty'
    } else { 
        document.querySelector('.msg').classList.add('sucess')
        document.getElementById('warning-msg').textContent = 'Values have been successfully changed'
        namePlayer0 = inputNamePlayer0 // The player's name is changed by the input value
        namePlayer1 = inputNamePlayer1
    }

    if(iptScore < 10 || iptScore > 300) {// Checks whether the entered value meets the requirements
        document.querySelector('.msg').classList.add('warning')
        document.getElementById('warning-msg').textContent = 'Condition to win cannot be greater than 300 and less than 10'
    } else {
        winnerPoints = iptScore // Input value entered is stored the condition
    }
})
#config {
  font-family: 'Poetsen One', sans-serif;
  font-size: 12px;
  color:#646464;
}

#config input {
  border: 2px solid #646464;
  border-radius: 30px;
  background-color: transparent;
  padding: 6px;
  margin: 0 6px;
  font-family: 'Poetsen One', sans-serif;
  font-size: 15px;
  color: #919191;
  border-radius: 30px;
  outline: none;
  text-indent: 40px;
}

#config input:focus {
  box-shadow: 0px -1px 10px rgba(57, 182, 78, 0.5),
              0px 0px 15px rgba(57, 182, 78, 0.5);
}

#config label {
  position: relative;
  font-size: 16px;
}

#lbl-player-0 span::before,
#lbl-player-1 span::before {
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f4ff";
  margin-right: 10px;
}

#lbl-score span::before {
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f091";
  margin-right: 10px;
}

#config label span{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  text-indent: 25px;
}

.sucess {
  top: 20px;
  font-size: 15px;
  color: #0c794f;
  position: relative;
}

.sucess::before {
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f058";
  color: #0c794f;
}

.warning {
  font-size: 15px;
  color: red;
  position: relative;
  top: 20px;
}
.warning::before {
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f071";
  color: red;
}

.action-btn {
  background-color: red;
  font-size: 15px;
  color: white;
  border-radius: 30px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(0,0,0,0.12),
              0 2px 2px rgba(0,0,0,0.12),
              0 4px 4px rgba(0,0,0,0.12),
              0 8px 8px rgba(0,0,0,0.12);
}

#btn-apply {
  font-family: 'Poetsen One', sans-serif;
  margin: 30px 0px ;
  padding: 5px 20px;
  
}
#btn-apply > i{
  font-size: 17px;
}


.winner-condiction {
  font-family: 'Poetsen One', sans-serif;
  font-size: 20px;
  color: #919191;
  border: 1px solid transparent;
  border-radius: 40px;
  margin: 0 auto;

}
#player-name-0, #player-name-1, .action-btn, #dice-title  {
  margin: 0 auto;
  font-family: 'Junar', sans-serif;
  text-transform: uppercase;
}
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <link rel='stylesheet' type="text/css" href='CSS/teste.css' >
        <link rel="icon" href="CSS/img/favicon.ico" type="image/x-icon">
        <link rel='stylesheet' type="text/css" href='CSS/fontawesome-free-5.11.2-web/css/all.css'>
        <title>Dice - The Game</title>
    </head>
        <section id='board'>          
            <!-- PLAYER 1 -->
             <div class='player-0 active' id="player-0">
                <span id='player-name-0'> Player 1</span>  
            </div>

            <!-- PLAYER 2 -->
            <div class='player-1' id="player-1">
                <span id='player-name-1'> Player 2 </span>
                <div class='winner-condiction'>Winner Condition: <span class='score' id='score-player-1'>5</span></div>
            </div>   
           
        </section>

        <!-- SETINGS-->
        <section id='config'>
            <!-- Configs -->
            <h1 id='text'><i class="fa fa-exclamation-circle"></i>Change or modify the name of the players<span id='warn'> (8 Characters)<span></h1>
            <!-- Name Player 1 -->
            <label id='lbl-player-0'> 
                <input id='ipt-player-0' type="text" maxlength="8" minlength="4" placeholder='Name Player 1' class="ipt-name-change"></input>
                <span></span>
            </label>
            <!-- Name Player 2 -->
            <label id='lbl-player-1'>
                <input id='ipt-player-1'type="text" maxlength="8" minlength="4" placeholder='Name Player 2'class="ipt-name-change"></input>
                <span></span>
            </label>

            <h1 id='text'><i class="fa fa-exclamation-circle"></i> Reset the Winner conditions</h1>
                <!-- Condiões para o vencedor  -->
            <label id="lbl-score">
                <input id='ipt-score' type='number' placeholder='Score to Win' class="ipt-name-change"></input>
                <span></span>
            </label>
                <!-- Error Mensages  -->
            <div class='msg'>
                <span id='warning-msg'></span>
            </div>
            <button class='action-btn' id='btn-apply'><i class="fa fa-check-circle"></i> Aplicar</button>
           </section>
    <body>

Ответы [ 2 ]

2 голосов
/ 12 марта 2020

Получить входы 'value не textContent. 

document.querySelector('#btn-apply').addEventListener('click', function() { // Apply the settings

  namePlayer0 = document.querySelector('#player-name-0').textContent; // Current name of player 1
  namePlayer1 = document.querySelector('#player-name-1').textContent;
  inputNamePlayer0 = document.querySelector('#ipt-player-0').value; // Name to be changed
  inputNamePlayer1 = document.querySelector('#ipt-player-1').value;
  winnerPoints = document.querySelector('.winner-condiction').textContent;
  iptScore = document.getElementById('ipt-score').value; // Condition for the winner

  if (inputNamePlayer0 === '' || inputNamePlayer1 === '') { // Check if the inputs are empty
    document.querySelector('.msg').classList.add('warning');
    document.getElementById('warning-msg').textContent = 'Name fields are empty'
  } else {
    document.querySelector('.msg').classList.add('sucess')
    document.getElementById('warning-msg').textContent = 'Values have been successfully changed'
    namePlayer0 = inputNamePlayer0 // The player's name is changed by the input value
    namePlayer1 = inputNamePlayer1
  }

  if (iptScore < 10 || iptScore > 300) { // Checks whether the entered value meets the requirements
    document.querySelector('.msg').classList.add('warning')
    document.getElementById('warning-msg').textContent = 'Condition to win cannot be greater than 300 and less than 10'
  } else {
    winnerPoints = iptScore // Input value entered is stored the condition
  }
  
  document.querySelector('#player-name-0').innerHTML = namePlayer0;
  document.querySelector('#player-name-1').innerHTML = namePlayer1;
  document.querySelector('.winner-condiction').innerHTML = winnerPoints;
})
#config {
  font-family: 'Poetsen One', sans-serif;
  font-size: 12px;
  color: #646464;
}

#config input {
  border: 2px solid #646464;
  border-radius: 30px;
  background-color: transparent;
  padding: 6px;
  margin: 0 6px;
  font-family: 'Poetsen One', sans-serif;
  font-size: 15px;
  color: #919191;
  border-radius: 30px;
  outline: none;
  text-indent: 40px;
}

#config input:focus {
  box-shadow: 0px -1px 10px rgba(57, 182, 78, 0.5), 0px 0px 15px rgba(57, 182, 78, 0.5);
}

#config label {
  position: relative;
  font-size: 16px;
}

#lbl-player-0 span::before,
#lbl-player-1 span::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f4ff";
  margin-right: 10px;
}

#lbl-score span::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f091";
  margin-right: 10px;
}

#config label span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  text-indent: 25px;
}

.sucess {
  top: 20px;
  font-size: 15px;
  color: #0c794f;
  position: relative;
}

.sucess::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f058";
  color: #0c794f;
}

.warning {
  font-size: 15px;
  color: red;
  position: relative;
  top: 20px;
}

.warning::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f071";
  color: red;
}

.action-btn {
  background-color: red;
  font-size: 15px;
  color: white;
  border-radius: 30px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.12);
}

#btn-apply {
  font-family: 'Poetsen One', sans-serif;
  margin: 30px 0px;
  padding: 5px 20px;
}

#btn-apply>i {
  font-size: 17px;
}

.winner-condiction {
  font-family: 'Poetsen One', sans-serif;
  font-size: 20px;
  color: #919191;
  border: 1px solid transparent;
  border-radius: 40px;
  margin: 0 auto;
}

#player-name-0,
#player-name-1,
.action-btn,
#dice-title {
  margin: 0 auto;
  font-family: 'Junar', sans-serif;
  text-transform: uppercase;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <link rel='stylesheet' type="text/css" href='CSS/teste.css'>
  <link rel="icon" href="CSS/img/favicon.ico" type="image/x-icon">
  <link rel='stylesheet' type="text/css" href='CSS/fontawesome-free-5.11.2-web/css/all.css'>
  <title>Dice - The Game</title>
</head>
<section id='board'>
  <!-- PLAYER 1 -->
  <div class='player-0 active' id="player-0">
    <span id='player-name-0'> Player 1</span>
  </div>

  <!-- PLAYER 2 -->
  <div class='player-1' id="player-1">
    <span id='player-name-1'> Player 2 </span>
    <div class='winner-condiction'>Winner Condition: <span class='score' id='score-player-1'>5</span></div>
  </div>

</section>

<!-- SETINGS-->
<section id='config'>
  <!-- Configs -->
  <h1 id='text'><i class="fa fa-exclamation-circle"></i>Change or modify the name of the players<span id='warn'> (8 Characters)<span></h1>
            <!-- Name Player 1 -->
            <label id='lbl-player-0'> 
                <input id='ipt-player-0' type="text" maxlength="8" minlength="4" placeholder='Name Player 1' class="ipt-name-change"></input>
                <span></span>
    </label>
    <!-- Name Player 2 -->
    <label id='lbl-player-1'>
                <input id='ipt-player-1'type="text" maxlength="8" minlength="4" placeholder='Name Player 2'class="ipt-name-change"></input>
                <span></span>
            </label>

    <h1 id='text'><i class="fa fa-exclamation-circle"></i> Reset the Winner conditions</h1>
    <!-- Condiões para o vencedor  -->
    <label id="lbl-score">
                <input id='ipt-score' type='number' placeholder='Score to Win' class="ipt-name-change"></input>
                <span></span>
            </label>
    <!-- Error Mensages  -->
    <div class='msg'>
      <span id='warning-msg'></span>
    </div>
    <button class='action-btn' id='btn-apply'><i class="fa fa-check-circle"></i> Aplicar</button>
</section>

<body>
1 голос
/ 12 марта 2020

Вы должны использовать .value, а не .textContent.

Объяснение: Свойство textContent используется для получения содержимого абзацев, заголовков и т. Д. c., но не для получения значения ввода текста. Для ввода текста textContent возвращает пустую строку!

Вместо этого следует использовать value, как показано во фрагменте ниже: 

var input = document.querySelector("#whatever");
input.onchange = function() {
    console.log(input.textContent);
    console.log(input.value);
}
<input type="text" id="whatever"/>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...