计算在文本框中输入的值并放置在另一个文本框中

Compute value entered in textbox and place in another textbox?

本文关键字：文本 另一个 输入 计算      更新时间：2023-09-26

我有一个带有两个文本框的表单。我想在一个框中输入一个数字，按"转换"链接，然后让它将第一个框中的数字计算为摄氏度并将其放在第二个文本框中。到目前为止，它不起作用，我觉得我缺少一些小东西......我能做什么？

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body
{
background-color: white;
}
h2
{
position: absolute;
left:200px;
top:5px;
color: cadetblue;
}
p
{
text-align: center;
font-family: times new roman;
color: black;
}
</style>
<script>
        function f2cCalc(input)
    {
        var fbox = document.getElementById(input);
        var cbox = document.getElementById(cinput);
       var f = parseInt(fbox.value);
       var cel = Math.round(5/9*(f-32));
       document.getElementById(cbox).value=cel;
      }
</script>
    </head>
    <body>
        <form method="get" action="">
    <h2>Temp calculator</h2>
<br />
<br />
<br/>
<br/>
<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        F<input id="finput" type="number" STYLE="background-color: cadetblue; color: green;" value="0"/>
        &nbsp;&nbsp;&nbsp;&nbsp;
        C<input id="cinput" type="number" STYLE="background-color: cadetblue; color: green;" value="0"/>
        <a href="javascript:f2cCalc(finput)">Convert</a>
        </form>
    </body>
</html>
enter code here

这两行可能会导致您的问题：

var fbox = document.getElementById(input);
var cbox = document.getElementById(cinput);

更改为：

var fbox = document.getElementById(input);
var cbox = document.getElementById('cinput');

基本上JavaScript试图从变量而不是DOM加载id。

你的代码中有拼写错误。贝尔沃提到三条线是问题所在。

改变

 var fbox = document.getElementById(input);
 var cbox = document.getElementById(cinput);
 document.getElementById(cbox).value=cel;

自

 var fbox = document.getElementById('finput');
 var cbox = document.getElementById('cinput');
 cbox.value=cel;

演示小提琴

你需要很少的修改

<a href="javascript:f2cCalc('finput')">Convert</a>

和

var cbox = document.getElementById('cinput');

检查这个小提琴

你的函数调用应该是这样的：

 <a href="javascript:f2cCalc('finput')">Convert</a>

为什么不直接挂接到输入的"keyup"事件？首先，将脚本和函数定义放在输入下方，在body内。然后，将输入选择器设置为全局。

<input id="finput" type="number" />
<input id="cinput" type="number" />
<script type="text/javascript">
    // I run once, _after_ the inputs are DOM ready.
    const FBOX = document.getElementById('finput')
    const CBOX = document.getElementById('cinput')
    FBOX.addEventListener('keyup', (e) => {
        let value = CBOX.value
        try {
            value = f2cCalc(parseInt(e.target.value))
        }
        CBOX.value = value
    })
</script>
相关文章：