个人中心
gpt4 book ai didi

javascript - 我无法更改标签值

转载 作者：行者123 更新时间：2023-11-28 16:45:00 24 4
gpt4 key购买 nike

我创建了一个脚本，用户可以在其中更改游戏的某些值(玩家姓名、获胜要求)，但他不遵守任何条件，更不用说更改值，只是给我一个错误，无论显示输入的数量。因为我自己是 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>

最佳答案

获取输入的值而不是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>

关于javascript - 我无法更改标签值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60646116/

24 4 0
文章推荐： html - infobubble 中 div 之外的图像
文章推荐： CSS 样式属性
文章推荐： jquery - 禁用可点击的 div，直到函数被执行。
文章推荐： JavaScript，今天的 yyyy-mm-dd 错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com