Calculating radio buttons, text box, and datalists

Hi all.

I have my html done for my page implementing these in my form, but I am very lost on how to actually link them together so that they will calculate using var

Just shooting in the dark, as we aren’t seeing your code, but you would need an array of javascript objects, kind of formatted like this:

const BMIChart = {
  'female': {
    '18': [
        { 'min': 0, 'max': 16, 'verdict': 'Too Skinny' },
        { 'min': 17, 'max': 30, 'verdict': 'Healthy' },
        { 'min': 31, 'max': 35, 'verdict': 'Overweight' },
        { 'min': 36, 'max': 50, 'verdict': 'Obese' },
    '19': [
        { 'min': 0, 'max': 18, 'verdict': 'Too Skinny' },
        { 'min': 19, 'max': 31, 'verdict': 'Healthy' },
        { 'min': 32, 'max': 36, 'verdict': 'Overweight' },
        { 'min': 37, 'max': 50, 'verdict': 'Obese' },
    /* Continue with this same structure, to copy all the table data for female */
  'male': {
    /* Use the same structure as above, to create the table data for male */

With that in place, you would simply take the value from each of your inputs, and filter the BMIChart object.

let gender = document.querySelector("input[name='gender']").value,
    age = document.querySelector("input[name='age']").value,
    bodyFat = document.querySelector("input[name='body-fat']").value;

// This would filter out every other row, just leaving us having to determine which bracket this person
//  falls in.
let myTableRow = BMI[gender][age]; 

// The only thing left is to iterate over the `myTableRow`, and see if the bodyFat is between min and
//    max for each level.

Without knowing your level of JS skills, it’s hard to say exactly how that might work, but that’s the easiest way I can see. There are other, far more concise and ES6-y ways to do it, but it seems to me this is the most intuitive.

If you like, try setting up a jsfiddle or codepen or a, and we can cobble together a solution.

1 Like

Hey thanks for the reply! This is my html code right now if it helps at all.

Yep, so that structure I’d showed above pretty much marries straight into this. The only tricky bit is finding the one result in the row that matches your bodyfat value.

The big question is, how comfortable are you with javascript? Have you used things like Array.filter(...) yet?

This is actually my first time using javascript, hence me being extremely lost. I inserted all the js code for the females and males, as well as the “let”, but am now lost on how to get the results. I believe we were also supposed to incorporate “if” statements, so not sure how that would work in the code you gave.

This is you jumping in at the deep end. There is no way, as your first time using javascript, that this is a trivial example. Yes, there will be if statements. Lots and lots of them. The structure (just to kind of map out a first-time approach) might look like:

if (gender === 'female'){
  if (age === 18){
    if (bodyFat <= 16){
      // here we handle all female 18yo with a body fat % at or below 16
    } else if (bodyFat <= 30){
      // this is the case of female 18yo with a body fat between 17 and 30
      //  by filtering the under 16 first, anything under 30 will now be over 16
    } else if (bodyFat <= 35){
      // same as above, but body fat between 31 and 35
    } else {
      // and anything OVER 35 is all handled here.
  } else if (age === 19){
    // here, you would have the same four brackets, with different numbers for
    //   bodyfat. And you would do this for every age on the female table
} else {
   * Here, gender is male. Or anything not female. So the table is different, but
   *  the handling is exactly the same. Lots of if statements, first for age, and within
   *  that for body fat.

Again, there are FAR simpler ways to do this, but as they expect if statements, you’re going to be DROWNING them in if statements.

If you want to see this running so far, I’ve set up a starting repl for you to play with:

1 Like

Are you positive you have to use if statements?

Also, since this is some kind of homework assignment, it would probably be best if you asked your instructor for help instead of us doing your homework for you.

1 Like

Thanks for the help again! I have inputed all of the if/else statements, but even in your example code when I click the calculate body type button, it does not calculate and alert whether it is skinny, average, overweight or obese.

Do you have the code working somewhere? Did you build it on your local machine, or on that repl I pointed you to?

Hey Randell. The lectures were based around these if/else statements, so even though the criteria doesn’t say it appears they are mandatory. Unfortunately, the instructor does not answer questions as he directs them to the TA’s who take days to respond, which does not work well with weekly assignments.

Then I would say @snowmonkey has given you a great start on this project.

1 Like

I have it in both my local files and repl, but it will not allow me to post the link.

At any rate, inside the deepest nesting of each if statement (in the bodyfat if blocks), the easiest solution is simply to output the alert for each one. So in the first (female, 18yo, 14% body fat), you would alert("Your body type is too skinny");

Another approach would be to build a string in each of those if statements, and then output that string once after all the if statements have evaluated.

Would I implement it like this?

if (bodyfat < 16){
verdict += “Too skinny”;
alert(“You are skinny!”); }

If you alert that, then you can get rid of the verdict line. Otherwise, exactly right.

Hm…I’m confused as to where the alert supposed to go if that cancels out the verdict?

if (bodyfat < 16){
  alert("Your body type is Too skinny");

This is the following code I have right now for the 18 year old females, but it is still not alerting me

if (gender === ‘female’){

if (age === 18){
  if (bodyfat < 16){
alert("Your body type is too skinny")}
 else if (bodyFat < 30){
    alert("Your body type is average");
  } else if (bodyFat < 35) {
   alert("Your body type is overweight");
  }else {
alert("Your body type is obese");

And that code is happening inside the calculate button’s addEventListener handler, like I showed you?