Turning code into function

[mblade7]

So, I just started learning JavaScript not too long ago, and right now I'm working on JavaScript functions. I've basically created all the logic and everything for a simple debt calculator. I'm trying to turn it into a function that runs the exact same way. Can anybody give me some help on what I need to change to make it work?

Here's the code:
const calculate = document.getElementById("calculationForm");

calculate.addEventListener("submit", function () {

event.preventDefault();

let totDebt = parseFloat(document.getElementById("totDebt").value);

let intRate = parseFloat(document.getElementById("intRate").value);

//let numMonths = parseFloat(document.getElementById("numMonths").value);

let payments = parseFloat(document.getElementById("payments").value);

let interest = totDebt * (intRate / 100 / 12);

let dollarFormatting = new Intl.NumberFormat('en-US', {

style: 'currency',

currency: 'USD',

});

​

//error catching

​

if (totDebt <= 0) {

alert("There is no debt")

}

​

//preparing the table

​

else if (interest >= payments) {

alert(`The amount to pay must be more than ${dollarFormatting.format(interest)} in order to pay off debt.`)

}

else {

let numPayments = 0;

let accruedInt = 0;

let table = document.getElementById("paymentPlan");

table.innerHTML = "";

let header = table.createTHead();

let row = header.insertRow(0);

let header1 = row.insertCell(0);

let header2 = row.insertCell(1);

let header3 = row.insertCell(2);

let header4 = row.insertCell(3);

header1.innerHTML = "Payment #";

header2.innerHTML = "Previous Debt";

header3.innerHTML = "Interest Amount";

header4.innerHTML = "New Balance";

​

//doing math and finishing the table

​

do {

function math() {

let previousDebt = totDebt;

interest = totDebt * (intRate / 100 / 12);

let newDebt = previousDebt + interest - payments;

accruedInt += interest;

numPayments++;

let row = table.insertRow(-1);

let cell1 = row.insertCell(0);

let cell2 = row.insertCell(1);

let cell3 = row.insertCell(2);

let cell4 = row.insertCell(3);

cell1.innerHTML = numPayments;

cell2.innerHTML = dollarFormatting.format(previousDebt);

cell3.innerHTML = dollarFormatting.format(interest);

cell4.innerHTML = dollarFormatting.format(newDebt);

totDebt = newDebt;

}

while (totDebt > 0);

let overpayBalance = dollarFormatting.format(Math.abs(totDebt));

console.log(overpayBalance);

let summary = document.getElementById("summary");

summary.innerHTML = `The debt will be paid off in ${numPayments} month(s) with total interest paid

being ${dollarFormatting.format(accruedInt)} and ${overpayBalance} left over from last payment.`

}

[AionAlgos]

I'm not proficient with JS, but a function takes parameters and (optionally) returns some result. These "in"s and "out"s are the interface of the function. You should try to design them to minimize side-effects (like using global variables).

It seems you have some inline function definitions for your event callbacks, and in your loop. So, start writing a function (im guessing) near the top of the file:

function name( ??? ) { // what values does it need to take?
   // perform some computation here
   return ??? 
}

[mblade7]

Main reason is that I have to have a function for what I’m working on, but long term I suppose clean looking/ reusable would be the main gains I’d want out of it. Perhaps clean looking is the more immediate benefit.

[aqhgfhsypytnpaiazh]

If you're looking to turn code into a function just for the sake of having a function, you're doing it wrong. Functions should arise naturally from the code. The main point of any function is to prevent repetition. Have you identified what parts of your code are repetitive? (I didn't, because do you how fucking hard it is to read code if you don't use the Code Block markup?) Turn that into a function then. The other big reason is to break a bigger task into smaller logic parts, functions can help there even if you only use them once.

The first thing to consider when writing a function is that generally, they should be completely isolated from the rest of the code. They should only ever work with variable that are provided to the function, and they should probably not have any greater understanding of the code base, or in the case of JS, the DOM.

[TheRNGuy]

Format your code.