Geek Answers Handbook

Getting Uncaught ReferenceError for an array that I thought was defined

"Uncaught ReferenceError: Undefined Answers" error The problem is that I thought I defined the variable.

a summary of my code.

I have a class that turns on, on click, then another function that displays these answers and puts them in an array of answers.

im, then using ajax to submit the name entered on the form and the array I just made in php doc. the array is the part that gives me problems

live version on the site

Jsfiddle

$(document).ready(function() {


  //catch this values, because you will use these for more than one time
  var answers = [];



  function getAnswers() {
      answers = []; //empty old answers so you can update it
      $.map($('.on'), function(item) {
        answers.push($(item).data('value'));
      });
    }
    //init the answers in case you use it before click
  getAnswers();


  $(document).on('click', 'img', function(e) {
    e.preventDefault();
    $(this).toggleClass('on');

    //trigger the state change when you click on an image
    $(document).trigger('state-change');
  });

  //get answers when event was triggered
  $(document).on('state-change', function(e) {
    getAnswers();
  });

  $('#btn-show').click(function() {
    alert(answers.join(',') || 'nothing was selected');
  });



});
//ajax to send the data to php file
$(document).on('click', '#btn-show', function() {
  $.ajax({
    type: "POST",
    url: ".../inc/insert.php", //"/path/to/script.php"
    data: {
      "name": $('input[name="name"]').val(),
      "choices": answers
        //this is the part giving me an error
    },
    success: function(response) {
      alert(response);
      //the response variable contains whatever your PHP echoes out --
    }

  });

});
/* style for the selectable images  */

.choices {
  margin: 8px;
  font-size: 16px;
  height: 100px;
  width: 100px;
}
/* this shows the user which item has been selecting along with making a searchable class for the program */

.on {
  padding: 10px;
  background-color: red;
}
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/javascript.js"></script>
  <LINK REL=StyleSheet HREF="css/code.css" TYPE="text/css">

  <!DOCTYPE HTML>

  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/javascript.js"></script>
    <LINK REL=StyleSheet HREF="css/code.css" TYPE="text/css">
  </head>

  <body>
    <form method="post">
      Name
      <input type="text" name="name" />
      <br>
      <img src="img/m_bacon.jpg" alt="Bacon" class="choices" data-value="0">
      <br>
      <img src="img/m_beef.jpg" alt="Beef" class="choices" data-value="1">
      <br>

      <button id="btn-show">Submit</button>
  </body>

  </html>
Run codeHide result
+4
source share
1 answer

. , var answers = [] $(document).ready(function () {...}, click ready.

: http://jsfiddle.net/ku9pwo4c/1/ ( , JS Fiddle - AJAX request url, , , PHP .)

:

$(document).ready(function () {
    var answers = [];
});

$(document).on('click', '#btn-show', function () {
    // This will be undefined because answers was declared in a 
    // different function scope.
    console.log(answers);
});

:

$(document).ready(function () {
    var answers = [];
    $(document).on('click', '#btn-show', function () {
        // This time answers will be `[]`
        console.log(answers);
    });
});

:

$(document).ready(function () {
  var answers = [1, 2, 3, 4];
  $(document).on('click', '#btn-show', function () {
    console.log(answers);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn-show">Click me!</button>
Hide result
+2

More articles:


All Articles