Question

所以我有一个函数，我需要传递3个值，但是如果我不输入它们，则我的值始终为0，而如果输入它们则为undefined。如何解决此问题？

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

Answer 1

每次调用#output函数时，您需要从元素中获取值并将其设置为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>

Answer 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>';
}

如何解决这些未定义的值？

2 个答案: