Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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,008 Points

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

2 Answers

Tim Knight
Tim Knight
28,863 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,950 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