尺寸转换器

Question

试图创建一个具有多个不同维度转换的网站。已经成功地完成了长度，但是与几乎完全相同的代码权重是不工作的。这是我的代码：

    <section class="inputsW">
                <input type="number"  name="tonne" id="tonne" class="inputW" placeholder="Tonnes">
                
                <input type="number" name="kilo" id="kilo" class="inputW" placeholder="Kilograms">
                
                <input type="number" name="gram" id="gram" class="inputW" placeholder="Grams">
                
                <input type="number" name="milligram" id="milligram" class="inputW" placeholder="Milligrams">
                
                <input type="number" name="ton" id="ton" class="inputW" placeholder="US Tons">
                
                <input type="number" name="stone" id="stone" class="inputW" placeholder="Stone">
                
                <input type="number" name="pound" id="pound" class="inputW" placeholder="Pounds">
                
                <input type="number" name="ounce" id="ounce" class="inputW" placeholder="Ounces">
                
            </section>

我对我的html非常满意，我相信问题在开关语句的(e.target.name)中，因为这段代码对于第一个转换器非常好。

const tonneInput = document.getElementById("tonne");
const kiloInput = document.getElementById("kilo");
const gramInput = document.getElementById("gram");
const milligramInput = document.getElementById("milligram");
const tonInput = document.getElementById("ton");
const stoneInput = document.getElementById("stone");
const poundInput = document.getElementById("pound");
const ounceInput = document.getElementById("ounce");
const inputs = document.getElementsByClassName("input");


for (let i = 0; i < inputsL.length; i++) {
  let input = inputsL[i];

    input.addEventListener("input", function (e) {
        let value = parseFloat(e.target.value);
    
    
        switch (e.target.name) {
            case "tonne":
            
                kiloInput.value = (value*1000).toPrecision(4);
                gramInput.value = (value*1e+6).toPrecision(4);
                milligramInput.value = (value*1e+9).toPrecision(4);
                tonInput.value = (value*1.102).toPrecision(4);
                stoneInput.value = (value*157).toPrecision(4);
                poundInput.value = (value*2205).toPrecision(4);
                ounceInput.value = (value*35274).toPrecision(4);
               break; 

            case "kilo":
                tonneInput.value = (value/1000).toPrecision(4);
                gramInput.value = (value*1000).toPrecision(4);
                milligramInput.value = (value*1e+6).toPrecision(4);
                tonInput.value = (value/907).toPrecision(4);
                stoneInput.value = (value/6.35).toPrecision(4);
                poundInput.value = (value*2.2046).toPrecision(4);
                ounceInput.value = (value*35.274).toPrecision(4);
                break; 

            case "gram":
                tonneInput.value = (value/1e+6).toPrecision(4);
                kiloInput.value = (value/1000).toPrecision(4);
                milligramInput.value = (value*1000).toPrecision(4);
                tonInput.value = (value/907185).toPrecision(4);
                stoneInput.value = (value/6350).toPrecision(4);
                poundInput.value = (value/454).toPrecision(4);
                ounceInput.value = (value/28.35).toPrecision(4);
                break; 

            case "milligram":
                tonneInput.value = (value/1e+9).toPrecision(4);
                kiloInput.value = (value/1e+6).toPrecision(4);
                gramInput.value = (value/1000).toPrecision(4);
                tonInput.value = (value/9.072e+8).toPrecision(4);
                stoneInput.value = (value/ 6.35e+6).toPrecision(4);
                poundInput.value = (value/453592).toPrecision(4);
                ounceInput.value = (value/28350).toPrecision(4);
                break; 

            case "ton":
                tonneInput.value = (value/1.102).toPrecision(4);
                kiloInput.value = (value*907).toPrecision(4);
                gramInput.value = (value*907185).toPrecision(4);
                milligramInput.value = (value*9.072e+8).toPrecision(4);
                stoneInput.value = (value*143).toPrecision(4);
                poundInput.value = (value*2000).toPrecision(4);
                ounceInput.value = (value*32000).toPrecision(4);
                break; 

            case "stone":
                tonneInput.value = (value/157).toPrecision(4);
                kiloInput.value = (value*6.35).toPrecision(4);
                gramInput.value = (value*6350).toPrecision(4);
                milligramInput.value = (value*6.35e+6).toPrecision(4);
                tonInput.value = (value/143).toPrecision(4);
                poundInput.value = (value*14).toPrecision(4);
                ounceInput.value = (value*224).toPrecision(4);
                break; 
    
            case "pound":
                tonneInput.value = (value/2205).toPrecision(4);
                kiloInput.value = (value/2.205).toPrecision(4);
                gramInput.value = (value*454).toPrecision(4);
                milligramInput.value = (value*453592).toPrecision(4);
                tonInput.value = (value/2000).toPrecision(4);
                stoneInput.value = (value/14).toPrecision(4);
                ounceInput.value = (value*16).toPrecision(4);
                break; 
    
            case "ounce":
                tonneInput.value = (value/35274).toPrecision(4);
                kiloInput.value = (value/35.274).toPrecision(4);
                gramInput.value = (value*28.35).toPrecision(4);
                milligramInput.value = (value*28350).toPrecision(4);
                tonInput.value = (value/32000).toPrecision(4);
                stoneInput.value = (value/224).toPrecision(4);
                poundInput.value = (value/16).toPrecision(4);
                break; 
            default:
    }
  });
}

Answer 1

错误导致了你的问题！

您可以找到具有输入类名的输入字段：

const inputs = document.getElementsByClassName("input");，但真正的类名是inputW

任何使用inputsL变量的for循环，但例外名称是inputs。

工作代码是这里