Question 311216 in Html Question posted in
Some basic documentation can be found here.

Html – How to get the right output number after converting the number in the input field?

I’m stuck with another program I can’t seem to get right. For this case I have an index.html file (I can’t change anything in this) and the js code I made for it.

In this case I need to add the logic for a kitchen scale. I need to capture the various inputs, so the number in the text field and the input from the start (startEenheid) select and conversion (convertEenheid) select, then calculate the correct output and write this to the output paragraph. So if the start number = 10ml and I need to convert it to cl, I’ll need to calculate this and then have an output of (in this case) 1 cl below.

I’ve been struggeling with this for a 2 days now. At first it showed undefined + the conversionrate as output but after a lot of random changes it’s now at 0 instead of undefined (progress yay). This is ofcourse still not the right output but whatever I do, I just can seem to figure out what it is that makes it not calculate and output the right answer instead of 0.

The fix is probably an easy one but my beginner programming brain can’t seem to grasp what it is. I do like the challenge exercises like this give but it gets very annoying when you get stuck and can’t find the answer.

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>

After getting to the output being 0 I tried using parseInt. This was more of a random solution as I honestly didn’t know what the problem was. I tried using 2 functions instead of one but this honestly made it more difficult for myself haha.

Tags:

2

Answers


  1. 0

    You need to make sure that you get the latest value every time you run the start function. So you need to move all the variable of input and select elements inside the start function. Also when you are setting the return value of start function the element with id output, it doesn’t run everytime the value changes since its outside of the start function. Here is the bare minimum changes for it to work. Please modify as per your needs. Also you can provide some initial value like 0 within your p tag with id output to show some value before user enters anything.
    <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}`;
}
    Login or Signup to reply.
  2. 0

    Since you can’t change the HTML you will need to bind an event listener to each input element that can trigger a change. In your case you have an <input> and 2 <select> elements. If any of them change you want the conversion to happen.

    The crux of this problem is to convert whatever value the user types into your smallest base unit and then convert to whatever output value the user selects. In other words, just convert the input value to ml and then you will be able to multiply consistently.

    In the code below I have created a Map which is a key-value map object to make doing the conversion consistent. Maps come with an easy get() method so the conversion can be done with a couple of lines of code:

    // Get all inputs which trigger a converison and listen for change events
const inputs = document.querySelectorAll("#invoer, #startEenheid, #convertEenheid");
for (const i of inputs){
    i.addEventListener('change', convert);
}

function convert(){
    // Create a conversion Map
    const conversie = new Map([
        ["ml", 1],
        ["cl", 10],
        ["dl", 100],
        ["l", 1000]
    ]);
    // Get the values for all the inputs
    const invoer = document.querySelector('#invoer').value;
    const startEenheid = document.querySelector('#startEenheid').value;
    const convertEenheid = document.querySelector('#convertEenheid').value;
    // Get the output DOM element to display
    const outputElement = document.querySelector("#output");

    // Always convert to ml first as the base unit
    const baseUnit = invoer * conversie.get(startEenheid);
    // Now convert baseUnit whatever the  output unit is
    const outputUnit = baseUnit / conversie.get(convertEenheid);

    // Display the computed outputUnit using template literals
    outputElement.textContent = `${outputUnit}${convertEenheid}`
}
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search