title: How to make a button show an alert box in my html document?
body: <p>I'm trying to make a button show an alert box. Basically you write something in an input form, then you click one button to show an alert box with what you wrote in it. You can see it here in <a href="http://jsfiddle.net/x8jejp3a/2/" rel="nofollow">jsfiddle</a>.</p>
  
  <p>My code looks like this:</p>
  
  <h2>HTML:</h2>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;link rel='stylesheet' type='text/css' href='style.css' /&gt;
          &lt;script type='text/javascript' src='script.js'&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="myblock"&gt;
              &lt;div id="left"&gt;&lt;/div&gt;
              &lt;div id="center"&gt;
                  &lt;form&gt;
                      &lt;input type="text" name="a" value="Type your word here!"&gt;
                  &lt;/form&gt;
                  &lt;button&gt;&lt;strong&gt;Alert!&lt;/strong&gt;
  
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div id="right"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <h2>CSS:</h2>
  
  <pre><code>.myblock {
      margin-top:60px;
      height:20%;
      width:100%;
  }
  #left {
      height:100px;
      width:33%;
      top:50%;
      margin-top:-50px;
      float:left;
      position:relative;
      background-color:green
  }
  #center {
      height:100px;
      width:33%;
      top:50%;
      margin-top:-50px;
      float:left;
      position:relative;
      background-color:red
  }
  #right {
      height:100px;
      width:33%;
      top:50%;
      margin-top:-50px;
      float:left;
      position:relative;
      background-color:blue
  }
  form {
      font-size: 12px;
      font-family: Verdana, Arial, Sans-Serif;
      display: inline-block;
      margin-left:50px;
  }
  button {
      height:35px;
      width:70px;
      margin-top: 25px;
      border-radius:5px;
  }
  </code></pre>
  
  <h2>JavaScript:</h2>
  
  <p>This is the part I think I am getting wrong</p>
  
  <pre><code>$(document).ready(function () {
      $("button").click(function () {
          var word = $("input[name=a]").val();
          alert(word);
      });
  })
  </code></pre>
  
  <p>So why is it not working? I don't know what I am doing wrong.</p>