Q&A
開発ツールを見ればなにかエラーが出ているのでは？
実現したいこと
htmlで作成したjsコードをブックマークレットとして使用する
◆やりたいこと
下記ブックマークレット用ソースをブクマに登録→適当なHPを開く→ブックマークレット押下時にタグ名の書かれたボタンが出現→押下でページ内の同じタグのbgの色が変わる
前提
発生している問題・エラーメッセージ
上記「◆やりたいこと」の「ブックマークレット押下時にタグ名の書かれたボタンが出現」までは動作するが、それ以降が動作しない
該当のソースコード
js
1//★★★★ブックマーク用に下のhtmlから一部のソースをコピペしたもの（ボタンは出るが、押下で色は変わらず）★★★★ 2javascript:var addCodes='<div id="bookmarklet">'+'<div id="bookmarklet_inner">'+'<button value="h1">h1</button>'+'<button value="h2">h2</button>'+'<button value="h3">h3</button>'+'<button value="p">p</button>'+'<button value="div">div</button>'+'</div>'+'</div>';var body=document.getElementsByTagName('body');body[0].insertAdjacentHTML('afterend',addCodes);var css='#bookmarklet {'+'display: flex;'+'justify-content: center;'+'align-items: baseline;'+'width: 100%;'+'height: 100%;'+'position: fixed;'+'top: 0;'+'left: 0;'+'z-index: 999;'+'background-color: rgba(128,128,128,0.7)!important;'+'}'+'#bookmarklet_inner {'+'max-width: 300px;'+'width: 100%;'+'background-color: #ffffff!important;'+'padding: 10px;'+'}';var tagStyle=document.createElement('style');tagStyle.innerHTML=css;document.getElementsByTagName('head')[0].appendChild(tagStyle);document.addEventListener('DOMContentLoaded',function(){var button=document.querySelectorAll("#bookmarklet_inner > button");for(var i=0;i<button.length;i++){button[i].addEventListener('click',function(){var tag=this.value;var body=document.querySelector("body");var catchtags=document.querySelectorAll(tag);for(var j=0;j<catchtags.length;j++){catchtags[j].style.backgroundColor="#f4e321"}},false)}}); 3 4//★★★★動作確認用html（動作確認済み）★★★★ 5<!DOCTYPE html> 6<html> 7 8<head> 9 <meta charset="UTF-8" /> 10 <title>開発用</title> 11</head> 12 13<body> 14 15 <h1>h1</h1><br> 16 <h1>h1_2</h1><br> 17 <h1>h1_3</h1><br> 18 <h2>h2</h2><br> 19 <h3>h3</h3><br> 20 <p>p</p><br> 21 <div>div</div> 22 23<script> 24// html設置 25 var addCodes = '<div id="bookmarklet">' + '<div id="bookmarklet_inner">' +'<button value="h1">h1</button>' + '<button value="h2">h2</button>' + '<button value="h3">h3</button>' + '<button value="p">p</button>' + '<button value="div">div</button>' + '</div>' + '</div>'; 26 var body = document.getElementsByTagName('body'); 27 body[0].insertAdjacentHTML('afterend', addCodes); 28// css設置 29 var css = '#bookmarklet {' + 'display: flex;' + 'justify-content: center;' + 'align-items: baseline;' + 'width: 100%;' + 'height: 100%;' + 'position: fixed;' + 'top: 0;' + 'left: 0;' + 'z-index: 999;' + 'background-color: rgba(128,128,128,0.7)!important;' + '}' + '#bookmarklet_inner {' + 'max-width: 300px;' + 'width: 100%;' + 'background-color: #ffffff!important;' + 'padding: 10px;' + '}'; 30 var tagStyle = document.createElement('style'); 31 tagStyle.innerHTML = css; 32 document.getElementsByTagName('head')[0].appendChild(tagStyle); 33 34// ボタンクリックで背景色変更 35document.addEventListener('DOMContentLoaded',function(){ 36 var button = document.querySelectorAll("#bookmarklet_inner > button"); 37 for(var i = 0; i < button.length; i++){ 38 button[i].addEventListener('click',function(){ 39 var tag = this.value; 40 var body = document.querySelector("body"); 41 var catchtags = document.querySelectorAll(tag); 42 for(var j = 0; j < catchtags.length; j++){ 43 catchtags[j].style.backgroundColor = "#f4e321"; 44 } 45 },false); 46 } 47}); 48</script> 49 50</body> 51</html>
試したこと
htmlから該当ソースをコピペ。
補足情報（FW/ツールのバージョンなど）
htmlにて作成したjsサンプルをブックマークレットで動かそうとした際にうまく動きません。
ご助言いただけますと嬉しいです。
どうぞよろしくお願いいたします。
回答1件
0
ベストアンサー
click イベントを登録するタイミングが DOMContentLoaded になっているからだと思います。
（ブックマークレットの場合はDOMContentLoadedの後にスクリプトが実行される）
外側の
js
1document.addEventListener('DOMContentLoaded',function(){ 2});
を消して、グローバルスコープに
js
1// ボタンクリックで背景色変更 2var button = document.querySelectorAll("#bookmarklet_inner > button"); 3for(var i = 0; i < button.length; i++){ 4 button[i].addEventListener('click',function(){ 5 var tag = this.value; 6 var catchtags = document.querySelectorAll(tag); 7 for(var j = 0; j < catchtags.length; j++){ 8 catchtags[j].style.backgroundColor = "#f4e321"; 9 } 10 },false); 11}
と直接書けば動くと思います。
--
（おまけ）
全体を無名の即時関数で囲うとグローバルスコープの汚染が無くなるので更にグッドです。
js
1(function () { 2 // ここにブックマークレットを書く 3}());
投稿2023/05/23 08:12
総合スコア1676
あなたの回答
tips
プレビュー
