Decoding the code - Why does this work the way it does?

So this code works, but I don’t know WHY?

To be more specific…

why do I need to create 3 more constants on the equals.onclick instead of your passing the results of the foce1 function?

2,
Can somebody breakdown the equals.onclick function? specially why do I need to put pressureValue and areaValue in parenthesis ? How does this function knows I need to multiply those values?

The section in question is this:

function force1 (pressure, area) {
  return pressure * area;
}



equals.onclick = function () {
    const pressureValue = Number(pressure.value)
  const areaValue = Number(area.value)
    const result = force1(pressureValue, areaValue)
  
  forceResult.innerHTML = result + " lbs"
}

The full code is in codepen below. It is basically a multiplication of 2 fields.

You could just use forceResult.innerHTML = force1(Number(pressure.value), Number(area.value)) + " lbs" if you really wanted to. Creating the variables just makes cleaner and easier to read code.

Because they’re being passed into the Number constructor.

I don’t understand the question. Functions don’t “know” anything. Whoever you got this code from wrote this function specifically to calculate and print the calculated force.

Ok so… you got something like this const result = force1(pressureValue, areaValue)… but force1 is already a function that is done, why do I need to pass 2 more items in the parentheses? It seems redundant because those values are in the return of the force1 function.

This is the other section of the code…

let pressure = document.getElementById('pressure1');
let area = document.getElementById('area1');
let equals = document.getElementById('equals1');
let forceResult = document.getElementById('forceResult');

The force1 function takes to arguments. That’s why two arguments are passed to it.

Why couldn’t I do something like this for example? (I think this didn’t work)

equals.onclick = function () {
  
  
  forceResult.innerHTML = force1 + " lbs"
}

Because force1 is a function, not a variable.

Have you learned JavaScript yet? It seems like you’re trying to read JavaScript without learning how JavaScript works.

1 Like

You are more correct than not. I am writing JavaScript and making somethings work without knowing how they work.

You mentioned something about Number constructor. Where can I get more information about that?

I for example understand the force1 function getting 2 items (what is the proper name for it?) such as pressure and area, then you multiply them to get a return…

I don’t understand why the equals.onclick function needs to have all those 3 const, and why the const result is written that way. To me, without much knowledge it just looks redundant.

Where could I get more information about this type of syntax?

I suggest going through the JavaScript curriculum at freeCodeCamp.org and building up the fundamentals before pursuing a project like this.

I have been reading on it… but I couldn’t find that part…

This doesn’t work either.

const force1 = function (pressure, area) {
  return pressure * area;
}



equals.onclick = function () {
    
  
  forceResult.innerHTML = force1 + " lbs"
}

Have you been doing all of the challenges? I would start with Comment Your JavaScript Code and keep going. You can’t really handle a project like this in any sort of reasonable way without doing some sort of basic programming course.

I’m not sure what you mean. If you go to https://www.freecodecamp.org/learn/, the second part of the curriculum is labeled “JavaScript Algorithms and Data Structures”.

1 Like

What would be a good link for the basics?

I got a Udemy course on Javascript, but really the guy teaching it wasn’t the greatest. So I know enough just to make a mess, or get something working without knowing how.

I have been looking at W3 schools for the syntax as well.

I don’t really want to start a 10 hour JavaScript course with what is the difference on const, let, and var… but I surely would like to get to the point of the syntax and reasoning of why a function like equals.onlick works the way it works.

You really need to start with the basics since you don’t understand functions.

Start here: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/

If you skip the basics, you will be constantly lost and writing buggy, bad code that never quite does what you want.

1 Like

Thanks… I’ll check it.

1 Like

I am actually doing that freecodecamp course. Its easy and fast, lets see how far I can get it.

1 Like