HTML onClick属性未调用函数

Question

I made a HTML + JAVASCRIPT file in which I have a button with an onclick attribute. But the button doesn't seem to be calling the function. If anyone of you could help me in any way, it will be appreciated. Thanks.

This is my HTML code:

  // Population Model function giveOutput() { var input = prompt("Please enter a year", "2025"); var integer = parseInt(input); if (integer === 0 ) { alert("Please enter a valid year"); } else if (input < 2000) { alert("Please enter a year after 2000.") } else if (input > 2100) { alert("Please enter a year before 2100."); } else if (input >= 2051) { // Model for reviewing the constants alert("The World Population Growth Rate will be changed by the time we cross 2050. So the Model has to be reviewed every year to get accurate results."); var final = integer * 0.082 - 157.88; var pop = final.toFixed(2); document.getElementById("Done").innerHTML="The Population will be approximately "+ pop + " Billions in " + input + "." ; // Future circumstances document.getElementById("Almost").innerHTML="Your future is in danger...Earth can only support 10 Billion of us"; document.getElementById("Nearly").innerHTML="Only " + ("10" - pop) + " Billion people before we have a WAR FOR RESOURCES" ; document.getElementById("Save").innerHTML="You have 31 years to make things Right!"; } else { //Current Population var final = integer * 0.082 - 157.88; var pop = final.toFixed(2); document.getElementById("Done").innerHTML="The Population will be "+ pop + " Billions in " + input + "." ; // Future circumstances document.getElementById("Almost").innerHTML="Your future is in danger...Earth can only support 10 Billion of us"; document.getElementById("Nearly").innerHTML="Only " + ("10" - pop) + " Billion people before we have a WAR FOR RESOURCES" ; document.getElementById("Save").innerHTML="You have 31 years to make things Right!"; } }; // Crude oil Model function outCrude() { var oilIn = prompt("Please enter a year.", "2025"); var oilFinal = parseInt(oilIn); if (oilFinal === 0) { alert("Please enter a valid year."); } else if (oilIn < 1996) { alert("Please enter a year after 2000.") } else { var oil = oilFinal * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("Oil").innerHTML="The Consumption of Crude oil will be approx. "+ outFinal + " *10^4" +" terawatt hour in " + oilIn + "." ; } } // Natural Gas Model function outNat() { var natIn = prompt("Please enter a year."); var inFinal = parseInt(natIn); if (natIn === 0) { alert("Please enter a valid year."); } else if (natIn < 1995) { alert("Please enter a year after 1995"); } else { var nat = inFinal * 0.07438 - 146.2193452; var NatFinal = nat.toFixed(2); document.getElementById("nat").innerHTML = "The Consumption of Natural Gas will be approx " + NatFinal + "*10^4 terawatt hour in " +inFinal + "."; } } // Updated Crude Oil Model function newOil() { var starter = "By records, the Consumption was "; var mid = " * 10^4 and according to our equation it was "; var inOil = prompt("Please enter a year."); if (inOil === 2000) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML=starter "4.1747" mid + outFinal; } else if (inOil === 2001) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML=starter + "4.2148" + mid + outFinal; } else if (inOil === 2002) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML=starter + "4.2510" + mid + outFinal; } else if (inOil === 2003) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML=starter + "4.3521" + mid + outFinal; } else if (inOil === 2004) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML=starter + "4.5173" + mid + outFinal; } else if (inOil === 2005) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML=starter + "4.5779" + mid + outFinal; } else if (inOil=== 2006) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML=starter + "4.6336" + mid + outFinal; } else if (inOil === 2007) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML=starter + "4.7008" + mid + outFinal; } else if (inOil === 2008) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML=starter + "4.6814" + mid + outFinal; } else if (inOil === 2009 ) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML=starter + "4.6004" + mid + outFinal; } else if (inOil === 2010) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML=starter + "4.7513" + mid + outFinal; } else if (inOil === 2011) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML=starter + "4.7982" + mid + outFinal; } else if (inOil === 2012) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML=starter + "4.8569" + mid + outFinal; } else if (inOil === 2013) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML=starter + "4.9089" + mid + outFinal; } else if (inOil === 2014) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML=starter + "4.9484" + mid + outFinal; } else if (inOil === 2015) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML=starter + "5.0485" + mid + outFinal; } else if (inOil === 2016) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML=starter + "5.1348" + mid + outFinal; } else if (inOil < 2000) { alert("Please enter a year after 2000."); } else (inOil > 2050) { alert("Please enter a year before 2050"); }; }; 

 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="C:\\Users\\Temporary\\Desktop\\Maths Model\\MathsPopulation.js"></script> <link rel="stylesheet" type="text/css" href="MathsPopulation.css"> <u> <title>Maths Population Model</title> </u> </head> <body bgcolor="black"> <center> <u> <font size="6" color="pink"><strong> <h3> World Population Growth Model</h3> <p>Using Equations of Linear Growth, we have constructed a model which will help predict future effects of population.</p></strong> </font> </u> <p> <font color="pink" size="+2">After inputing a future year, we can predict the population for the future.</font> </p> <img src="World.png" alt="Possibilites of Future Population Growth" style="float: centre;" /> <img src="population.jpg" alt="World Population" style="float: centre;" /> <!-- The stuff for Population Model--> <font color="white"><h1 id="Done"></h1></font> <font color="white"><h1 id="Almost"></h1></font> <font color="red"><h1 id="Nearly"></h1></font> <font color="white"><h1 id="Save"></h1></font> <!-- The stuff for Natural Resources--> <font color=" lightgreen"><h1 id="nat"></h1></font> <!-- The stuff for Crude Oil--> <font color="lightblue"><h1 id="Oil"></h1></font> <!-- The stuff for New Crude Oil Model--> <font color="white"><h1 id="newOil"></h1></font> <!-- The button for Population Model--> <button onclick="giveOutput()" type = "button" autofocus="1">Population</button><br> <!-- The button for Natural Gas Model Model--> <button onclick="outNat()" type = "button" autofocus="3">Natural Gas</button><br> <!-- The button for Crude Oil Model--> <button onclick="outCrude()" type = "button" autofocus="2">Crude Oil</button><br> <!-- The button for New Crude Oil Model--> <button onclick="newOil()" type = "button" autofocus="4">New Oil</button> </center> </body> </html> 

I have tried whatever I knew so it would be great if you could help with this. I am creating a Population Calculator to calculate future population. Everything was working fine till today when I added the last big chunk of my code. The buttons when clicked don't seem to be calling the functions. Any help would be appreciated.

Answer 1

You've got a syntax error here:

  if (inOil === 2000) {
            var oil = inOil * 0.05831 - 112.4489;
            var outFinal = oil.toFixed(2);
            document.getElementById("newOil").innerHTML=starter "4.1747" mid + outFinal;
        }

You forgot to concatenate "starter" with the reset of the value. Here is the corrected version.

if (inOil === 2000) {
                var oil = inOil * 0.05831 - 112.4489;
                var outFinal = oil.toFixed(2);
                document.getElementById("newOil").innerHTML=starter + "4.1747" +  mid + outFinal;
            }

I recommend that you learn to use the developer tools of the browser. Typically F12 will launch the tools. Using Google Chrome I quickly found this error in the console output.

On top of that, you cannot have a condition for an "else." You need to use "else if" to specify a condition.

So this is your current code:

 } else (inOil > 2050) {
            alert("Please enter a year before 2050");
        };

Here is the correct code:

} else if (inOil > 2050) {
            alert("Please enter a year before 2050");
        };

Answer 2

you need to solve 2 syntax errors

need to concat values with +

if (inOil === 2000) {
     var oil = inOil * 0.05831 - 112.4489;
     var outFinal = oil.toFixed(2);
     document.getElementById("newOil").innerHTML=starter + "4.1747" +  mid + outFinal;
}

at the end of else if need an other else if . If you write a condition

} else if (inOil > 2050) {
    alert("Please enter a year before 2050");
};

Your code with corrections is

 function giveOutput() { var input = prompt("Please enter a year", "2025"); var integer = parseInt(input); if (integer === 0) { alert("Please enter a valid year"); } else if (input < 2000) { alert("Please enter a year after 2000.") } else if (input > 2100) { alert("Please enter a year before 2100."); } else if (input >= 2051) { // Model for reviewing the constants alert("The World Population Growth Rate will be changed by the time we cross 2050. So the Model has to be reviewed every year to get accurate results."); var final = integer * 0.082 - 157.88; var pop = final.toFixed(2); document.getElementById("Done").innerHTML = "The Population will be approximately " + pop + " Billions in " + input + "."; // Future circumstances document.getElementById("Almost").innerHTML = "Your future is in danger...Earth can only support 10 Billion of us"; document.getElementById("Nearly").innerHTML = "Only " + ("10" - pop) + " Billion people before we have a WAR FOR RESOURCES"; document.getElementById("Save").innerHTML = "You have 31 years to make things Right!"; } else { //Current Population var final = integer * 0.082 - 157.88; var pop = final.toFixed(2); document.getElementById("Done").innerHTML = "The Population will be " + pop + " Billions in " + input + "."; // Future circumstances document.getElementById("Almost").innerHTML = "Your future is in danger...Earth can only support 10 Billion of us"; document.getElementById("Nearly").innerHTML = "Only " + ("10" - pop) + " Billion people before we have a WAR FOR RESOURCES"; document.getElementById("Save").innerHTML = "You have 31 years to make things Right!"; } }; // Crude oil Model function outCrude() { var oilIn = prompt("Please enter a year.", "2025"); var oilFinal = parseInt(oilIn); if (oilFinal === 0) { alert("Please enter a valid year."); } else if (oilIn < 1996) { alert("Please enter a year after 2000.") } else { var oil = oilFinal * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("Oil").innerHTML = "The Consumption of Crude oil will be approx. " + outFinal + " *10^4" + " terawatt hour in " + oilIn + "."; } } // Natural Gas Model function outNat() { var natIn = prompt("Please enter a year."); var inFinal = parseInt(natIn); if (natIn === 0) { alert("Please enter a valid year."); } else if (natIn < 1995) { alert("Please enter a year after 1995"); } else { var nat = inFinal * 0.07438 - 146.2193452; var NatFinal = nat.toFixed(2); document.getElementById("nat").innerHTML = "The Consumption of Natural Gas will be approx " + NatFinal + "*10^4 terawatt hour in " + inFinal + "."; } } // Updated Crude Oil Model function newOil() { var starter = "By records, the Consumption was "; var mid = " * 10^4 and according to our equation it was "; var inOil = prompt("Please enter a year."); if (inOil === 2000) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML = starter +"4.1747"+mid + outFinal; } else if (inOil === 2001) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML = starter + "4.2148" + mid + outFinal; } else if (inOil === 2002) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML = starter + "4.2510" + mid + outFinal; } else if (inOil === 2003) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML = starter + "4.3521" + mid + outFinal; } else if (inOil === 2004) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML = starter + "4.5173" + mid + outFinal; } else if (inOil === 2005) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML = starter + "4.5779" + mid + outFinal; } else if (inOil === 2006) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML = starter + "4.6336" + mid + outFinal; } else if (inOil === 2007) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML = starter + "4.7008" + mid + outFinal; } else if (inOil === 2008) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML = starter + "4.6814" + mid + outFinal; } else if (inOil === 2009) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML = starter + "4.6004" + mid + outFinal; } else if (inOil === 2010) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML = starter + "4.7513" + mid + outFinal; } else if (inOil === 2011) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML = starter + "4.7982" + mid + outFinal; } else if (inOil === 2012) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML = starter + "4.8569" + mid + outFinal; } else if (inOil === 2013) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML = starter + "4.9089" + mid + outFinal; } else if (inOil === 2014) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML = starter + "4.9484" + mid + outFinal; } else if (inOil === 2015) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML = starter + "5.0485" + mid + outFinal; } else if (inOil === 2016) { var oil = inOil * 0.05831 - 112.4489; var outFinal = oil.toFixed(2); document.getElementById("newOil").innerHTML = starter + "5.1348" + mid + outFinal; } else if (inOil < 2000) { alert("Please enter a year after 2000."); } else if(inOil > 2050) { alert("Please enter a year before 2050"); } } 

 <u> <font size="6" color="pink"><strong> <h3> World Population Growth Model</h3> <p>Using Equations of Linear Growth, we have constructed a model which will help predict future effects of population.</p></strong> </font> </u> <p> <font color="pink" size="+2">After inputing a future year, we can predict the population for the future.</font> </p> <img src="World.png" alt="Possibilites of Future Population Growth" style="float: centre;"> <img src="population.jpg" alt="World Population" style="float: centre;"> <!-- The stuff for Population Model--> <font color="white"> <h1 id="Done"></h1> </font> <font color="white"> <h1 id="Almost"></h1> </font> <font color="red"> <h1 id="Nearly"></h1> </font> <font color="white"> <h1 id="Save"></h1> </font> <!-- The stuff for Natural Resources--> <font color=" lightgreen"> <h1 id="nat"></h1> </font> <!-- The stuff for Crude Oil--> <font color="lightblue"> <h1 id="Oil"></h1> </font> <!-- The stuff for New Crude Oil Model--> <font color="white"> <h1 id="newOil"></h1> </font> <!-- The button for Population Model--> <button onclick="giveOutput()" type="button" autofocus="1">Population</button> <break> <!-- The button for Natural Gas Model Model--> <button onclick="outNat()" type="button" autofocus="3">Natural Gas</button> <break> <!-- The button for Crude Oil Model--> <button onclick="outCrude()" type="button" autofocus="2">Crude Oil</button><br> <!-- The button for New Crude Oil Model--> <button onclick="newOil()" type="button" autofocus="4">New Oil</button>