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

I can't get my MASH button to return results.

I changed some of the wording and I feel like that has got to be the cause, but I can't figure out how to fix it.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=0.5, minimal-ui">

  <title>fantasy MASH</title>
  <link href="normalize.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
  <link href="script.js" rel="stylesheet">
</head>
<body>

  <h1 class="logo"><img src="img/castle.png" /></h1>
  <p class="description">Find out which fantasy character you are.</p>

<form action="" method="post" id="mash">

  <div id="answers" class="hide">
      <p>You are a <span id="character"></span> with <span id"hair"></span> and a magical pet <span id="pet"></span>. You use your <span id="weapon"></span> along with your <span id="attribute"></span> to maintain peace in your land.
  </div>

  <div class="bucket">

    <div class="choice-bucket">
      <h4 class="highlight">What color hair do you have?</h4>
        <input name="hair[]" type="text">
        <input name="hair[]" type="text">
        <input name="hair[]" type="text">
        <input name="hair[]" type="text">
      </div>

    <div class="choice-bucket">
      <h4 class="highlight"> What is your magical pet?</h4>
        <input name="pet[]" type="text">
        <input name="pet[]" type="text">
        <input name="pet[]" type="text">
        <input name="pet[]" type="text">
    </div>

      <div class="choice-bucket">
        <h4 class="highlight">Which weapon do you yield?</h4>
          <input name="weapon[]" type="text">
          <input name="weapon[]" type="text">
          <input name="weapon[]" type="text">
          <input name="weapon[]" type="text">
      </div>

     <div class="choice-bucket">
        <h4 class="highlight">What is your best attribute?</h4>
          <input name="attribute[]" type="text">
          <input name="attribute[]" type="text">
          <input name="attribute[]" type="text">
          <input name="attribute[]" type="text">
      </div>

  </div>

  <input type="submit" value="Who am I?">
</form>
<script src=""></script>
</body>
</html>
body {
  font-family: Tahoma, Verdana, Segoe, sans-serif;
  font-size: 27px;
  margin: 0 auto;
  max-width: 960px;
  padding: 40px 10px;
  line-height: 1px;
  background: #ffe5f6;
  color: #190033;
  font-weight: 300;
}

.logo{
  width: 100%;
}

.logo img {
  margin: 0 auto;
  display: block;
}

.description {
  margin: 80px auto 40px;
  text-align: center;
}

.bucket {
  width: 100%;
  margin-bottom: 40px;
  display: inline-block;
}

.choice-bucket {
  width: 25%;
  float: left;
  display: inline-block;
  margin: 0;
  padding: 0;
}

.choice-bucket input {
    font-size: 18px;
    margin: 15px 4%;
    padding: 20px 0;
    width: 92%;
    color: #BB475C;
    border-radius: 6px;
    border: 0;
    outline: 0;
    text-indent: 20px;
}

.highlight {
  font-size: 18px;
  margin-left: 30px;
  opacity: .8;
  line-height: 24px;
}

#answers {
    /* opacity: 0; */
    margin: 60px 0;
    background: #fff;
    border-radius: 6px;
    color: #BB475C;
    transition: 1s linear;
}

#answers p {
  max-width: 760px;
  margin: auto;
  padding: 80px 0;
}

#answers p span {
  font-weight: bold;
}

form input[type=submit] {
    background: #190033;
    border: 0;
    color: #fff;
    font-size: 20px;
    padding: 1em 2em;
    cursor: pointer;
    margin: 0 auto 60px;
    display: block;
    text-align: center;
    border-radius: 6px;
    font-weight: bold;
}

.hide {
  opacity: 0;
  height: 0;
}

.show {
  opacity: 1;
  height: 100%;
}
function random_number(num) {  // New function called random_choice that takes one parameter, num (or a number)
    // Get a random number between 0 and a passed-in number
    var num = num || 4  // If no number passed in, default to 4
    return Math.floor(Math.random() * num); // Round the answer down (floor) of a random number between 0 and 1 and multiply it by a number. Then return a value and exit the function.
}

function mash_choice() {  // New function called mash_choice that doesn't take any parameters 
    // Since MASH is a special case, give it its own list
    var character = ['Elf', 'Dwarf', 'Giant', 'Human'];  // The array of choices to pick from 
    var randomNum = random_number(4);  // Use the above function to get a number between 0 and 4
    return character[randomNum];  // Return the list item the random number function just picked and exit the function 
}

function get_answer(category) { 
    // Get a random answer from the available answers in a given category
    var choices = [];  // A blank array to hold the user provided answer  
    var selector = 'input[name="' + category + '[]"]';  // Build a CSS selector for the blanks in our passed in category 
    var inputs = document.querySelectorAll(selector);  // Get all of the inputs that match our selector 
    var answer;  

    for (var i = 0; i < inputs.length; i++) {  // Begin a for loop that will run through the code. i++ = add one to the counter which is "i"
        answer = inputs[i].value;  // Get the input with the index value of the counter and get the value ie. if they typed in dog, you get back "dog" 
        if (answer !== '') {  // If answer doesn't equal a blank... !== means doesn't equal 
            choices.push(answer); //...add it to the end of the list 
        }
    }
    return choices[random_number(choices.length)];   // Pick and return a random choice choice.length = number of answers the user provided in that category 
}

function fill_in_answers(answers) {
    // Find the spans that need filled
    var character = document.querySelector('#character');  // This says make a new variable and find the HTML tag that has the ID of "character" 
    var hair = document.querySelector('#hair');
    var pet = document.querySelector('#pet');
    var weapon = document.querySelector('#weapon');
    var attribute = document.querySelector('#attribute');

    // Fill them with the provided answers
    character.innerText = answers['character'];
    hair.innerText = answers['hair'];
    pet.innerText = answers['pet'];
    weapon.innerText = answers['weapon'];
    attribute.innerText ="answers['attribute'];
    character.innerHTML = answers.character;  // Change the content of the element in the HTML doc with the id "home" to the "mash" value in answers 
    hair.innerHTML = answers.hair;  // Change the content of the element in the HTML doc with the id "career" to the "career" value in answers 
    pet.innerHTML = answers.pet;
    weapon.innerHTML = answers.weapon;
    attribute.innerHTML = answers.attribute;
}

function handle_submission(evt) {
    evt.preventDefault();  // Stop the form from reloading the page 
    evt.stopPropagation();  // Stop the form from reloading the page

    // Build up our answers object
    var answers = {
        'character': mash_choice(),
        'hair': get_answer('hair'),
        'pet': get_answer('pet'),
        'weapon': get_answer('weapon')
        'attribute': get_answer('attribute')
    }
    // Fill in the answers
    fill_in_answers(answers);

    var answer_div = document.querySelector('#answers');
    answer_div.classList.add('show');
}

// Find the form on the page and attach a handler for when it's submitted
var form = document.querySelector('#mash');  
form.addEventListener('submit', handle_submission);  // Anytime the form is submitted, we want to call the function handle_submission 

4 Answers

Jesse Zelaya
Jesse Zelaya
13,599 Points

I found some errors in your JavaScript. These might be the issue.

attribute.innerText =answers['attribute']; //Removed extra quote
// Build up our answers object
    var answers = {
        'character': mash_choice(),
        'hair': get_answer('hair'),
        'pet': get_answer('pet'),
        'weapon': get_answer('weapon'), // Was missing comma
        'attribute': get_answer('attribute')
    }

Thank you, I fixed those issues, but my button still isn't working.

Jesse Zelaya
Jesse Zelaya
13,599 Points

Was this issue fixed in the HTML as well?

  <link href="script.js" rel="stylesheet">

Should be:

  <script src="script.js" ></script>

Yeah, that's fixed, and the responses still aren't being returned.

I am having a similar issue. Were you able to get it figured out?

No I still haven't gotten it to work.

Couple of ideas, first change your variables in your Javascript to 5 (line #3) and Line (12). If it still doesn't work then remove the link to the style.css in the html. That will narrow it down to just the css file.

I finally was able to get my program to get results.