Javascript: Dynamically rendering a list [Beginner]

Question

I'm building a word count tracker and would like to show how many words needed per day to reach a target within 30 days. For example if someone enters in 50,000 as their target, they'll have to complete 1667 words per day. I want to create a list element that would say:

Day 1: 1667
Day 2: 3334
Day 3....etc.

My current plan was to create an array that contained the list elements, but the script seems to be causing the site to break entirely! I'm not sure what's going on here.

let wordsPerDay = 0;

function wordsPerDayF(x) {
  wordsPerDay = x / 30;
  wordsPerDay = Math.round(wordsPerDay)
  document.getElementById('wordsNeeded').innerHTML = wordsPerDay.toString();
};
// Above functions finds the word count needed per day

let milestones = []
let finalMilestones = [];

function createMilestones() {
  let newWordCount = wordsPerDay;
  for (let w = 1; w <= 30; w++) {
    milestones.push(newWordCount)
    newWordCount += newWordCount;
  };
  let count = 1;
  for (let z = 0; z = milestones.length; z++) {
    finalMilestones.push("Day " + count + ": " + milestones[z]);
    count++;
  };
};

function final() {
  createMilestones();
  let str = '<ul>'
  finalMilestones.forEach(function(item) {
    str += '<li>' + item + '</li>';
  });
  str += '</ul>';
  document.getElementById("wordsNeeded").innerHTML = str;
};
final();

<div id="wordsNeeded"></div>

I'm new to coding, so apologies if this code is rough or hard to understand.

To elaborate on Barmar's comment above, z = something will not compare z to something, it will assign z as something. In JavaScript, equality comparison is done using == or ===. Also, in this case of a for loop, it's usual that you don't want the iteration where z is exactly equal to the length (it starts at zero and ends at length-1), hence the use of < instead. — Pac0
– Pac0, Commented Nov 5, 2019 at 19:51

Barmar · Accepted Answer · 2019-11-05 19:51:37Z

2

z = milestones.length should be z < milestones.length.

You never call wordsPerDayF().

newWordCount += newWordCount will double the word count each day, but that's not what you really want. You just want to add newWordCount to a total. You can also use w * newWordCount to get the total for each day.

let wordsPerDay = 0;

function wordsPerDayF(x) {
  wordsPerDay = x / 30;
  wordsPerDay = Math.round(wordsPerDay)
  document.getElementById('wordsNeeded').innerHTML = wordsPerDay.toString();
};
// Above functions finds the word count needed per day

let milestones = []
let finalMilestones = [];

function createMilestones() {
  let newWordCount = wordsPerDay;
  for (let w = 1; w <= 30; w++) {
    milestones.push(newWordCount * w)
  };
  let count = 1;
  for (let z = 0; z < milestones.length; z++) {
    finalMilestones.push("Day " + count + ": " + milestones[z]);
    count++;
  };
};

function final() {
  wordsPerDayF(50000);
  createMilestones();
  let str = '<ul>'
  finalMilestones.forEach(function(item) {
    str += '<li>' + item + '</li>';
  });
  str += '</ul>';
  document.getElementById("wordsNeeded").innerHTML = str;
};
final();

<div id="wordsNeeded"></div>

answered Nov 5, 2019 at 19:51

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AndyDaMandy Over a year ago

This worked! Thank you so much! I appreciate the help here.

Collectives™ on Stack Overflow

Javascript: Dynamically rendering a list [Beginner]

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related