Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Maria Cecilia Le Brech
Maria Cecilia Le Brech
3,611 Points

Whats wrong with this js?

Im trying to make a form where the user inputs three fruits and the alert box(or it could be a text)tell him that he had a for example (inputs banana, apple, pineapple=you had a baappi milkshake).Or it could be the last part of the word too like(napleple milkshake).I know pretty silly! But i cant make it to work. I dont know how to connect front end and back end...or else. this is the INDEX:

<!DOCTYPE html>
<html>
  <head>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-3.0.0.js"></script>
    <script src="js/scripts.js"></script>
    <title>Your milshake!</title>
  </head>
  <body>
    <div id="container">
          <h1>Please input three fruits</h1>
          <div id="blanks">
            <form>
              <div class="form-group">
                <label for="date">Fruit 1</label>
                <input id="fruit1" class="form-control" type="text">
              </div>
              <div class="form-group">
                <label for="date">Fruit 2</label>
                <input id="fruit2" class="form-control" type="text">
              </div>
              <div class="form-group">
                <label for="date">Fruit 3</label>
                <input id="fruit3" class="form-control" type="text">
              </div>

              <button type="submit" class="btn">Your milkshake</button>
            </form>

          </div>
          <div id="output">
          </div>


  </body>
</html>


//THIS IS THE JS

var milkshake = function(fruits) {
var fruits=[];
var fruitSliced=fruits[0].slice(2)+fruits[1].slice(2)+fruits[2].slice(2);
  return("You had a "+ fruitSliced+" milkshake!");

};


$(document).ready(function() {
  $("form#blanks").submit(function(event) {
    event.preventDefault();
    var fruit1 = ($("input#fruit1").val()).toUpperCase();
    var fruit2 = ($("input#fruit2").val()).toUpperCase();
    var fruit3 = ($("input#fruit3").val()).toUpperCase();
    var result = milkshake(fruitSliced);
    // $("#output").text(result);
    alert(result);

  });

//Can you please help me?
//Thanks in advance!


});
jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

hey I helped you format the code. So it's easier to read.

2 Answers

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Hi Maria,

There are a couple of things here that could use some adjusting.

First your form ID. The form tag is within the #blanks ID so you'd want a selector like this:

("#blanks form").submit(function(event) {...});

Next, you actually want to build your array before you pass it into the milkshake function. Here are the changes I did in total:

function milkshake(fruits) {
  var fruitSliced = fruits[0].slice(2) + fruits[1].slice(2) + fruits[2].slice(2);
  return("You had a "+ fruitSliced+" milkshake!");
};

$(document).ready(function() {
  $("#blanks form").submit(function(event) {
    event.preventDefault();
    var fruits = [];
    fruits.push(($("input#fruit1").val()).toUpperCase());
    fruits.push(($("input#fruit2").val()).toUpperCase());
    fruits.push(($("input#fruit3").val()).toUpperCase());
    var result = milkshake(fruits);
    alert(result);
  });
});

The changing of the function syntax style was my personal preference, not something that's essential. Now with this you build an array called fruits and send it into the milkshake function.

Shane Oliver
Shane Oliver
19,977 Points
Shane Oliver
Shane Oliver
19,977 Points 
//give your function a more intuitive name
//pass an array to the function called fruits
var getMilkshakeName = function(fruits) {
    var name = fruits[0].slice(2) + fruits[1].slice(2) + fruits[2].slice(2);
    return("You had a "+ name +" milkshake!");
};

$(document).ready(function() {
  $("form#blanks").submit(function(event) {
    event.preventDefault();
    var fruits = []; //make an array to store the inputs
    // push each input val to the array
    fruits.push($("input#fruit1").val()).toUpperCase();
    fruits.push($("input#fruit2").val()).toUpperCase();
    fruits.push($("input#fruit3").val()).toUpperCase();
    alert(getMilkshakeName(fruits));
  });
});

you were passing your milkshake function a var fruitsliced that didn't exist