编写二进制到十进制转换形式 - 我的代码有什么问题？ （JavaScript 和 HTML5）

Question

我有一个像这样的简单 HTML 表单

<form class="TextCenter" onSubmit="ConversionScript">
    <input type="radio" name="Conversion" value="BintoDec" checked onClick="document.getElementById('stringToConvert').value='10000001 to 129';" /> Binary to Decimal
        <br />
    <input type="radio" name="Conversion" value="DectoBin" onClick="document.getElementById('stringToConvert').value='129 to 10000001'"/> Decimal to Binary
        <br />
        <br />
    String to Convert: 
    <input type="text" id="StringToConvert" value="10000001 to 129" onClick="document.getElementById('stringToConvert').value=''" />
        <br />
        <br />
    <input type="submit" />
</form>

当用户选择输入类型时，他们会输入一个字符串，例如“10000000”或“129”。然后，在提交表单时，它会根据用户的 JavaScript 选择进行转换，如下所示：

/* Misc. Global functions and variables (not used on their own or by one singular thing) */
function GetRadioValue() {
    var inputs = document.getElementsByName("Conversion");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].checked) {
            return inputs[i].value;
        }
    }
}

var stringToConvertRaw = document.getElementById("StringToConvert");
var stringToConvert = parseFloat(stringToConvertRaw.replace(/\D/g,''));
/* End Section */
/* Main Handler Function (initates lower level functions) */
function ConversionScript() {
    var radioValue = GetRadioValue();

    if (radioValue == "BintoDec")
    {
        BinaryToDecimal();
    }
    else if (radioValue == "DecToBin")
    {
        DecimalToBinary();
    }
}
/* End Section */
/* Function to Convert Binary to Decimal */
function BinaryToDecimal() {
    var conversionArray = stringToConvert.split('').reverse();
    var decimalSum = 0;

    for (var i = 0; i < conversionArray.length; i++) {
        if (conversionArray[i] === 1) {
            decimalSum += Math.pow(2, i);
        }
    }

    alert("The binary string " + stringToConvert + " is " + decimalSum + " .");
}
/* End Section */

但是，由于某种原因，在提交表单时，除了页面重新加载之外什么都没有发生。没有警报，什么都没有。我的代码语法是否有问题（我一直在使用 Java，所以这是可能的）还是我犯了另一种错误？ （我已经检查了一百次，并没有发现问题所以......我认为一些新的眼睛可能会有所帮助。）

Answer 1

由于您并没有真正提交表单，我会将您的提交输入转换为按钮并将 onSubmit 属性移动到按钮上的 onclick 属性。

<form class="TextCenter">
    <input type="radio" name="Conversion" value="BintoDec" checked onClick="document.getElementById('stringToConvert').value='10000001 to 129';" /> Binary to Decimal
    <br />
    <input type="radio" name="Conversion" value="DectoBin" onClick="document.getElementById('StringToConvert').value='129 to 10000001'" /> Decimal to Binary
    <br />
    <br /> String to Convert:
    <input type="text" id="StringToConvert" value="10000001 to 129" onClick="document.getElementById('stringToConvert').value=''" />
    <br />
    <br />
    <button type="button" onclick="ConversionScript()" />Submit</button>
</form>

话虽如此，将 onclick 和 onsubmit 属性添加到标记通常被认为是一种不好的做法。您应该在 JavaScript 中将所有内容都绑定到甚至是侦听器。

另外，你的脚本中有一些语法错误，所以我在这里清理了它们：

/* Misc. Global functions and variables (not used on their own or by one singular thing) */
function GetRadioValue() {
    var inputs = document.getElementsByName("Conversion");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].checked) {
            return inputs[i].value;
        }
    }
}

var stringToConvertRaw = document.getElementById("StringToConvert").value;
var stringToConvert = parseFloat(stringToConvertRaw.replace(/\D/g,''));
/* End Section */
/* Main Handler Function (initates lower level functions) */
function ConversionScript() {
    var radioValue = GetRadioValue();

    if (radioValue == "BintoDec")
    {
        BinaryToDecimal();
    }
    else if (radioValue == "DecToBin")
    {
        DecimalToBinary();
    }
}
/* End Section */
/* Function to Convert Binary to Decimal */
function BinaryToDecimal() {
    var conversionArray = stringToConvert.toString().split('').reverse();
    var decimalSum = 0;

    for (var i = 0; i < conversionArray.length; i++) {
        if (conversionArray[i] === 1) {
            decimalSum += Math.pow(2, i);
        }
    }
  }

Answer 2

当您提交表单时，默认操作将强制页面重新加载。您可以在表单的 onSubmit 末尾返回 false 以防止这种情况发生。尝试将onSubmit="ConversionScript" 替换为onSubmit="ConversionScript(); return false;