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
ashley balcom
3,208 PointsI 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
13,599 PointsI 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')
}
ashley balcom
3,208 PointsYeah, that's fixed, and the responses still aren't being returned.
Rich Barker
7,832 PointsI am having a similar issue. Were you able to get it figured out?
ashley balcom
3,208 PointsNo I still haven't gotten it to work.
Rich Barker
7,832 PointsCouple 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.
ashley balcom
3,208 Pointsashley balcom
3,208 PointsThank you, I fixed those issues, but my button still isn't working.
Jesse Zelaya
13,599 PointsJesse Zelaya
13,599 PointsWas this issue fixed in the HTML as well?
<link href="script.js" rel="stylesheet">Should be:
<script src="script.js" ></script>