HTML onclick не работает

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

<html>
<head>
<script>
var calculateInterest = function(){
var rate;
var total;
var years = document.getElementById("years").value;
var principleAmount = document.getElementById("principal").value;
var interestRate = document.getElementById("intrest").value;
    if ((interestRate >= 0) && (interestRate <= 15)) {
        rate = interestRate / 100;

        if ((principleAmount >= 0) && (principleAmount <= 10000)) {
            total = principleAmount * (1 + rate * years);
            document.getElementById("total_with_intrest").value = total;
        }
        else {
            message-box ("Invalid data for principle amount.");
        }
    }
    else {
        message-box ("Invalid data for interest rate.");
    }
}
</script>
<style>
form{ border: solid blue;
       width:40em;
        padding:0.5em;}
input{padding: 0.5em;}

</style>
</head>


<body>
<form>

Enter Principal Ammount : <input type = "text" id  = "principal"  />
</br>

Enter Intrest Rate : <input type = "text" id  = "intrest"    />
</br>
Enter Number of Years : <input type = "text" id  = "years"  />
</br>
Grand Ammount : <input type = "text" id  = "total_with_intrest"   disabled /></br>
</br>
<input type = "button" id = "click" value = "Calculate" onclick=calculateInterest()/> </br>


</form>
</body>

</html>

Ошибка браузера: «SyntaxError: ожидаемое выражение, получено '}'» в строке 2, но я просто не могу понять, в чем проблема. Любая помощь приветствуется!

Примечание: я знаю, что есть некоторые странные орфографические ошибки. Мой инструктор из Индии и не совсем владеет английским языком. Она создала для нас HTML-файл, а нам просто нужно вставить Javascript.

javascript html

10.12.2018 01:07

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Нет функции message-box. Вы имели ввиду alert()? Ваш код в настоящее время работает с этими изменениями:

var calculateInterest = function(){
    var rate;
    var total;
    var years = document.getElementById("years").value;
    var principleAmount = document.getElementById("principal").value;
    var interestRate = document.getElementById("intrest").value;
    if ((interestRate >= 0) && (interestRate <= 15)) {
        rate = interestRate / 100;

        if ((principleAmount >= 0) && (principleAmount <= 10000)) {
            total = principleAmount * (1 + rate * years);
            document.getElementById("total_with_intrest").value = total;
        }
        else {
            alert("Invalid data for principle amount.");
        }
    }
    else {
        alert("Invalid data for interest rate.");
    }
}

form{ border: solid blue;
       width:40em;
        padding:0.5em;}
input{padding: 0.5em;}

<form>

Enter Principal Amount : <input type = "text" id  = "principal"  />
</br>

Enter Interest Rate : <input type = "text" id  = "intrest"    />
</br>
Enter Number of Years : <input type = "text" id  = "years"  />
</br>
Grand Amount : <input type = "text" id  = "total_with_intrest"   disabled /></br>
</br>
<input type = "button" id = "click" value = "Calculate" onclick = "calculateInterest()" /> </br>


</form>

Small Nitpick: исправлены мелкие опечатки, не связанные с кодом. Сумма => Сумма. Интерес => Интерес.

Я думаю, вы обнаружите, что функция вызывается без кавычек

— 10.12.2018 01:15

@ Katie.Sun Ага, похоже. Обновил свой ответ.

— 10.12.2018 01:17

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

— 10.12.2018 01:27

10.12.2018 01:11