首页 > 解决方案 > 我正在为一个类开发一个 Metric Converter 项目,但我不确定如何正确使用单选按钮?

问题描述

我正在为一个类开发一个 Metric Converter 项目,我应该使用单选按钮,但我不确定我应该如何正确使用它们来调用我对转换函数的 if 语句。我的老师让我在 html 页面中使用 javascript。我不太确定他让我们使用 Netbeans 的 IDE,而且它在 mac 上效果不佳,所以我不知道是否有任何语法错误,因为 Netbeans 拒绝显示其中的一半。我认为有一种更简单的方法可以做到这一点,但我在谷歌上找不到任何关于如何使用单选按钮的信息。如果有一种快速、简单的方法可以修复它,或者是否有更好的方法,我很想知道。

这是我下面的代码:

<!DOCTYPE html>
<html>
    <head>
        <title>English to Metric Converter</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body style="background-color: lightblue">
        <script type="text/javascript">
            var $ = function(id) {
                return document.getElementById(id);
            };
            function clrscrn() {
               $("convForm").reset();
               $("initval").focus();
            }
            window.onload = function() {
                $("clear").onclick = clrscrn;
                $("convert").onclick = convert;
            };
            function convert() {
                var initv = $("initval");
                var iv = parseFloat(initv.value);
                if (isNaN(iv)) {
                    alert("Please enter a numeric starting value.");
                    initv.focus();
                    return ;
                }
                alert("Input value validated as numeric: "+ iv);


            };

            function conversion() {
                 if (document.getElementById(id) === toC) {
                    double result = (initv – 32) * 5/9;
                    return ;

                }

                else if (document.getElementById(id) === toK) {
                    double result = initv * 1.6;
                    return ;
                }

                else if (getElementById(id) === toG) {
                    double result = initv * 28.35;
                    return ;
                }

                else {
                    alert("Please select a conversion");
                }
            }


        </script>
      <h1>English to Metric</h1>
          <p>Select the conversion and enter the English measurement you wish to convert:<br></p>
      <form name="convForm" id="convForm" action="" method="post">
          <p>Conversion type: <br ></p>
          <p>
          <input type="radio" id="toC" name="cType" value="toCelsius">Fahrenheit To Celsius<br>
          <input type="radio" id="toK" name="cType" value="toKilometers">Miles To Kilometers<br>
          <input type="radio" id="toG" name="cType" value="toGrams">Ounces To grams<br>
          <br ><br >
          <input type="text" id="initval" name="initval">
          <br ><br >
          <input type="button" id="convert" name="convert" value="Convert">
          <br ><br ></p>
          <p>Result: <br ></p>
          <input type ="text" id="result" name="result" style="width: 300px;">
          <br ><br >
          <input type="button" id="clear" name="clear" value="Clear">
      </form>
    </body>
</html>

标签: javascripthtmlradio-button

解决方案


虽然我不完全确定您遇到的问题,但看起来您在单选按钮旁边有您想要的文本,当您键入时,它只是挂在文件中:“华氏到摄氏度”“英里到公里”并且“盎司到克”

这可能会导致问题,因为您不希望文本仅位于 html 文件中而没有像

查看此解决方案以在单选按钮旁边添加文本! 如何在单选按钮旁边显示文本?

(您应该包含在标签中,或将文本元素浮动到单选按钮的一侧)


推荐阅读