jquery　text()関数を使って文字列の情報を取得されない

前提・実現したいこと

jqueryを使ってボタンを押すと<p>タグ内の文字が変更する　という実装をしたい。
その準備段階としてpタグ内のテキスト情報を取得しようとしている。

発生している問題・エラーメッセージ

text()関数を使って文字列の情報を取得、返ってくる状態にしたい。
alertで文字列”aaa”が表示される想定で実行しているが空白が返ってくる。
consoleでも空白が返ってくる

該当のソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body class="top">
  <table>
                                    <tbody>
                                    <tr>
                                        <th>XXXX</th>
                                        <td><div><p class="tameshi">aaa</p></div></td>
                                    </tr>
                                    </tbody>
</table>

 <div class="test_btn"><img src="img/others/test_btn_off.png"></div>

<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/jquery-ui.min.js"></script>
<script src="./js/jquery.easing.js"></script>
<script src="./js/script.js"></script>
</body>
</html>

 $(function(){
 $('.test_btn').on('click', function () {
            var test=$('p.tameshi').text();
            alert(test);
            console.log(test);
     });
 });

試したこと

console.log($('p.tameshi').text().length);

を実行したら０が返ってきました

kei344

2018/12/03 03:10

（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

m.ts10806

2018/12/03 03:30

.text()を使っているコードはどこに書いているんでしょうか。

行動規範の内容に同意します

回答2件

ご自身のjsはどこで呼んでいる（どこに書いている）のでしょうか？
普通に動くと思いますけど・・・

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2<script>
3$(function(){
4  $('.test_btn').on('click', function () {
5    var test=$('p.tameshi').text();
6    console.log(test);
7  });
8});
9</script>
10<table>
11<tbody>
12<tr>
13<th>XXXX</th>
14<td><div><p class="tameshi">aaa</p></div></td>
15</tr>
16</tbody>
17</table>
18<div class="test_btn">test</div>

投稿2018/12/03 03:13

yambejp

総合スコア114784

flower_tako

2018/12/03 04:21

jsの読み込み文も記入漏れしておりましたね。。。確認していたところ同じデザインの違うhtmlファイルを編集しておりました。初歩的な勘違いでみなさまのお手を煩わせてしまい申し訳ありませんでした...。迅速にご返答いただきありがとうございました。

行動規範の内容に同意します

ベストアンサー

これで試してみましたが動きますね

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title></title>
6<link rel="stylesheet" href="./css/style.css">
7</head>
8<body class="top">
9<table>
10<tbody>
11<tr>
12<th>XXXX</th>
13<td><div><p class="tameshi">aaa</p></div></td>
14</tr>
15</tbody>
16</table>
17
18<div class="test_btn"><img src="img/others/test_btn_off.png"></div>
19
20<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
21<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
22<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
23<script>
24$(function(){
25$('.test_btn').on('click', function () {
26var test=$('p.tameshi').text();
27alert(test);
28console.log(test);
29});
30});
31</script>
32</body>
33</html>