HTML onClick属性未调用函数

时间:2019-01-31 17:22:11

标签: javascript html

我制作了一个HTML + JAVASCRIPT文件,其中有一个带有onclick属性的按钮。但是该按钮似乎并未调用该函数。如果你们中的任何人可以以任何方式帮助我,将不胜感激。谢谢。

这是我的HTML代码:

    // 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>

我已经尽力了,所以如果您能提供帮助的话,那会很棒。我正在创建一个人口计算器来计算未来的人口。直到今天,当我添加了代码的最后一大部分时,一切都运行良好。单击该按钮时似乎并未调用该函数。任何帮助,将不胜感激。

2 个答案:

答案 0 :(得分:1)

您在这里遇到语法错误:

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

您忘记了将“启动器”与值的重置连接在一起。下面是修正版本。

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

我建议您学习使用浏览器的开发人员工具。通常F12将启动工具。使用Google Chrome浏览器,我很快在控制台输出中发现了此错误。

在最重要的是,你不能有一个条件为“其他”。您需要使用“ else if”来指定条件。

这就是你当前的代码:

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

这是正确的代码:

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

答案 1 :(得分:0)

您需要解决2个语法错误

  

需要与+合并值

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结尾的

需要另一个else if。如果你写一个   条件

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

您的带有更正的代码是

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>