按鈕顏色問題

我是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; 
};

來源

2017-01-09 Tygari

我會用這個把它的功能外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";} 改變顏色，但我相信，switch語句會更容易

來源

2017-01-09 04:14:35 PloxPanda

有人幫我在另一個網站教我新編程方面。然後我寫了這個，它的工作。

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";} 
};

來源

2017-01-10 02:54:37 Tygari

按鈕顏色問題

回答

相關問題