title: Assigning a correct value with an id
body: <p>I have a little quiz that asks when was the great depression. There are 4 divs that contain a decade, with 1920 being the correct answer (3rd div). In my jQuery I have put that any variable that has a value of 1920 = 'correct_answer' and that when it is clicked on there will be a message that reads 'correct'. Any other answer will alert 'wrong'. Why isn't this working? </p>
  
  <pre><code>&lt;!doctype html&gt; 
  &lt;html&gt;
  &lt;head&gt; 
      &lt;link type="text/css" rel="stylesheet" href="hello.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;p class="question"&gt; When was the Great Depression? &lt;/p&gt;
          &lt;div class="answer" value="1940" id="answer_1"&gt; 1940's &lt;/div&gt;
          &lt;div class="answer" value="1980" id="answer_2"&gt; 1980's &lt;/div&gt;
          &lt;div class="answer" value="1960" id="answer_3"&gt; 1960's &lt;/div&gt;
          &lt;div class="answer" value="1920" id="answer_4"&gt; 1920's &lt;/div&gt;
  
  
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
          $(document).ready(function() {
              grade();
          })
              function grade() {
                  var correct_answer = 1920;
  
                  if($('.answer').attr('value') == correct_answer) {
                      $(this).click(function() {
                          alert('Correct');
                      }) else {
                          alert('Wrong');
                      }
              }
          &lt;/script&gt;
  </code></pre>