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

Can you help me with this js

i basically wnat the user to input three names and give him the reversed names. But its not working. Could you help me? 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>Reversed names!</title>
  </head>
  <body>
    <div id="container">
          <h1>Please input three names</h1>
          <div id="blanks">
            <form>
              <div class="form-group">
                <label for="name1">Name 1</label>
                <input id="name1" class="form-control" type="text">
              </div>
              <div class="form-group">
                  <label for="name2">Name 2</label>
                <input id="name2" class="form-control" type="text">
              </div>
              <div class="form-group">
                <label for="name3">Name 3</label>
                <input id="name3" class="form-control" type="text">
              </div>

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

          </div>

  </body>
</html>

THIS IS THE JS

function reversedNames (names){
  var inputNames = name1.reverse(),name2.reverse(),name3.reverse();
  inputNames.forEach(function(n) {
    alert('Your name is' + n + '!');
  });
});
//Front-end logic//
$(document).ready(function() {
  $("#blanks form").submit(function(event) {
    event.preventDefault();
    var names = [];
    names.push(($("input#name1").val()).toUpperCase());
    names.push(($("input#name2").val()).toUpperCase());
    names.push(($("input#name3").val()).toUpperCase());
    var result = reversedNames(names);
    alert(result);
  });
});

Thank you!

2 Answers

Kieran Black
Kieran Black
9,139 Points
Kieran Black
Kieran Black
9,139 Points

Hi Maria,

You may have more luck if you properly format your code using whitespace and markdown, it makes it easier for folk to read and therefore help.

KB :octopus:

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

Hi Maria,

The biggest thing I'm noticing here is that you're using reverse() to try to reverse the text of a string, but reverse() is actually a method to reverse the order of an Array. So first you'll need to build something that would actually reverse your text using a reverse method...

To do that you can actually create a new function onto the String type like this:

String.prototype.reverse = function(){
  splitext = this.split("");
  revertext = splitext.reverse();
  reversed = revertext.join("");
  return reversed;
}

Additionally since you're already passing in an array into the reversedNames function you don't need to pull all of those items out, you can just call reverse when you're outputting the data. Here's my revised very of your JS. Read through it and see if you understand what I'm doing here. Please ask any questions if you're not sure why I did something.

String.prototype.reverse = function(){
  splitext = this.split("");
  revertext = splitext.reverse();
  reversed = revertext.join("");
  return reversed;
}

function reversedNames(names){
  names.forEach(function(name){
    alert('Your name is ' + name.reverse() + '!');
  });
};
//Front-end logic//
$(document).ready(function() {
  $("#blanks form").submit(function(event) {
    event.preventDefault();
    var names = [];
    names.push(($("input#name1").val()).toUpperCase());
    names.push(($("input#name2").val()).toUpperCase());
    names.push(($("input#name3").val()).toUpperCase());
    reversedNames(names);
  });
});