HTML Javascript 计算器计算错误

Question

我在添加<select>时按计算时无法得到结果，请问您能在这里找出问题吗？

我还希望与结果一起显示一些文本我想在结果框中显示 2 个结果，文本如下

Width: result 

和

Length: result

 // searching <form id="calculateForm"> and waiting for submitting document.querySelector('#calculateForm').addEventListener('submit', function(e) { e.preventDefault(); // prevent submitting form (reload page for example) result(); // your calculating }) function result() { const x = document.querySelector("#constant").value; var unit1 = document.getElementById("unit1").value; if (unit1 == "in") { x = Number(x) * 0.0254 } if (unit1 == "mm") { x = Number(x) * 0.001 } if (unit1 == "cm") { x = Number(x) * 0.01 } const y = document.querySelector("#height").value; var unit2 = document.getElementById("unit2").value; if (unit2 == "in") { y = Number(y) * 0.0254 } if (unit2 == "mm") { y = Number(y) * 0.001 } if (unit2 == "cm") { y = Number(y) * 0.01 } const z = document.querySelector("#freq").value; var unit3 = document.getElementById("unit3").value; if (unit3 == "mhz") { z = Number(z) * 10 ** 6 } if (unit3 == "ghz") { z = Number(z) * 10 ** 9 } const result = document.querySelector("#Calculate"); if (unit4 == "in") { result = Number(result) * 0.0254 } if (unit4 == "mm") { result = Number(result) * 0.001 } if (unit4 == "result") { result = Number(result) * 0.01 } let c = 3 * 10 ** 8; let k = Number(x) + 1; let k2 = k / 2; let k3 = Math.sqrt(k2); let y1 = Number(z) * 2; let w = c / (y1 * k3); result.textContent = w; result.style.display = "block"; // show it, because [display: none] by default }

 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; padding: 0; margin: 0; } body { font-family: 'Roboto', sans-serif; padding: 10px; } #calculateForm { max-width: 250px; width: 100%; margin: 0 auto; /* center form vertically */ } .input-wrapper { margin-bottom: 10px; /* 10px bottom indent */ } .input-wrapper label { font-size: 14px; font-weight: 700; line-height: 1.43; color: #494949; display: block; } .input-wrapper input[type="text"] { border-radius: 3px; border: 1px solid #878787; background-color: #fff; font-size: 0.875rem; font-weight: 400; padding: 0.8125rem 0.875rem; width: 100%; outline: none; transition: border-color 0.25s ease-in-out; } .input-wrapper input[type="text"]:focus { border: 2px solid #0070be; } button { background-image: linear-gradient(108deg, #1999fb, #0039ac); background-color: #0070b8; color: #fff; border: 0; font-size: 1rem; text-align: center; text-transform: uppercase; height: 48px; padding: 11px 15px; min-width: 3rem; width: 100%; outline: none; cursor: pointer; } button:hover { background-image: linear-gradient(110deg, #54baff, #0039ac 144%); } #Calculate { display: none; /* hide until getting results */ border-radius: 3px; border: 1px solid #8cc1ec; background-color: #e0f1ff; padding: 1.4375rem 1.5625rem; margin: 20px auto; max-width: 250px; }

 <form id="calculateForm"> <div class="input-wrapper"> <label for="constant">Di-Electric Constant:</label> <input type="text" id="constant" placeholder="Enter Value"> </div> <div class="input_wrapper"> <select id="unit1" class="input"> <option value="in">Inches</option> <option value="cm">Centimeters</option> <option value="mm">Millimeters</option> </select> </div> <div class="input-wrapper"> <label for="height">Di-Electric Height:</label> <input type="text" id="height" placeholder="Enter Value"> <select id="unit2" class="input"> <option value="in">Inches</option> <option value="cm">Centimeters</option> <option value="mm">Millimeters</option> </select> </div> <div class="input-wrapper"> <label for="freq">Operational Frequency:</label> <input type="text" id="freq" placeholder="Enter Value"> <select id="unit3" class="input"> <option value="mhz">MHz</option> <option value="ghz">GHz</option> </select> </div> <button type="submit">Calculate</button> <select id="unit4" class="input"> <option value="in">Inches</option> <option value="cm">Centimeters</option> <option value="mm">Millimeters</option> </select> </form> <div id="Calculate" style="display: block;"></div>

Answer 1

除了Assignment to constant variable. 由于在const内误用const导致的错误，该函数还有其他难以理解的部分。 诚然，一旦const声明被替换，该函数将返回一个值，但由于引用了 DOM 元素而不是值（如上面的评论），最后一段代码什么也不做，所以我相信代码的最后一部分旨在根据所选单位更改计算结果。 通过使用查找矩阵来获得变量 x,y,z 的乘数和结果 - w，大大简化了上述大部分内容。

 const q=(e,n=document)=>n.querySelector(e); q('#calculateForm').addEventListener('submit',result); function result(e) { e.preventDefault(); let matrix={ mm:0.001, cm:0.01, in:0.0254, mhz:Math.pow(10,6), ghz:Math.pow(10,9), result:0.01, neo:011011100110010101101111 // ;-) }; let x=matrix[ q('#unit1').value ] * Number( q('#constant').value ); let y=matrix[ q('#unit2').value ] * Number( q('#height').value ); let z=matrix[ q('#unit3').value ] * Number( q('#freq').value ); let c = 3 * Math.pow(10,8); let k = Number(x) + 1; let k2 = k / 2; let k3 = Math.sqrt(k2); let y1 = Number(z) * 2; let w = c / (y1 * k3); let result=matrix[ q('#unit4').value ] * w; q('#Calculate').textContent = result; q('#Calculate').style.display = "block"; }

 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; padding: 0; margin: 0; } body { font-family: 'Roboto', sans-serif; padding: 10px; } #calculateForm { max-width: 250px; width: 100%; margin: 0 auto; /* center form vertically */ } .input-wrapper { margin-bottom: 10px; /* 10px bottom indent */ } .input-wrapper label { font-size: 14px; font-weight: 700; line-height: 1.43; color: #494949; display: block; } .input-wrapper input[type="text"] { border-radius: 3px; border: 1px solid #878787; background-color: #fff; font-size: 0.875rem; font-weight: 400; padding: 0.8125rem 0.875rem; width: 100%; outline: none; transition: border-color 0.25s ease-in-out; } .input-wrapper input[type="text"]:focus { border: 2px solid #0070be; } button { background-image: linear-gradient(108deg, #1999fb, #0039ac); background-color: #0070b8; color: #fff; border: 0; font-size: 1rem; text-align: center; text-transform: uppercase; height: 48px; padding: 11px 15px; min-width: 3rem; width: 100%; outline: none; cursor: pointer; } button:hover { background-image: linear-gradient(110deg, #54baff, #0039ac 144%); } #Calculate { display: none; /* hide until getting results */ border-radius: 3px; border: 1px solid #8cc1ec; background-color: #e0f1ff; padding: 1.4375rem 1.5625rem; margin: 20px auto; max-width: 250px; }

 <form id="calculateForm"> <div class="input-wrapper"> <label for="constant">Di-Electric Constant:</label> <input type="text" id="constant" placeholder="Enter Value"> </div> <div class="input_wrapper"> <select id="unit1" class="input"> <option value="in">Inches</option> <option value="cm">Centimeters</option> <option value="mm">Millimeters</option> </select> </div> <div class="input-wrapper"> <label for="height">Di-Electric Height:</label> <input type="text" id="height" placeholder="Enter Value"> <select id="unit2" class="input"> <option value="in">Inches</option> <option value="cm">Centimeters</option> <option value="mm">Millimeters</option> </select> </div> <div class="input-wrapper"> <label for="freq">Operational Frequency:</label> <input type="text" id="freq" placeholder="Enter Value"> <select id="unit3" class="input"> <option value="mhz">MHz</option> <option value="ghz">GHz</option> </select> </div> <button type="submit">Calculate</button> <select id="unit4" class="input"> <option value="in">Inches</option> <option value="cm">Centimeters</option> <option value="mm">Millimeters</option> </select> </form> <div id="Calculate" style="display: block;"></div>

Answer 2

您已将变量 x 创建为常量。

  function result() {
          const x = document.querySelector("#constant").value;

但是在后面的部分中，您再次尝试为 x 分配一个值

if(unit1=="in")
{
x = Number(x) * 0.0254
}

用

var x = document.querySelector("#constant").value;