Build a Recipe Ingredient Converter - Step 17

JavaScript
1

Tell us what’s happening:

Unsure what the user story is asking for, I believe my code is outputting correctly but the error message is unclear where the fault lies (“Your updateResultsList function should properly update the DOM.”). I have added a submit event listener to test this and it does appear to be updating the DOM correctly.

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
// User Editable Region

const updateResultsList = () => {
  resultList.innerHTML = "";
  const name = ingredientName.value;
  const fromUnit = unitToConvert.value

  units.forEach((toUnit) => {
    if (toUnit !== fromUnit) {
      const converted = convertQuantity(fromUnit)(toUnit)(ingredientQuantity.value);
      const newItem = document.createElement('li');
      newItem.textContent = `${name}: ${converted.toFixed(2)} ${toUnit}s`;
      resultList.appendChild(newItem);
    }
  })
}

recipeForm.addEventListener("submit", () => {
  updateResultsList()
})

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Challenge Information:

Build a Recipe Ingredient Converter - Step 17

2

I have also tried updating the DOM by accessing the innerHTML property directly, but the test still fails:

resultList.innerHTML += <li>${name}: ${converted.toFixed(2)} ${toUnit}s</li>;

3

Why changing the Number of Servings field doesn’t affect the output?

4

Doh! Was calling the wrong function. Thanks Mostafa :clap:

1 Like