个人中心
gpt4 book ai didi

javascript - 按钮上的文字颜色会发生变化，但并非每次都如此

转载 作者：行者123 更新时间：2023-11-28 01:15:31 27 4
gpt4 key购买 nike

好吧，我是新来的，也许我只是厌倦了这让我困惑了这么久，但我们开始吧:

单击按钮:
当变量“GPA”低于 2.5 时，文本“finalText”应变为红色。当它为 2.5 或更高时，它应该变成绿色。我正在使用 bootstrap，我在这里尝试了很多解决方案。不断发生的一件事是颜色会改变，但如果我再试一次，并且 GPA 仍在同一范围内，颜色就会抵消。 (即如果我输入 1 并且 GPA = 0.0，然后我输入 3 而 GPA 仍然是 0.0，文本会第一次变为红色，但第二次变回黑色。)

编辑 - 好吧，我修复了恢复默认设置，但是如果它变成红色就不能变回绿色...有什么想法吗？

https://jsfiddle.net/turtlebox1/ze1c5uxr/#&togetherjs=jR3i9EqGne 

<!DOCTYPE html>
<html lang="en">
<head>
<title>BIT 116</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript"
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

<style>
.jumbotron {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#9ee8fa+0,d6f9ff+100 */
	background: rgb(158,232,250); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(158,232,250,1) 0%, rgba(214,249,255,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(158,232,250,1)), color-stop(100%,rgba(214,249,255,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(158,232,250,1) 0%,rgba(214,249,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(158,232,250,1) 0%,rgba(214,249,255,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(158,232,250,1) 0%,rgba(214,249,255,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(158,232,250,1) 0%,rgba(214,249,255,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ee8fa', endColorstr='#d6f9ff',GradientType=0 ); /* IE6-9 */

}
</style>
<meta charset="utf-8">
</head>
<body>
<!-- the 'fluid' container should span the width of the page -->
<div class="container-fluid" >

<div class="page-header">

	<div class="jumbotron text-center">
		<h1>Melia Taylor</h1></div>
<!-- Horizontal list of menus across the top: -->
</div>

    <h2 class="text-center" id="greeting">greeting</h2>
	<h3 class="text-center">GPA Calculator</h3>
    <br/>
    <form>
    <p>Please Enter your grade (In the format "93" for 93%, etc.)</p>
    <input type="text" id="gradeInput">
    <input type="button" id="feedback" value="Click Here To See Your GPA!">
    </form>
    
    <p id="finalText">finaltext</p>
</div> 
<script type="text/javascript">
    var gradeV;
    
    var GPA;
    
    var colorCheck;
    
    var color;
    
    $("#greeting").hide();
    
    $("#finalText").hide();
    
    function midGrades(gradeV) {
                    return (((gradeV-65) * .1 ) + 1);
                console.log(midGrades(gradeV));
                }
    
    $(document).ready(function() {
        var nameString = prompt("What is your name?", "");
        
        console.log(nameString);
        
            if(nameString == null || nameString === "")
            {
                console.log("Name is null or undefined");
            }
            else {
            document.getElementById("greeting").innerHTML = ("Welcome to TellMeMyGrade, " + nameString + "!");
            $("#greeting").show();
            alert("Welcome to TellMeMyGrade, " + nameString + "!");
            }
    });
    
    color = document.getElementById("finalText");  
           $("#feedback").click(function() {

        var grade = ($("#gradeInput").val());
        
          
        gradeV = parseFloat(grade);
          
        console.log(gradeV);
          
            if(gradeV <= 0 || isNaN(gradeV) || (Math.floor(gradeV) <= 0))
            {
                alert("Please re-enter your grade in the correct format.");
            }
          
            if((gradeV > 0) && (gradeV < 62))
            {
               $("#finalText").hide(); document.getElementById("finalText").innerHTML = ("Your Grade for this class is a 0.0");
               GPA = 0.0;
        $("#finalText").show();
            }
          
          
          if((gradeV >=62) && (gradeV <= 65))
            {
                 $("#finalText").hide();
                document.getElementById("finalText").innerHTML = ("Your Grade for this class is a 1.0");
               
                GPA = 1.0;
            $("#finalText").show();
            }
            if((gradeV > 65) && (gradeV < 95))
            {
                $("#finalText").hide();
                document.getElementById("finalText").innerHTML = ("Your Grade for this class is a " + midGrades(gradeV).toFixed(1));
                 
               GPA = midGrades(gradeV);
                $("#finalText").show();
            }
             if(gradeV >= 95) 
            {
               $("#finalText").hide(); document.getElementById("finalText").innerHTML = ("Your Grade for this class is a 4.0");
               
                GPA = 4.0;
                $("#finalText").show();
            }
          
                      
             console.log("GPA: " + GPA);
          
          if(GPA < 2.5)
        //above a 2.5 is considered non-danger zone, to me.
          {
            console.log("danger");
              console.log(colorCheck);
             if (colorCheck != "red")
            { 
            color.classList.toggle("text-danger"); 
            colorCheck = "red";
                console.log(colorCheck);
            }
          }
          else
            {
              console.log("success");
                console.log(colorCheck);
              if (colorCheck != "green") {
              color.classList.toggle("text-success"); 
              colorCheck = "green";
                  console.log(colorCheck);
          }
            
          }
        
    });
    
</script>
</body>
</html>

最佳答案

你的类(class)既有文本危险也有文本成功。您也必须切换 text-danger 以将其删除。

        if(GPA < 2.5)
    //above a 2.5 is considered non-danger zone, to me.
      {
        console.log("danger");
          console.log(colorCheck);
         if (colorCheck != "red")
        { 
        color.classList.toggle("text-danger"); 
        colorCheck = "red";
            console.log(colorCheck);
        }
      }
      else
        {
          console.log("success");
            console.log(colorCheck);
          if (colorCheck != "green") {
            color.classList.toggle("text-danger"); 
            color.classList.toggle("text-success"); 
          colorCheck = "green";
              console.log(colorCheck);
      }
        }

关于javascript - 按钮上的文字颜色会发生变化，但并非每次都如此，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51866178/

27 4 0
文章推荐： c++ - Ifstream 在几行后停止读取文件
文章推荐： javascript - 如何让CSS3动画在动画完成后保持其位置？
文章推荐： javascript - Google pagespeed 显示渲染阻塞，甚至进入 body 部位
文章推荐： c++ - libfreenect c++ 包装器中的 undefined reference
行者123
个人简介

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

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