Атрибут HTML onClick не вызывает функцию

Я сделал файл 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>

Я пробовал все, что знал, поэтому было бы здорово, если бы вы могли помочь с этим. Я создаю калькулятор населения для расчета будущего населения. Все работало нормально до сегодняшнего дня, когда я добавил последний большой кусок своего кода. Кнопки при нажатии, похоже, не вызывают функции. Любая помощь будет оценена по достоинству.

В коде есть ';' добавил в конце удалите его, это будет работать.

— AKASH PANDEY 31.01.2019 18:31

У вас есть 2 синтаксические ошибки, посмотрите мой ответ, чтобы увидеть объяснение

— eborrallo 31.01.2019 18:39
javascript html
31.01.2019 18:22
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
75
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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;
        }

Вы забыли соединить "стартер" со сбросом значения. Вот исправленная версия.

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");
        };
31.01.2019 18:29

вам нужно решить 2 синтаксические ошибки

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

Ваш код с исправлениями

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>

Большое спасибо, ребята. Я запустил инструменты разработчика, и это сработало. И, возможно, мне следует уделять больше внимания своим навыкам печати. Спасибо! Кроме того, это первый вопрос, который я задал о переполнении стека. Снимаю шляпу перед сообществом за такие быстрые ответы!

— Gaurav Palewar 31.01.2019 18:39
31.01.2019 18:36

Другие вопросы по теме

Проблема с позиционированием h1
Как центрировать текст даже при увеличении
Как изменить :: перед цветом фонового изображения SVG при наведении, фокусе, активном
Как динамически установить высоту модального окна?
Как получить текст при нажатии на элемент списка?
Обнаружение изменения iframe src — внешний веб-сайт
Как заставить div перерисовываться при изменении размера браузера?
Ошибка устранения неполадок, возвращаемая информационной таблицей
Плагин JS не распознает динамически добавляемый элемент
Onclick=".." на Tabbable DIV также активируется при нажатии клавиши Enter без ключевого события

Похожие вопросы

Почему мой файл javascript не найден в общей папке?
Нужно извлечь только целые числа из строки в текстовом поле, а затем переместить результат в другое текстовое поле
Копирование класса формы массива
Передача BLOB-объекта в новое аудио
Рендеринг 1 пикселя из 3D-массива в HTML5 Canvas с использованием putImageData() и UInt8ClampedArray
Кэширование ядра ASP.Net
Правильный способ переназначить значение переменным, созданным с помощью деструктурирования? (деструктуризация массива)
Ссылка на свойство объекта JavaScript
Как загрузить документы в поле типа массива простой схемы в метеоре
Есть ли проблема в моем коде? (Простой JavaScript находит специальный символ)