Learn Basic Algorithmic Thinking by Building a Number Sorter - Step 14

JavaScript
1

Tell us what’s happening:

I am stuck on this problem and nothing seems to be working.

Your code so far

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


/* file: styles.css */


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

const sortButton = document.getElementById("sort");
const sortInputArray = (event) => {
  event.preventDefault();
  const inputValues = [
    ...document.getElementsByClassName("values-dropdown")
  ].map((dropdown) => Number(dropdown.value));

  const sortedValues = inputValues.sort((a, b) => a - b);
  updateUI(sortedValues);
}
const updateUI = (array = []) => {
  array.forEach((num, i) => {
    const outputValueNode = document.getElementById(`output-value-${i}`);
    if (outputValueNode) {
      outputValueNode.innerText = num;
    }
  });
};
sortButton.addEventListener("click", sortInputArray);

// 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/128.0.0.0 Safari/537.36

Challenge Information:

Learn Basic Algorithmic Thinking by Building a Number Sorter - Step 14

2

which part is the part you are struggling with most?
Are you not sure how to do the sorting for example?
Did you test and add logs to debug your code?

3

You should use innerText to set the text of outputValueNode . this the bit i am stuck with

4

i did but nothing worked


const sortInputArray = (event) => {
  event.preventDefault();

  const inputValues = [
    ...document.getElementsByClassName("values-dropdown")
  ].map((dropdown) => Number(dropdown.value));

  const sortedValues = inputValues.sort((a, b) => a - b);

  updateUI(sortedValues);
}

const updateUI = (array = []) => {
  array.forEach((num, i) => {
    const outputValueNode = document.getElementById(output-value-${i});

    if (outputValueNode) {
      console.log(Updating element with ID: output-value-${i} to value: ${num});
      outputValueNode.innerText =num;
    }
  });
  };

sortButton.addEventListener("click", sortInputArray)
5

the instructions were:

Set the innerText property of outputValueNode to num .

It doesn’t say to do it under a specific condition though, so why do you have an if statement?

6 
  event.preventDefault();

  const inputValues = [
    ...document.getElementsByClassName("values-dropdown")
  ].map((dropdown) => Number(dropdown.value));

  const sortedValues = inputValues.sort((a, b) => a - b);

  updateUI(sortedValues);
}

const updateUI = (array = []) => {
  array.forEach((num, i) => {
    const outputValueNode = document.getElementById(output-value-${i});
      outputValueNode.innerText =num;
    };
  };

the if statement has been removed but i still get error

7

i would reset and try again. You may have changed another line by mistake.

8 
Mod edit: code removed

it worked now the problem was the semicolon

9

Glad you figured it out. I edited your post to remove the code since our policy is that only code that you need help with is to be shared on the forum.