Q&A
前提
Chrome拡張機能でマウスカーソルの位置を表示するようにJavaScriptで作っています
実現したいこと
720×480pxのポップアップにマウスカーソルの座標を数値で表示、更新し続ける
発生している問題・エラーメッセージ
ポップアップに触れた一回目だけの座標が表示され、更新されない
該当のソースコード
JavaScript
1main.js 2let x = 0, 3 y = 0; 4 5window.addEventListener('mousemove', mouse); 6function mouse(e) { 7 x = e.clientX; 8 y = e.clientY; 9 document.write(x,y); 10}
html
1index.html 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 </head> 6 <body> 7 <style> 8 body 9 { 10 width: 720px; 11 height: 480px; 12 } 13 </style> 14 <script src= "main.js"></script> 15 </body> 16</html>
json
1manifest.json 2{ 3 "name": "chrome extension test", 4 "version": "1.0", 5 "manifest_version": 3, 6 "description": "test", 7 "icons": 8 { 9 "128": "128.png" 10 }, 11 "action": 12 { 13 "default_icon": "128.png", 14 "default_title": "Click here", 15 "default_popup": "index.html" 16 } 17}
試したこと
ループ処理を入れてみたりしましたが変わりませんでした
Chromeのコンソールではうまくいったのでポップアップでは処理は一度きりなのかなと困っています
補足情報（FW/ツールのバージョンなど）
回答1件
0
ベストアンサー
document.writeは非推奨なので以下のように変更します。
javascript
1//document.write(x, y); 2 document.getElementById("coordinate").innerText = x + "," + y;
htmlには以下を追加します。
html
1<div id="coordinate"></div>
投稿2023/01/24 00:06
編集2023/01/24 00:07
総合スコア52
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/01/24 01:05