質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.59%

二度目に訪れたときにはメモが出てこない

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 629

score 5

前提・実現したいこと

Chrome拡張機能でメモ機能を作ろうと思っています!

しかし一度メモを使ったページでは、リロードしたり再訪したときにメモが出てこなくなります。

const save = (content) => {//save(textbox.value)
  chrome.runtime.sendMessage(content, res => {
      console.log(res);
  });
};
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  const modalfrm = document.getElementById('ex-memo');
  if (modalfrm != null) return;
  const modal = document.createElement('div');
  modal.id = 'ex-memo';
  modal.style.zIndex = '2147483647';
  modal.style.position = 'fixed';
  modal.style.left = `${message.posX}px`;
  modal.style.top = `${message.posY}px`;
  console.log("modal.style.left:" + modal.style.left);
  console.log("modal.style.top:" + modal.style.top);
  console.log("modal.style.width:" + modal.style.width);
  console.log("modal.style.height:" + modal.style.height);
  const textbox = document.createElement('textarea');
  textbox.style.width = '600px';
  textbox.style.height = '200px';
  textbox.style.backgroundColor = 'rgb(67, 67, 67)';
  textbox.style.color = 'rgb(51, 166, 184)';
  textbox.value= message.content;
  modal.appendChild(textbox);
  const saveButton = document.createElement('button');
  saveButton.onclick = () => save(textbox.value);
  saveButton.innerText = '保存';
  modal.appendChild(saveButton);
  document.body.appendChild(modal);
  console.log("function");
  modal.addEventListener('mousedown', mdown);
  modal.addEventListener('touchstart', mdown);
  // "マウスが押された際の関数"
  function mdown(e){
      console.log("mdown");
      this.classList.add("drag");
      //タッチドイベントとマウスのイベントの差異を吸収
      if(e.type === "mousedown") {
          var event = e;
      } else {
          var event = e.changedTouches[0];
      }
      //要素内の相対座標を取得
      posX = event.pageX - this.offsetLeft;
      posY = event.pageY - this.offsetTop;
      //ムーブイベントにコールバック
      document.body.addEventListener("mousemove", mmove);
      document.body.addEventListener("touchmove", mmove);
  }
  // "マウスカーソルが動いたときに発火"
  function mmove(e){
      console.log("mmove");
      //ドラッグしている要素を取得
     var drag = document.getElementsByClassName("drag")[0];
      //同様にマウスとタッチの差異を吸収
      if(e.type === "mousemove") {
          var event = e;
      } else {
          var event = e.changedTouches[0];
      }
      //フリックしたときに画面を動かさないようにデフォルト動作を抑制
      e.preventDefault();
      //マウスが動いた場所に要素を動かす
      drag.style.top = event.pageY - posY + "px";
      drag.style.left = event.pageX - posX + "px";
      //マウスボタンが離されたとき、またはカーソルが外れたとき発火
      drag.addEventListener("mouseup", mup);
      document.body.addEventListener("mouseleave", mup);
      drag.addEventListener("touchend", mup);
      document.body.addEventListener("touchleave", mup);

      // "マウスボタンが上がったら発火"
      function mup(e){
       console.log("mup");
       var drag = document.getElementsByClassName("drag")[0];
       //ムーブベントハンドラの消去
       document.body.removeEventListener("mousemove", mmove);
       drag.removeEventListener("mouseup", mup);
       document.body.removeEventListener("touchmove", mmove);
       drag.removeEventListener("touchend", mup);
       //クラス名 .drag も消す
       drag.classList.remove("drag");
      }
  }
});

エラー

カッコを入れて数えて下から8番目の「drag.removeEventListener("mouseup", mup);」でエラーになっています

Uncaught TypeError: Cannot read property ‘removeEventListener’ of undefined
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る