gpt4 book ai didi

javascript - 如何修复这些未定义的值?

转载 作者:行者123 更新时间:2023-12-01 01:08:00 24 4
gpt4 key购买 nike

所以我有一个函数,我需要传递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>

最佳答案

每次调用 calculate 函数时,您需要从元素中获取值并将其设置为 #output 元素。看看下面我的解决方案。

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>

关于javascript - 如何修复这些未定义的值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55441473/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com