Код не работает в браузере, но работает в инструменте сниппетов

avatar
the_crouton
8 апреля 2018 в 01:56
54
2
0

Я могу заставить свой код работать в инструменте фрагмента, но как только я попытаюсь запустить его в своем собственном браузере, когда я нажму кнопку $12, предупреждение не появится. Кроме того, как я могу получить предупреждение, чтобы захватить имя заголовка, чтобы оно отображало «Вы выбрали 1 грамм Скайуокера».

Пока что у меня работают только кнопки 12 и 35. Когда пользователь выбирает кнопку, я хочу предупредить его о соответствующем весе, а также о названии продукта.

$(".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>
Источник
Jonathan Lonowski
8 апреля 2018 в 02:25
0

Связанный: Почему jQuery или метод DOM, такой как getElementById, не находит элемент?. Многие инструменты песочницы/фрагмента запускают ваш код в обработчике событий, а не непосредственно в <head>.

Heretic Monkey
8 апреля 2018 в 03:06
0

Возможный дубликат Почему jQuery или метод DOM, такой как getElementById, не находит элемент?

Ответы (2)

avatar
Jatinder Kumar
8 апреля 2018 в 02:03
2

Это происходит потому, что когда ваш скрипт выполняется, он не находит элемент с классом .btn1, потому что этот элемент html еще не создан.

Используйте $(document).ready() для выполнения скрипта после загрузки и готовности документа.

Замените свой javascript кодом ниже:

$(document).ready(function(){
    $(".btn1").click(function () {
      var number = $(this).closest("tr").find(".weight1").text();
      alert(number);
    });
});
huan feng
8 апреля 2018 в 02:22
0

@ Ответ Кумара должен быть правильным! см. plnkr:plnkr.co/edit/zgAfyLPyqUbbHaeoFw92?p=preview

avatar
tenor528
8 апреля 2018 в 02:56
0

Наряду с ответом @jatinder-kumar, ваш тег сценария jQuery не находится в теге <head>. Он полностью находится за пределами вашего HTML-документа. Если вы хотите это в голове, вы можете использовать его код, если вы переместите его вниз, до закрытия тега <body>, а другие ваши скрипты после него, вы можете избежать использования $(document).ready().