簡體   English   中英

計算在文本框中輸入的值並放在另一個文本框中?

[英]Compute value entered in textbox and place in another textbox?

我有一個帶有兩個文本框的表單。 我想在一個框上輸入一個數字,按轉換鏈接,讓它在第一個框中將數字計算為攝氏,然后將其放在第二個文本框中。 到目前為止,它不起作用,我覺得我缺少一些小東西...該怎么辦?

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

您的代碼中有錯字。 Belwo提到了三行問題。

更改

 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');

檢查這個小提琴

或者您可以得到自切片面包以來最甜的東西。 jQuery。 將這個壞男孩插入您的頭部標簽:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

實際上,我為您准備了小提琴 jQuery使事情變得容易得多。 希望這對您有用。

您的函數調用應類似於:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM