按钮颜色问题

Question

我对Javascript很陌生，并试图学习这门语言。我还不知道CSS或jquery。我打算一次只学一门语言，我不是很聪明。我正在尝试制作一个按钮，它将根据增长变量自动调整颜色。我希望按钮从绿色开始。当变量增长等于或大于进化成本时，按钮的颜色应该不需要任何按钮单击更改为红色。当可变增长小于进化成本时，按钮的颜色应该不需要点击任何按钮而改变为绿色。

与我的编码一样，按钮的颜色是黑色的，无论如何都不会改变颜色。我不知道我做错了什么。

请解释任何解决方案，以便我可以学习它。

这是HTML部分。

<p title="Click to gain evolution points to evolve your cell."><button type="button" class="btn" id="evolutionButton" onclick="buyEvolution()"><b>Evolve</b></button></p>
<p style="color:white" title="Evolution points are used to purchase evolutions.">Evolution: <span id="evolution">0</span></p>
<p style="color:white" title="Each additional Evolution point costs more growth to create.">Evolution Cost: <span id="evolutionCost">100</span></p>

这是Javascript部分.

var growth = 0;
function GrowthClick(number){
    growth = growth + number;
    document.getElementById("growth").innerHTML = growth;
};

var evolution = 0;

function buyEvolution(){
    var evolutionCost = Math.floor(100 * Math.pow(2,evolution));
    if(growth >= evolutionCost){
        evolution = evolution + 1;
        growth = growth - evolutionCost;
        document.getElementById('evolution').innerHTML = evolution;
        document.getElementById('growth').innerHTML = growth;
    };
    var nextCost = Math.floor(100 * Math.pow(2,evolution));
    document.getElementById('evolutionCost').innerHTML = nextCost;
};

var evolutionButton;

function colorEvolution(){
    if (growth >= evolutionCost {     
        document.getElementById("evolutionButton").className = "red"; 
    } else {
        document.getElementById("evolutionButton").className = "green";
    }
    document.getElementById('growth').innerHTML;
    document.getElementById('evolutionCost').innerHTML;
};

Answer 1

为此，我将使用switch语句，将其保留在函数之外，但这应该能够根据增长变量的值更改按钮的颜色。

switch(growth){
case 0:
    document.getElementById("evolutionButton").style.backgroundColor = "green";
    break;
case 1:
    document.getElementById("evolutionButton").style.backgroundColor = "Yellow";
    break;
case 2:
    document.getElementById("evolutionButton").style.backgroundColor = "orange";
    break;
case 3:
    document.getElementById("evolutionButton").style.backgroundColor = "red";
    break;
case 4:
    document.getElementById("evolutionButton").style.backgroundColor = "purple";
}

我看到你试图通过在这里更改它的类名来改变颜色，{document.getElementById("evolutionButton").className = "green";}，但是我相信开关语句会更容易

Answer 2

有人帮助我在另一个网站教我新的编程方面。然后我写了这个，它起了作用。

HTML

    <p title="Click to gain evolution points to evolve your cell."><button type="button" id="evolutionButton" onclick="buyEvolution()"><b>Evolve</b></button></p>
    <p style="color:white" title="Evolution points are used to purchase evolutions.">Evolution: <span id="evolution">0</span></p>
    <p style="color:white" title="Each additional Evolution point costs more growth to create.">Evolution Cost: <span id="evolutionCost">100</span></p>

Javascript

var growth = 0;

function updateGrowth() {
document.getElementById('growth').innerHTML = growth;
colorEvolution();
};

function GrowthClick(number){
growth = growth + number;
updateGrowth();
};

var evolution = 0;

function updateEvolution() {
document.getElementById('evolution').innerHTML = evolution;
};

var evolutionCost;

function buyEvolution(){
evolutionCost = Math.floor(100 * Math.pow(2,evolution));
if(growth >= evolutionCost){
    evolution = evolution + 1;
    growth = growth - evolutionCost;
    updateEvolution();
    updateGrowth();
};
var nextEvolution = Math.floor(100 * Math.pow(2,evolution));
document.getElementById('evolutionCost').innerHTML = nextEvolution;
};

function colorEvolution(){
var evolutionColor = document.getElementById("evolutionButton");
evolutionCost = Math.floor(100 * Math.pow(2,evolution));
if (growth >= evolutionCost) {evolutionColor.style.color = "red";}
else {evolutionColor.style.color = "green";}
};