My page will not run the java script after clicking on the submit button.

Question

here is my script.js

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 mash = ['13 days', '1 year and 34 days', '38 hours and 9 min', '40 years'];  // 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 mash[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 time = document.querySelector('#time');  // This says make a new variable and find the HTML tag that has the ID of "home" 
    var weapon = document.querySelector('#profession');
    var friend = document.querySelector('#pet');
    var location = document.querySelector('#location');

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

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

    // Build up our answers object
    var answers = {
        'mash': mash_choice(),
        'weapon': get_answer('weapon'),
        'friend': get_answer('friend'),
        'location': get_answer('location')
    }
    // 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

Index.html

<!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>Zombie MASH</title>
  <link href="normalize.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>
<body>

  <h1 class="logo"><img src="Zombie.jpg" /></h1>
  <p class="description">Fill in the blanks to find out how you stand in the zombie apocolypse.</p>

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

  <div id="answers" class="hide">
      <p>You will be in <span id="location"></span> when the news hit. You find the closest <span id="weapon"></span> and fight you way to the safe house but unofortunately <span id="friend"></span> was bitten. You will survive in the safe house for <span id="time"></span>.
  </div>

  <div class="bucket">

    <div class="choice-bucket">
      <h4 class="highlight">Where will you be when the the news breaks.</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">Your weapon fo choice will be...</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">Who will get bit out of your group.</h4>
          <input name="friend[]"type="text">
          <input name="friend[]"type="text">
          <input name="friend[]"type="text">
          <input name="friend[]"type="text">
      </div>

  </div>

  <input type="submit" value="Tell my fortune">
</form>
<script src="script.js"></script>
</body>
</html>

Answer 1 · 2016-06-18T13:27:41Z

June 18, 2016 1:27pm

Your fill_in_answers function has vars that refer to HTML tag IDs (document.querySelector) that you've changed—profession, pet, etc. This may be why it's not running.

Welcome to the Treehouse Community

Looking to learn something new?

Christopher Fischer

Christopher Fischer

My page will not run the java script after clicking on the submit button.

Ryan Frizzell

Ryan Frizzell

1 Answer

George Bartholomew

George Bartholomew