HTML/JavaScriptの部分一致検索
関連タイピング
-
５分間の速度部門の模擬試験です。打つ速度で級が決まります
プレイ回数77万長文300秒 -
何秒で全部打てるか挑戦してみよう！
プレイ回数391万短文かな298打 -
速ければ速いほど強い世界
プレイ回数761万短文かな87打 -
祇園精舎
プレイ回数2.6万長文かな779打 -
プレイ回数2118長文2291打 -
πを覚えよう
プレイ回数7.3万短文数字101打 -
ビジネスメールでよく使われる文章です！
プレイ回数168万長文かな60秒 -
ちょっと難しいIT用語のタイピングです
プレイ回数2.1万90秒
問題文
(＜ｂｏｄｙ＞)
<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>