HTML/JavaScriptの部分一致検索
chatGPTに作らせた部分一致検索サイトです。
body部分のみ抽出して載せています。そのままテキストファイルに張り付けると実行できるはずです。苦行です...
関連タイピング
-
これで元素を覚えるのにも使ってやってください
プレイ回数109 短文かな358打 -
夏目漱石
プレイ回数1.8万 長文かな1454打 -
夏は虫たちの季節ですね！というわけで昆虫打！！
プレイ回数6.9万 短文かな60秒 -
夏目漱石
プレイ回数17万 長文かな512打 -
何秒で全部打てるか挑戦してみよう！
プレイ回数440万 短文かな298打 -
タイピングの練習で自ずと般若心経を覚えてしまう近年稀に見る神ゲー
プレイ回数15万 かな762打 -
速ければ速いほど強い世界
プレイ回数795万 短文かな87打 -
５分間の速度部門の模擬試験です。打つ速度で級が決まります
プレイ回数94万 長文300秒
問題文
ふりがな非表示
ふりがな表示
(＜ｂｏｄｙ＞)
<body>
(＜ｈ１＞ぶぶんいっちけんさくさいと さんぷる＜／ｈ１＞)
<h1>部分一致検索サイト サンプル</h1>
(＜ｌａｂｅｌ ｆｏｒ＝”ｓｅａｒｃｈ”＞けんさく：＜／ｌａｂｅｌ＞)
<label for="search">検索:</label>
(＜ｉｎｐｕｔ ｔｙｐｅ＝”ｔｅｘｔ” ｉｄ＝”ｓｅａｒｃｈ” ｎａｍｅ＝)
<input type="text" id="search" name=
(”ｓｅａｒｃｈ” ｏｎｋｅｙｕｐ＝”ｓｅａｒｃｈｉｍａｇｅｓ（）”)
"search" onkeyup="searchImages()"
(ｐｌａｃｅｈｏｌｄｅｒ＝”ぶぶんいっちけんさく”＞)
placeholder="部分一致検索">
(＜／ｄｉｖ＞)
</div>
(＜ｄｉｖ ｃｌａｓｓ＝”ｃｏｎｔａｉｎｅｒ”＞)
<div class="container">
(＜ａ ｈｒｅｆ＝”＃”＞１１１１＜ｉｍｇ ｓｒｃ＝”ｉｍｇ１．ｊｐｇ”)
<a href="#">1111<img src="img1.jpg"
(ａｌｔ＝”がぞう５”＞＜／ａ＞)
alt="画像5"></a>
(＜／ｄｉｖ＞)
</div>
(＜ｓｃｒｉｐｔ＞)
<script>
(ｆｕｎｃｔｉｏｎ ｓｅａｒｃｈｉｍａｇｅｓ（） ｛)
function searchImages() {
(ｌｅｔ ｉｎｐｕｔ ＝ ｄｏｃｕｍｅｎｔ．ｇｅｔｅｌｅｍｅｎｔｂｙｉｄ（)
let input = document.getElementById(
(”ｓｅａｒｃｈ”）．ｖａｌｕｅ；)
"search").value;
(ｌｅｔ ｉｍａｇｅｓ ＝)
let images =
(ｄｏｃｕｍｅｎｔ．ｇｅｔｅｌｅｍｅｎｔｓｂｙｔａｇｎａｍｅ（”ｉｍｇ”）)
document.getElementsByTagName("img")
(；)
;
(ｆｏｒ （ｌｅｔ ｉ ＝ ０； ｉ ＜ ｉｍａｇｅｓ．ｌｅｎｇｔｈ；)
for (let i = 0; i < images.length;
(ｉ＋＋） ｛)
i++) {
など
(ｉｆ （ｉｍａｇｅｓ［ｉ］．ａｌｔ．ｉｎｃｌｕｄｅｓ（ｉｎｐｕｔ）） ｛)
if (images[i].alt.includes(input)) {
(ｉｍａｇｅｓ［ｉ］．ｐａｒｅｎｔｎｏｄｅ．ｓｔｙｌｅ．ｄｉｓｐｌａｙ ＝)
images[i].parentNode.style.display =
(”ｂｌｏｃｋ”；)
"block";
(｝ ｅｌｓｅ ｛)
} else {
(ｉｍａｇｅｓ［ｉ］．ｐａｒｅｎｔｎｏｄｅ．ｓｔｙｌｅ．ｄｉｓｐｌａｙ ＝)
images[i].parentNode.style.display =
(｝｝｝)
}}}
(＜／ｓｃｒｉｐｔ＞)
</script>
(＜／ｂｏｄｙ＞)
</body>