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
Heather Davies
3,114 PointsI can't get MASH to work, I've read answers saying link HTML to CSS which I think I've done but it still doesn't work.
I'm not sure if I have linked everything correctly and why my MASH game won't work when I press the submit button. Any help will be appreciated!
3 Answers
Andrew Stelmach
12,583 PointsTry putting
<script src="script.js"></script>
at bottom of your html, just above the closing <body> tag.
In the javascript file, you need to make #MASH lowercase #mash, because in your html the id is lowercase (line 17).
Andrew Stelmach
12,583 PointsYour HTML on line 19 was:
<div id="answers" class="hide">
<p>You will live in a <span id="home"></span> with a <span id="money"></span> pound fortune in <span id="location"></span>.
</div>
Should be:
<div id="answers" class="hide">
<p>Your home is in <span id="location"></span> with a <span id="pet"></span> as you are a <span id="profession"></span> who owns a <span id="home"></span>.
</div>
<div class="bucket">
Andrew Stelmach
12,583 PointsThe more important thing is that you understand how this all works.
Your browser can only use HTML, CSS, and Javascript itself. Those are the only things that are ever delivered to your browser.
In this case, the HTML, CSS and Javascript is all loaded into the browser once. From that point on, the browser just uses those files itself to do everything.
All CSS and Javascript files must be referenced from the HTML file in order for them to be loaded into the browser.
Also, in short, Javascript in a browser can respond to mouse clicks and other events to 'change stuff'.
That's really all you need to understand at this point I reckon.
Heather Davies
3,114 PointsBecause I changed the questions the answer has to be changed to read properly, as below:
<div id="answers" class="hide"> <p>Your home is in <span id="location"></span> with a <span id="fortune"></span> pound fortune. Your greatest achievement will be <span id="achievement"></span> and your mode of transport will be <span id="home"></span>. </div> <div class="bucket">
<div class="choice-bucket"> <h4 class="highlight">Where will you live?</h4> <input name="location[]"type="text"> <input name="location[]"type="text"> <input name="location[]"type="text"> <input name="location[]"type="text"> </div>
<div class="choice-bucket"> <h4 class="highlight">What will your fortune be?</h4> <input name="fortune[]"type="text"> <input name="fortune[]"type="text"> <input name="fortune[]"type="text"> <input name="fortune[]"type="text"> </div>
<div class="choice-bucket"> <h4 class="highlight">what will be your greatest achievement?</h4> <input name="achievement[]"type="text"> <input name="achievement[]"type="text"> <input name="achievement[]"type="text"> <input name="achievement[]"type="text"> </div>
Then i think you have to change the js as well but maybe this is where I'm going wrong:
function fill_in_answers(answers) { // Find the spans that need filled var home = document.querySelector('#home'); // This says make a new variable and find the HTML tag that has the ID of "home" var profession = document.querySelector('#achievement'); var pet = document.querySelector('#fortune'); var location = document.querySelector('#location');
// Fill them with the provided answers home.innerText = answers['mash']; profession.innerText = answers['achievement']; pet.innerText = answers['fortune']; location.innerText = answers['location']; home.innerHTML = answers.mash; // Change the content of the element in the HTML doc with the id "home" to the "mash" value in answers profession.innerHTML = answers.profession; // Change the content of the element in the HTML doc with the id "career" to the "career" value in answers pet.innerHTML = answers.pet; location.innerHTML = answers.location; }
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 = { 'mash': mash_choice(), 'profession': get_answer('profession'), 'pet': get_answer('pet'), 'location': get_answer('location') }
(I don't know why its done that at the top, i copied the code, ill email it also)
Heather Davies
3,114 Pointsi now have everything working apart from I cant type in the top three boxes
Heather Davies
3,114 PointsAndy, I need you you tell me how you post the code like this so its easy to read? I canny work it oot!
never mind, i got it!
Heather Davies
3,114 Pointsvar name = prompt("What is your name?");
var career =prompt("what skill are you greatest at?");
var enjoy =prompt("What sport do you enjoy?");
var food =prompt("What is your faveorite food?");
alert("you're done!");
var message = name + " is the greatest at " + career;
message += ". You enjoy ";
message += enjoy;
message += " and eating ";
message += food;
document.write(message);
Andrew Stelmach
12,583 PointsAndrew Stelmach
12,583 PointsI've had a bit of a look over the videos and it seems to me that you don't need to change the js file - you can just copy/paste it. So it's probably your HTML that's wrong, maybe even your CSS, but check your HTML first.