用于转换单位的 HTML 和 JavaScript 表单答案

【问题标题】：HTML and JavaScript form for converting units用于转换单位的 HTML 和 JavaScript 表单
【发布时间】：2014-03-18 14:19:23
【问题描述】：

我正在尝试制作表单，使用 HTML 和 JavaScript 并使用下拉列表。所以我一遍又一遍地搜索，我发现了类似的问题，但无法从答案中解决任何问题。所以，我希望通过下拉菜单选择我的表格，这样我就可以得到“公里”并将它们转换为“英里”或“英尺”，这取决于我选择的内容。我让它适用于 Temparature 形式，但仅适用于从摄氏度到 Farenhait 的转换，其他方式不起作用，我不知道为什么。这是 HTML 代码：

<body onload="startTime()">
    <p>Temparature</p>
    <br />
    <form>
        <input id="c" name="c" onkeyup="preveri()">
        <select id="chose1">
            <option></option>
            <option value="C">Celzija</option>
            <option value="F">Farenhait</option>
        </select>
        <br />equals
        <br />
        <input id="f" name="f" onkeyup="preveri()">
        <select id="chose2">
            <option></option>
            <option value="C">Celzija</option>
            <option value="F">Farenhait</option>
        </select>
    </form>
    <br />
    <p>Lenght</p>
    <form>
        <input id="k" name="k" onkeyup="preveri1()">
        <select id="chose2">
            <option></option>
            <option value="K">Kilometer</option>
            <option value="M">Miles</option>
        </select>
        <br />equals
        <br />
        <input id="m" name="m" onkeyup="preveri1()">
        <select id="chose2">
            <option></option>
            <option value="K">Kilometer</option>
            <option value="M">Miles</option>
        </select>
    </form>


    <option value="K">Kilometer</option>
    <option value="M">Miles</option>
    <div id="txt"></div>
</body>

这里是 JavaScript 代码：

function preveri(neke)
{
    neke=document.getElementById("chose1").value;
    if(neke=="C")
    {
        fahr=document.getElementById("c").value * 9 / 5 + 32;
        document.getElementById("f").value=Math.round(fahr);
    }else   
    {
        cels=(document.getElementById("f").value -32) * 5 / 9;
        document.getElementById("c").value=Math.round(cels);
    }
}

function preveri1(neke1)
{
    neke1=document.getElementById("chose2").value;
    if(neke1=="K")
    {
        kilo=document.getElementById("k").value * 0.621371;
        document.getElementById("m").value=Math.round(kilo);
    }else   
    {
        mile=(document.getElementById("m").value) / 0.621371;
        document.getElementById("k").value=Math.round(mile);
    }
}
function startTime()
{
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
// doda 0 pred  števila<10
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
    i="0" + i;
}
    return i;
}

出了点问题，我不知道是什么，如果你能好心地帮助我，我是 JavaScript 的初学者。

【问题讨论】：

您的代码中有一些错误。对于初学者，您调用的是 preveri()，但函数签名是 preveri(neke)。为什么要使用 2 个表单？

标签： javascript html function validation webpage

【解决方案1】：

对于第一种形式，您的代码的问题在于您总是只查看第一个选择，即 id="choose1" 的选择。因此 neke 变量将始终包含在第一次选择中选择的值。

还要注意，您在同一页面中有 3 次 id="choose2"。 id 唯一标识一个 HTML 元素，因此在同一页面中不应有 2 个具有相同 id 的不同元素。

我修改了您的代码以适用于第一种形式。这不是最优雅的解决方案。我只是想更好地向您展示问题所在：

<body onload="startTime()">
<p>Temparature</p>
<br />
<form>
    <input id="c" name="c" onkeyup="input1()">
    <select id="chose1">
        <option></option>
        <option value="C">Celzija</option>
        <option value="F">Farenhait</option>
    </select>
    <br />equals
    <br />
    <input id="f" name="f" onkeyup="input2()">
    <select id="chose2">
        <option></option>
        <option value="C">Celzija</option>
        <option value="F">Farenhait</option>
    </select>
</form>
<div id="txt"></div>

<script type="text/javascript">
function input1()
{
    neke=document.getElementById("chose1").value;

    if(neke=="C")
    {
        fahr=document.getElementById("c").value * 9 / 5 + 32;
        document.getElementById("f").value=Math.round(fahr);
    }else   
    {
        cels=(document.getElementById("f").value -32) * 5 / 9;
        document.getElementById("c").value=Math.round(cels);
    }
}

function input2() {
    neke=document.getElementById("chose2").value;

    if(neke=="C")
    {
        fahr=document.getElementById("c").value * 9 / 5 + 32;
        document.getElementById("f").value=Math.round(fahr);
    }else   
    {
        cels=(document.getElementById("f").value -32) * 5 / 9;
        document.getElementById("c").value=Math.round(cels);
    }

}

function startTime()
{
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();

    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
    i="0" + i;
}
    return i;
}
</script>

【讨论】：

【解决方案2】：

我已经更新了您的代码，现在只有 2 个文本字段和许多不同的单位可以在下拉框中进行选择。根据 #chose1 下拉框的值，还有不同的选项。我还添加了一些输入验证，现在文本框中需要一个数字。无论如何，这是新代码：

HTML

<h1>What do you want to convert?</h1>
<input id="c" name="c" onkeyup="preveri()" onkeydown="validate(event)"> <!-- New function to make sure user enters a number -->
<select id="chose1" >
<option></option>
<option value="C">Celsius</option>
<option value="F">Farenhait</option>
<option value="KM">Kilometers</option>
</select><br />
equals<br />
<input id="f" name="f" disabled>
<select id="chose2">
<option></option>
</select> 
<div id="txt"></div>

Javascript

    $( "#chose1" ).change(function(){ // When the value of #chose1 changes
    var choseval = $("#chose1").val(); // Get value of #chose1
    if(choseval == "C"){
        changeoption("#chose2", ["Farenhait", "Kelvin"], ["F1", "K1"]); // New custom function, changeoption(element, options [must be a list], values [must be a list]
    }
    if(choseval == "F"){
    changeoption("#chose2", ["Celsius", "Kelvin"], ["C2", "K2"]);
    }
    if(choseval == "KM"){
    changeoption("#chose2", ["Miles", "Feet"], ["M1", "Fe1"]);
    }
});

function changeoption(element, options, values){
    $(element).empty(); //Clear options
    var i = 0;
    while(i<options.length){ //Moves selected term in list
    $(element).append($("<option>").val(values[i]).html(options[i])); // Add our option and values
    i++; // Move onto next list item
    }} 

function preveri()
{
    var convert=document.getElementById("chose2").value; // What do we want to convert to? This works because there's only one possible value for each unit of measurement

    if(convert=="F1"){ // Farenhait for celsius
        cels=Number(document.getElementById("c").value *1.8) + 32;
        document.getElementById("f").value=Math.round(cels);
    }
    if(convert=="K1"){ // Kelvin for celsius
        cels=Number(document.getElementById("c").value) + 273.15;
        document.getElementById("f").value=Math.round(cels);
    }
    if(convert=="C2"){ // Celsius for farenhait
        cels=Number(document.getElementById("c").value - 32) * (5/9);
        document.getElementById("f").value=Math.round(cels);
    }
    if(convert=="K2"){ // Kelvin for farenhait
        cels=Number(document.getElementById("c").value - 32) * (5/9) + 273.15;
        document.getElementById("f").value=Math.round(cels);
    }
    if(convert=="M1"){ // Miles for kilometer
        cels=Number(document.getElementById("c").value) * 0.62137;
        document.getElementById("f").value=Math.round(cels);
    }
    if(convert=="Fe1"){ // Feet for kilometer
        cels=Number(document.getElementById("c").value) * 3280.8399;
        document.getElementById("f").value=Math.round(cels);
    }
}

function validate(e){ // Our validate function
    x = e.keyCode;
    if((x<60&&x>47)||x==8||(x<106&&x>95)||x==110||x==190||x==16||x==17||x==18){ // Ignore numbers and other important keys, such as SHIFT and CONTROL
        return;
    }
    else{window.setTimeout("remove()",1);} // Trigger remove
}

function remove(){ // Remove invalid character
    y = document.getElementsByName("c")[0];
    q = y.value;
    q = q.slice(0, - 1); // Remove end character from value
    y.value = q;
}

function checkTime(i)
{
if (i<10)
{
    i="0" + i;
}
    return i;
}

function startTime(){
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    // doda 0 pred  števila<10
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    t=setTimeout('startTime()',500);
    }

$("docuemnt").ready(function(){ // I've moved your starttime function as I couldn't get it to work in JSFiddle with it being in the onload body tag attribute
    startTime();
});

CSS - 为禁用的文本框设置样式：

#f{
    -webkit-appearance: textfield;
    background-color: white;
    border: 2px inset;
    color: black;
}

我使用了一些 JQuery，所以现在你必须导入它，这里是 HTML - 重要的是导入这个 before 你的脚本否则 JQuery 功能不会工作：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

这是一个 JSFiddle：http://jsfiddle.net/HZfYL/2/

如果您需要更多帮助，请随时发表评论

【讨论】：

感谢重播，但我认为有些地方不太正确，因为我可以选择要转换的内容，但不能选择要转换的内容...我认为它与jquery有关...
在 JSFiddle 上它工作正常，但是一旦我将它放入实际文件（使用 Dreamweaver），它就不能正常工作。我可以选择从“公里”转换，但我不能像在 JSFiddle 上那样选择将其转换为“英尺”或“英里”。我不知道出了什么问题，我按照你说的做了一切，我在我的 JavaScript 代码之前导入了 JQuery HTML 代码。仍然无法正常工作：s ...现在真的很困惑。
您能给我们发送一个指向您的 HTML 文件的链接吗？所以我可以下载看看，谢谢。
啊，我明白了...您必须将导入脚本的 HTML 移动到 body 标记的底部，这是新的 HTML 粘贴箱：pastebin.com/EdkR2Gb7
哦，谢谢，但我不明白...这是为什么呢？你能告诉我，为什么在 JS 中你使用 '$' ？我不确定这意味着什么'$'..