простой расчет в javascript / ошибка ссылки не определена - PullRequest
Новая
       0

простой расчет в javascript / ошибка ссылки не определена

0 голосов
/ 10 ноября 2018

Я абсолютно новичок в JavaScript. Я пытаюсь создать свою первую html-страницу и добавить несколько javascript в мои html-теги. Я хочу иметь два поля, в которые я могу ввести любое число и нажать Показать! чтобы получить результат. Я написал код ниже, но он ничего не делает: 

<!DOCTYPE html>
<html>
<head>
    <title>Interactive JS homework</title>
    <style>
    </style>
    <script>
        function calculate(){
            var a = parseFloat(document.getElementById("a").value);
            var b = parseFloat(document.getElementById("b").value);
            document.getElementById("result") == a+b;
        }
    </script>
</head>
<body>
    <form>
        <p>
            <input type="text" id="a" oninput="calculate();">
            <input type="text" id="b" oninput="calculate();">
            <input type="button" id="showme" value="Show me!" onclick="calculate();">
            <input type="text" id="result">
        </p>
    </form>
</body>

Любая помощь, где я не прав? Спасибо заранее!

Ответы [ 2 ]

0 голосов
/ 10 ноября 2018

Ну, кажется, вы просто забыли кое-что.

При чтении значений текстовых полей a и b вы правильно использовали .value после получения элементов для доступа к их значению, но когда вы пытались установить значение текстового поля result, вы вместо этого просто сравнили его со значением a+b. Оператор == предназначен для сравнения, а не для установки значения.

Точно так же вам нужно будет установить .value текстового поля result вместо самого текстового поля. 

<!DOCTYPE html>
<html>
<head>
    <title>Interactive JS homework</title>
    <style>
    </style>
    <script>
        function calculate(){
            var a = parseFloat(document.getElementById("a").value);
            var b = parseFloat(document.getElementById("b").value);
            document.getElementById("result").value = a+b;
        }
    </script>
</head>
<body>
    <form>
        <p>
            <input type="text" id="a" oninput="calculate();">
            <input type="text" id="b" oninput="calculate();">
            <input type="button" id="showme" value="Show me!" onclick="calculate();">
            <input type="text" id="result">
        </p>
    </form>
</body>
0 голосов
/ 10 ноября 2018

Вы должны использовать свойство value элемента. Обратите внимание на изменения в используемом операторе, это должно быть присвоение (=), а не compariosn (==). 

document.getElementById("result").value = a+b;

Я также предлагаю вам назначить 0, если в элементе нет значения. Это предотвратит показ неожиданного NaN как результата, если какое-либо значение элемента будет пустым. 

<!DOCTYPE html>
<html>
<head>
    <title>Interactive JS homework</title>
    <style>
    </style>
    <script>
        function calculate(){
            var val1 = document.getElementById("a").value.trim();
            var val2 = document.getElementById("b").value.trim();
            var a = parseFloat(val1 == ""? 0 : val1);
            var b = parseFloat(val2 == ""? 0 : val2);
            document.getElementById("result").value = a+b;
        }
    </script>
</head>
<body>
    <form>
        <p>
            <input type="text" id="a" oninput="calculate();">
            <input type="text" id="b" oninput="calculate();">
            <input type="button" id="showme" value="Show me!" onclick="calculate();">
            <input type="text" id="result">
        </p>
    </form>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...