输入栏的数字转换后如何得到正确的输出数字？

问题描述 投票：0回答：1

我被另一个程序困住了，我似乎无法正确执行。对于这种情况，我有一个index.html文件（我无法更改其中的任何内容）以及我为其制作的js代码。

在这种情况下，我需要添加厨房秤的逻辑。我需要捕获各种输入，因此文本字段中的数字和输入从开始（startEenheid）选择和转换（convertEenheid）选择，然后计算正确的输出并将其写入输出段落。因此，如果起始数字 = 10ml 并且我需要将其转换为 cl，我需要计算此值，然后输出（在本例中）为 1 cl 以下。

我已经为此苦苦挣扎了两天了。起初它显示未定义+转换率作为输出，但经过大量随机更改后，它现在为 0 而不是未定义（进展是的）。这当然仍然不是正确的输出，但无论我做什么，我似乎都能弄清楚是什么导致它无法计算并输出正确的答案而不是 0。

修复可能很简单，但我的初学者编程大脑似乎无法理解它是什么。我确实喜欢这样的挑战练习，但是当你陷入困境并且找不到答案时，它会变得非常烦人。

let input = document.getElementById("invoer").innerText;
let invoer = document.getElementById("invoer");
let invoerNummer = parseInt(invoer, 10);
let startEenheid = document.getElementById("startEenheid").value;
let startButton = document.getElementById("startEenheid");
let convertEenheid = document.getElementById("convertEenheid").value;
let convertButton = document.getElementById("convertEenheid");
let select1;
let select2;
const conversie = [1, 10, 100, 1000];

startButton.addEventListener("input", start);
convertButton.addEventListener("input", start);
invoer.addEventListener("input", start);

function start() {
    let temp;
    let output;
    if (startEenheid === "ml") {
        temp = input / conversie[3];
    } else if (startEenheid === "cl") {
        temp = input / conversie[2];
    } else if (startEenheid === "dl") {
        temp = input / conversie[1];
    } else {
        temp = input;
    }

    if (convertEenheid === "ml") {
        output = temp * conversie[3];
    } else if (convertEenheid === "cl") {
        output = temp * conversie[2];
    } else if (convertEenheid === "dl") {
        output = temp * conversie[1];
    } else {
        output = temp;
    }
    return output;
}

document.getElementById("output").innerText = `${start()} ${convertEenheid}`;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
    <title>My Kitchen Aid</title>
</head>
<body>

    <div class="kitchenAid">
        <h1>KitchenAid</h1>
        <div class="row">
            <label for="invoer">Invoer:</label>
            <input type="text" id="invoer">
        </div>
        <div class="row">
            <label for="startEenheid">Start Eenheid</label>
            <select name="startEenheid" id="startEenheid">
                <option value="ml">ml</option>
                <option value="cl">cl</option>
                <option value="dl">dl</option>
                <option value="l">l</option>
            </select>
        </div>
        
        <div class="row">
            <label for="convertEenheid">Gewenste Eenheid</label>
            <select name="convertEenheid" id="convertEenheid">
                <option value="ml">ml</option>
                <option value="cl">cl</option>
                <option value="dl">dl</option>
                <option value="l">l</option>
            </select>
        </div>
        <p id="output">-</p>
    </div>
</body>
</html>

在输出为 0 后，我尝试使用 parseInt。这更像是一个随机的解决方案，因为老实说我不知道问题是什么。我尝试使用 2 个函数而不是一个，但这确实让我自己变得更加困难，哈哈。

javascript html dom events inputevent
1个回答
0
投票

您需要确保每次运行 

start
函数时都能获得最新值。因此，您需要在 
start
函数内移动输入和选择元素的所有变量。此外，当您将 
start
函数的返回值设置为 id 
output
的元素时，它不会在每次值发生变化时运行，因为它位于 
start
函数之外。这是让它发挥作用的最低限度的改变。请根据您的需要进行修改。此外，您还可以在带有 id 
output
的 p 标记中提供一些初始值，例如 0 ，以在用户输入任何内容之前显示一些值。 
<p id="output">0 ml</p>

// let invoer = document.getElementById("invoer");
// let invoerNummer = parseInt(invoer, 10);
let startButton = document.getElementById("startEenheid");
let convertButton = document.getElementById("convertEenheid");
const conversie = [1, 10, 100, 1000];
startButton.addEventListener("input", start);
convertButton.addEventListener("change", start);
invoer.addEventListener("change", start);

function start() {
  let input = document.getElementById("invoer").value;
  let convertEenheid = document.getElementById("convertEenheid").value;
  let startEenheid = document.getElementById("startEenheid").value;
  let temp;
  let output;

  if (startEenheid === "ml") {
    temp = input / conversie[3];
  } else if (startEenheid === "cl") {
    temp = input / conversie[2];
  } else if (startEenheid === "dl") {
    temp = input / conversie[1];
  } else {
    temp = input;
  }

  if (convertEenheid === "ml") {
    output = temp * conversie[3];
  } else if (convertEenheid === "cl") {
    output = temp * conversie[2];
  } else if (convertEenheid === "dl") {
    output = temp * conversie[1];
  } else {
    output = temp;
  }
  document.getElementById("output").innerText = `${output} ${convertEenheid}`;
}

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.