好吧，我是新来的，也许我只是厌倦了这让我困惑了这么久，但我们开始吧:
单击按钮:
当变量“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/