Как исправить эти неопределенные значения?

#javascript

Вопрос:

Итак, у меня есть функция, которой мне нужно передать 3 значения, но мои значения всегда равны 0, если я их не ввожу, и не определены, если их ввести. Как исправить эту проблему?

 <!DOCTYPE html>
<html>
<head>
    <title>Calculate Area</title>
</head>
<body>
    <h4>Enter Dimensions</h4>
    <input id="a" type="text" name=""><br>
    <input id="b" type="text" name=""><br>
    <input id="c" type="text" name=""><br>
    <input type="button" onclick="calculate()" value="Calculate">

    <div id="output"></div>


    <script>

        var a = Number(document.querySelector('#a').value);
        var b = Number(document.querySelector('#b').value);
        var c = Number(document.querySelector('#c').value);

        function calculate(a, b, c){
            //console.log(a);
            //console.log(b);
            //console.log(c);
            return 2*(a*b   a*c   b*c);
        }

        var p = calculate(a, b, c);

        document.querySelector('#output').innerHTML = `<h4>Area = ${p}</h4>`;



    </script>
</body>
</html>

1. Переместите те три строки, которые получают <input> значения, внутрь calculate() функции.

2. Но тогда я не передаю значения функции calculate, и моя задача — передать значения в качестве аргументов функции

3. Вы все равно ничего не передаете в функцию при ее вызове (как обработчик событий). Как бы то ни было, ваш код запускается еще до завершения загрузки страницы, поэтому в <input> полях еще ничего нет. Вы можете написать вторую функцию, которая вызывается при нажатии кнопки, тогда эта функция сможет получать <input> значения и передавать их calculate() .

Ответ №1:

Вам нужно получать значение из элементов и присваивать ему значение #output element при каждом вызове calculate функции. Ознакомьтесь с моим решением ниже.

 var aElement = document.querySelector('#a');
var bElement = document.querySelector('#b');
var cElement = document.querySelector('#c');
var outputElement = document.querySelector('#output');

function updateArea () {
    var a = Number(aElement.value);
    var b = Number(bElement.value);
    var c = Number(cElement.value);
    
    var res = calculate(a, b, c);
    
    outputElement.innerHTML = `<h4>Area = ${res}</h4>`;
}

function calculate (a, b, c) {
    return 2*(a*b   a*c   b*c);
}

 <h4>Enter Dimensions</h4>
<input id="a" type="text" name=""><br>
<input id="b" type="text" name=""><br>
<input id="c" type="text" name=""><br>
<input type="button" onclick="updateArea()" value="Calculate">
<div id="output"></div>

1. Да, я понимаю это, но мое определение функции calculate должно быть таким: « функция calculate(a, b, c){} «

2. @AleksLazic Вы можете использовать другую функцию переноса, проверьте это в моем обновленном ответе.

Ответ №2:

Вы собираете значения a, b и c в начале программы. Сначала поля ввода не имеют никакого значения, поэтому значение a, b и c не определено. Итак, соберите значение при нажатии кнопки отправки.

Попробуйте этот подход:

 function calculate(){
    var a = Number(document.querySelector('#a').value);
    var b = Number(document.querySelector('#b').value);
    var c = Number(document.querySelector('#c').value);

    var p = 2*(a*b   a*c   b*c);

    document.querySelector('#output').innerHTML = '<h4>Area = ${p}</h4>';
}