正在创建基于HTML输入的计算器

所以我试图创建一个基于html输入的计算器，它只是不断返回*这是稍后添加的一个片段，但我如何在jQuery*中做到这一点

[object HTMLInputElement][object HTMLInputElement]

这是我的代码

<html>
<head>
</head>
<body>
<input id="nume" type="number">
<input id="num" type="number">
<input type="button" onclick="MyFunction()" value="Click to calculate">
<p id="f">Value Is: 0</p>
</body>
<script>
const something = document.getElementById("nume")
const somethingElse = document.getElementById("num")
function MyFunction(){
var values = something + somethingElse;
document.getElementById("f").innerHTML = "Value Is: " + values
}

</script>

您需要首先获取值。document.getElementById("nume").value你可以这样做

function MyFunction(){
var values = Number(document.getElementById("nume").value) + Number(document.getElementById("num").value);
document.getElementById("f").innerHTML = "Value Is: " + values
}

<html>
<head>
</head>
<body>
<input id="nume" type="number">
<input id="num" type="number">
<input type="button" onclick="MyFunction()" value="Click to calculate">
<p id="f">Value Is: 0</p>
</body>

您必须使用Number(document.getElementById("nume").value)才能获得实际数字。通过使用document.getElementById("nume")，您得到的是HTMLDOM元素，而不是元素的值。

你几乎是正确的，只需要一些更新。。。

<!--<html>
<head>
</head>
<body>
<input id="nume" type="number">
<input id="num" type="number">
<input type="button" onclick="MyFunction()" value="Click to calculate">
<p id="f">Value Is: 0</p>
</body>
<script>
const something = document.getElementById("nume")
const somethingElse = document.getElementById("num")
function MyFunction(){
var values = something + somethingElse;
document.getElementById("f").innerHTML = "Value Is: " + values
}

</script>-->
<html>
<head>
</head>
<body>
<input id="nume" type="number">
<input id="num" type="number">
<input type="button" onclick="MyFunction()" value="Click to calculate">
<p id="f">Value Is: 0</p>
</body>
<script>
const something = document.getElementById("nume")
const somethingElse = document.getElementById("num")
function MyFunction(){
var values = parseFloat(something.value) + parseFloat(somethingElse.value);
document.getElementById("f").innerHTML = "Value Is: " + values
}

</script>

你可以使用给定的代码。。。这里不做评论。这是因为陈述

const something = document.getElementById("num")

将返回文档中的html元素，其id在()四舍五入方括号内，因此如果您正在制作计算器，则可以使用此语句。。。

something.value

因为它将返回字符串值，该值存储在文档中的html元素内，id为()四舍五入方括号。。。。现在的问题是，你想添加这些，对吗？

所以只需像这样使用数学函数parseFloat。。。

var values = parseFloat(something.value) + parseFloat(somethingElse.value);

这样你就可以让它们漂浮起来。。。您也可以使用parseInt，但我建议使用上面的语句。。现在你可以很容易地制作计算器了。。。

对不对？：)

首先，您的代码有两个变量，它们应该在函数中
其次访问<input>的值属性
第三，我把数字作为字符串，所以我用number()把字符串转换成数字

<html>
<head>
</head>
<body>
<input id="nume" type="number"><br/>
<input id="num" type="number"><br/>
<input type="button" onclick="MyFunction()" value="Click to calculate"><br/>
<p id="f">Value Is: 0</p>
</body>
<script>
function MyFunction(){
var something=document.getElementById("nume").value;
var somethingElse = document.getElementById("num").value;
document.getElementById("f").innerHTML=Number(something)+Number(somethingElse);
}
</script>

相关内容

最新更新

热门标签：