HTML onClick attribute not calling function

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.

You have 2 sintax error , look my response to see the explanation — eborrallo
– eborrallo, Commented Jan 31, 2019 at 17:39

daddygames · Accepted Answer · 2019-01-31 17:29:55Z

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

Community · Accepted Answer · 2019-01-31 19:33:13Z

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>

Thank you so much guys. I ran the developer tools and it worked. And perhaps I should pay more attention to my typing skills. Thanks! Also, this is the first question I asked on Stack overflow. Hats off to the community for such fast answers!

Collectives™ on Stack Overflow

HTML onClick attribute not calling function

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related