好吧，所以我是新来的，也许这让我感到困惑很久了，但是现在我们开始：
单击按钮：
当变量“ GPA”低于2.5时，文本“ finalText”应变为红色。当它等于或大于2.5时，它应该变成绿色。我正在使用引导程序，并且在这里尝试了多种解决方案。一直发生的一件事是颜色会改变，但是如果我再次尝试，并且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>
答案 0 :(得分：0)
您的课程同时存在文字危险和文字成功。您还必须切换文字危险以将其删除。
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);
}
}
答案 1 :(得分：0)
您没有删除text-danger。删除它，否则它将覆盖text-success。
答案 2 :(得分：0)
谢谢大家！我不得不关闭text-danger，并在更改或切换任何内容之前有条件地考虑颜色的变量。这是更改后的代码段：
if (!isNaN(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")
{
if (colorCheck != "green")
{
color.classList.toggle("text-danger");
colorCheck = "red";
console.log(colorCheck + "1");
}
else {
color.classList.toggle("text-success");
color.classList.toggle("text-danger");
colorCheck = "red";
console.log(colorCheck);
}
}
}
else
{
console.log("success");
console.log(colorCheck);
if (colorCheck != "green")
{
if (colorCheck != "red")
{
color.classList.toggle("text-success");
colorCheck = "green";
console.log(colorCheck + "1");
}
else {
color.classList.toggle("text-danger");
color.classList.toggle("text-success");
colorCheck = "green";
console.log(colorCheck);
}
return colorCheck;
}
return colorCheck;
}
return colorCheck;
}
});