リンク付きの画像をクリックすると、表示文字が変わる

<?php
$filename1 = 'dir+ファイル名';
if (file_exists($filename1)):
?>
<a id="link01" href="リンク先のファイル名"><img src="***.png"></a>
<?php else: ?>
<p>~~~</p>
<?php endif; ?>
｜
｜
｜
<p id="text01">未完了</p>
<script>
$(function() {
$('#link01').click(function() {
$('#text01').text("完了");
});
});
</script>

リンク付きの画像がありまして、それをクリックすると、それまで「未完了」と表示されていた文字が、「完了」になるように書いたつもりですが、表示が変更されません。
何か足りない？そもそもコードが間違っている？
どなたかご指南のほどよろしくお願いいたします。

No.2 回答者： fujillin 回答日時： 2021/06/24 23:20

No1です。

＞「ちゃんと事前にライブラリ等を読み込んでいますか？」とは、
＞具体的にはどのようなものでしょうか。

質問文にご提示のスクリプトは素のスクリプトではないので、それだけだと単独では動作せずにエラーにます。
結果的に、何も処理はしません。
想像するところ、jQueryか何かのライブラリを利用しているものと推測しますけれど、ご提示のコードにはそれを読み込んでいる様子がなかったので、「念のため」に確認してみただけです。
（当たり前なので、省略しているのかとも想像しましたけれど…）
上記でもわからない場合は、ご提示のスクリプトのコピー元をじっくりとご確認なさってみてください。
説明がどこかに書いてあるはずと思いますので。


＞リンク先のファイルをダウンロードします。
＞これについては動作確認できています。
DLなのかもとは思いましたが、一般的にはリンクタグは他ページへのリンクなので、クリック時の普通の動作はページ遷移です。
ページ遷移の場合は、元のページを書き直しても意味がないので・・・
こちらは、どうやら杞憂だったようですね。

この回答へのお礼

ご教授いただきましたように、もう一度参照したところや、別のサイトを調べて、次のライブラリを追加しましたところ、表示文字が目的のとおり変更になりました。

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></s …

大変勉強になりました。
ありがとうございました。

お礼日時：2021/06/25 11:26

No.1 回答者： fujillin 回答日時： 2021/06/24 16:30

こんにちは

スクリプト部分が、
＞$(function() {～～
となっていますけれど、ちゃんと事前にライブラリ等を読み込んでいますか？

提示内には見当たらないので、念のため。
（ご提示の程度の処理なら、素のスクリプトでもさほど面倒ではないと思いますけれど）

リンクタグのクリック処理だと、遷移しちゃったりしないのかも疑問ですけれど・・・

この回答へのお礼

ご回答ありがとうございます。
何分初心者なので、初歩の初歩からお尋ねすることになります。

もう一度ご説明しますと、
リンク付きの画像をクリックすると、リンク先のファイルをダウンロードします。これについては動作確認できています。
画像をクリックと同時に、「未完了」と表示していたのを「完了」と変更表示できるようなコードにしたいのですが、ご教示いただいた「ちゃんと事前にライブラリ等を読み込んでいますか？」とは、具体的にはどのようなものでしょうか。

お礼日時：2021/06/24 22:46