0

I can get my code to work in the snippet tool, but once I try to run this in my own browser when I click on the $12 button, no alert will show up. Also, how can I get the alert to grab the header name so it displays "You have selected 1 gram of Skywalker".

The only buttons I have working so far are 12 and 35. When a user selects a button, I want to alert them of the corresponding weight as well as the product name 

$(".btn1").click(function () {
  var number = $(this).closest("tr").find(".weight1").text();
  var name =$(this).closest("h3").find(".itemName").text();
  alert("You have selected " + number + " of " + name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
 <title>Herb</title>
 <link rel="stylesheet" type="text/css" href="all.css">

 <!--<script src="herb.js"></script>-->
 <script>
  $(".btn1").click(function () {
  var number = $(this).closest("tr").find(".weight1").text();
  alert(number);
});
 </script>

</head>
<body>
<div class="nav">

</div>

<div class="center">
 <label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu" role="button">
        <ul id="menu">
        <li><a href="homepage.html">Home</a></li>
        <li><a href="deals.html">Deals!</a></li>
        <li>
            <a href="#">Menu ￬</a>
            <ul class="hidden">
                <li><a href="herb.html">Herb</a></li>
                <li><a href="concentrate.html">Concentrates</a></li>
                <li><a href="edible.html">Edibles</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Login ￬</a>
            <ul class="hidden">
                <li><a href="login.html">Login</a></li>
                <li><a href="signup.html">Sign up</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Social Media ￬</a>
            <ul class="hidden">
                <li><a href="https://www.facebook.com" target="_blank">Facebook</a></li>
      <li><a href="https://www.snapchat.com/" target="_blank">Snapchat</a></li>
       <li><a href="https://www.instagram.com" target="_blank">Instagram</a></li>
       <li><a href="https://www.twitter.com" target="_blank">Twitter</a></li>
            </ul>
        </li>
    </ul>
</div>



<div class="menuwrapper">
<div class="one">
 <h3 class="itemName">Skywalker</h3>
 <img src="Skywalker.png" alt="Skywalker" height="250" width="232">
 <table>
  <tr>
   <td class="weight1">1 gram</td>
   <td class="price"><input id="button1" class="btn1" type="button" value="$12"></td>
  </tr>
  <tr>
   <td class="weight1">1/8 ounce</td>
   <td class="price"> <input class="btn1" type="button" name="item1" value="$35"></td>
  </tr>
  <tr>
   <td class="weight">1/4 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$75"></td>
  </tr>
  <tr>
   <td class="weight">1/2 ounce</td>
   <td class="price"> <input class="btn" type="button" name="item1" value="$140"></td>
  </tr>
  <tr>
   <td class="weight">1 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$275"></td>
  </tr>
 </table>
</div>

<div class="two">
 <h3>Purple Urkle</h3>
 <img src="purple_urkle.jpg" alt="purple urkle" height="250" width="232">
 <table>
  <tr>
   <td class="weight">1 gram</td>
   <td class="price"> <input class="btn" type="button" name="item1" value="$10"></td>
  </tr>
  <tr>
   <td class="weight">1/8 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$30"></td>
  </tr>
  <tr>
   <td class="weight">1/4 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$70"></td>
  </tr>
  <tr>
   <td class="weight">1/2 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$130"></td>
  </tr>
  <tr>
   <td class="weight">1 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$250"></td>
  </tr>
 </table>
</div>

<div class="three">
 <h3>Blueberry</h3>
 <img src="Skywalker.png" alt="Blueberry" height="250" width="232">
 <table>
  <tr>
   <td class="weight">1 gram</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$12"></td>
  </tr>
  <tr>
   <td class="weight">1/8 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$35"></td>
  </tr>
  <tr>
   <td class="weight">1/4 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$75"></td>
  </tr>
  <tr>
   <td class="weight">1/2 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$140"></td>
  </tr>
  <tr>
   <td class="weight">1 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$275"></td>
  </tr>
 </table>
</div>

<div class="four">
 <h3>Lucid Blue</h3>
 <img src="Skywalker.png" alt="Lucid blue" height="250" width="232">
 <table>
  <tr>
   <td class="weight">1 gram</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$12"></td>
  </tr>
  <tr>
   <td class="weight">1/8 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$35"></td>
  </tr>
  <tr>
   <td class="weight">1/4 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$75"></td>
  </tr>
  <tr>
   <td class="weight">1/2 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$140"></td>
  </tr>
  <tr>
   <td class="weight">1 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$275"></td>
  </tr>
 </table>
</div>

<div class="five">
 <h3>Strawberry Cough</h3>
 <img src="Skywalker.png" alt="Strawberry cough" height="250" width="232">
 <table>
  <tr>
   <td class="weight">1 gram</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$12"></td>
  </tr>
  <tr>
   <td class="weight">1/8 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$35"></td>
  </tr>
  <tr>
   <td class="weight">1/4 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$75"></td>
  </tr>
  <tr>
   <td class="weight">1/2 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$140"></td>
  </tr>
  <tr>
   <td class="weight">1 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$275"></td>
  </tr>
 </table>
</div>

<div class="six">
 <h3>Cactus OG</h3>
 <img src="Skywalker.png" alt="Cactus OG" height="250" width="232">
 <table>
  <tr>
   <td class="weight">1 gram</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$12"></td>
  </tr>
  <tr>
   <td class="weight">1/8 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$35"></td>
  </tr>
  <tr>
   <td class="weight">1/4 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$75"></td>
  </tr>
  <tr>
   <td class="weight">1/2 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$140"></td>
  </tr>
  <tr>
   <td class="weight">1 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$275"></td>
  </tr>
 </table>
</div>

<div class="seven">
 <h3>Critical Cure</h3>
 <img src="Skywalker.png" alt="Critical Cure" height="250" width="232">
 <table>
  <tr>
   <td class="weight">1 gram</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$12"></td>
  </tr>
  <tr>
   <td class="weight">1/8 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$35"></td>
  </tr>
  <tr>
   <td class="weight">1/4 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$75"></td>
  </tr>
  <tr>
   <td class="weight">1/2 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$140"></td>
  </tr>
  <tr>
   <td class="weight">1 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$275"></td>
  </tr>
 </table>
</div>

<div class="eight">
 <h3>Green Crack</h3>
 <img src="Skywalker.png" alt="Green Crack" height="250" width="232">
 <table>
  <tr>
   <td class="weight">1 gram</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$16"></td>
  </tr>
  <tr>
   <td class="weight">1/8 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$55"></td>
  </tr>
  <tr>
   <td class="weight">1/4 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$95"></td>
  </tr>
  <tr>
   <td class="weight">1/2 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$185"></td>
  </tr>
  <tr>
   <td class="weight">1 ounce</td>
   <td class="price"><input class="btn" type="button" name="item1" value="$350"></td>
  </tr>
 </table>
</div>
</div> <!--end container -->
</body>
</html>
the_crouton
  • 43
  • 1
  • 8
  • Related: [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Many sandbox/snippet tools will run your code within an event handler rather than directly within the ``. – Jonathan Lonowski Apr 08 '18 at 02:25
  • Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Heretic Monkey Apr 08 '18 at 03:06

2 Answers2

2

It is because when your script executes, it doesnot find the element with .btn1 class, because that html element is not created yet.

Use $( document ).ready(), to execute the script, after the document is loaded and ready.

Replace your javascript with below code:

$(document).ready(function(){
    $(".btn1").click(function () {
      var number = $(this).closest("tr").find(".weight1").text();
      alert(number);
    });
});
huan feng
  • 5,307
  • 1
  • 22
  • 40
Jatinder Kumar
  • 475
  • 5
  • 15
0

Along with the answer from @jatinder-kumar, your jQuery script tag is not in the <head> tag. It is completely outside of your HTML document. If you want it in the head, you can use his code, if you move it to the bottom, before the close of the <body> tag, and your other scripts after it, you can avoid using the $(document).ready().

tenor528
  • 1,055
  • 13
  • 20