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

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

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

jsで変数がonclick内で見れない(初歩的な質問です)

hgfgjjhg
hgfgjjhg

総合スコア8

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0評価

1クリップ

1077閲覧

投稿2019/04/16 09:11

編集2019/04/16 09:38

冒頭のonloadでtitle変数にidがtitleのdiv要素を入れています。
しかし、新規作成ボタン→タイトル本文入力→保存ボタン→全削除と操作すると、207行目からのonclick内で、title要素が空になっているようで、titleに入れた要素を操作できません。
alert(title)としてみても真っ白なアラートボックスが表示されるだけです。
おそらくスコープ?のせいかとも考えたのですが、何度調べてみてもよくわかりませんでした。
onclick内でtitle内にtitleのdiv要素が入っていない原因を教えていただけますでしょうか?
よろしくお願いいたします。

実行環境は最新版のchromeです。

javascript

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>メモ帳</title> <link rel="manifest" href="./manifest.json"> <script> // service workerが有効なら、service-worker.js を登録します if ('serviceWorker' in navigator) { navigator.serviceWorker.register('./sw.js').then(function() { console.log('Service Worker Registered'); }); } </script> <style type="text/css"> body{ display: flex; margin: 0px; } #leftBoard{ width: 40vw; height: 100vh; color:#000; background: #aaa; } #rightBoard{ width: 60vw; height: 100vh; color: #000; background: #cc0; border: solid 1px; } #newCreate{ display: block; margin: auto; } #titleBox{ border: solid 1px; display: none; } #reserve{ display: none; } #contextBox{ width: 98%; height: 90%; margin-top: 10%; border: solid 1px; display:none; } #edit{ display: inline; margin: auto; } /* div>.test{ color: #ff0; background: #00f; padding: 20px; border: solid 1px #0f0; text-align: center; } */ </style> <script> let title; window.onload = function(){ // const note = document.getElementById('note'); // const memo = document.getElementById('memo'); const newCreate = document.getElementById("newCreate"); const titleBox = document.getElementById("titleBox"); const contextBox = document.getElementById("contextBox"); const reserve = document.getElementById("reserve"); const note = document.getElementById("note"); title = document.getElementById("title"); const context = document.getElementById("context"); const memo = document.getElementById("memo"); const list = document.getElementById("list"); numbering = 0; content = []; titleAry = []; count = 0; formatChange = function(mode){ titleBox.style.display = mode; reserve.style.display = mode; contextBox.style.display = mode; } writing = function(a){ memo.innerHTML += '<div style="display: flex;">' + '<div class="listTitle" data-inputId="'+ count +'">' + a + '</div>' + '<input class="edit" type="button" value="編集" data-inputId="'+count+'">' + '</div>'; listTitle = document.getElementsByClassName("listTitle"); for(let i = 0; i < numbering; i++){ listTitle[i].addEventListener('click', function(){ count = listTitle[i].getAttribute("data-inputId"); title.innerText = titleAry[count]; context.innerText = content[count]; }); }; } title.style.display = "block"; context.style.display = "block"; newCreatefx = function(){ if(reserve.style.display != "block"){ titleBox.value = ""; contextBox.value = ""; formatChange("block"); title.style.display = "none"; context.style.display = "none"; count = numbering; numbering++; console.log("count:" + count + "numbering:" + numbering); }; } reservefx = function(){ let currentTitle = titleBox.value; let currentContext = contextBox.value; formatChange("none"); title.innerText = currentTitle; context.innerText = currentContext; title.style.display = "block"; context.style.display = "block"; if(document.querySelectorAll("input[data-inputId='"+count+"']").length==0){ writing(currentTitle); edit = document.getElementsByClassName('edit'); }else{ listTitle = document.getElementsByClassName("listTitle"); for(let i = 0; i < numbering; i++){ listTitle[i].addEventListener('click', function(){ count = listTitle[i].getAttribute("data-inputId"); title.innerText = titleAry[count]; context.innerText = content[count]; }); }; // accessTitle = document.getElementById("listTitle" + count); // accessTitle.innerHTML = currentTitle; }; titleAry[count] = titleBox.value; content[count] = contextBox.value; // let editAry = Array.prototype.slice.call(edit); for(let i = 0; i < numbering; i++){ edit[i].addEventListener('click', function(){ count = edit[i].getAttribute("data-inputId"); titleBox.value = titleAry[count]; contextBox.value = content[count]; formatChange("block"); title.style.display = "none"; context.style.display = "none"; }); }; localStorage.setItem("numberingData", numbering); // localStorage.setItem("countData", count); titleReserve = titleAry.join(); localStorage.setItem("titleData", titleReserve); contentReserve = content.join(); localStorage.setItem("contentData", contentReserve); localStorage.setItem("memoData", memo.innerHTML); } if(window.localStorage){ console.log("localStorage:ok"); } if(window.sessionStorage){ console.log("sessionStorage:ok"); } console.log(localStorage.getItem("titleData")); console.log(localStorage.getItem("contentData")); console.log(localStorage.getItem("memoData")); // console.log(localStorage.getItem("contentData")); // console.log(localStorage.getItem("contentData")); if(!localStorage.getItem("titleData")){ titleReserve = ""; }else{ titleReserve = localStorage.getItem("titleData"); } if(!localStorage.getItem("contentData")){ contentReserve = ""; }else{ contentReserve = localStorage.getItem("contentData"); } titleAry = titleReserve.split(","); content = contentReserve.split(","); memo.innerHTML = localStorage.getItem("memoData"); edit = document.getElementsByClassName('edit'); console.log(edit); numbering = localStorage.getItem("numberingData"); for(let i = 0; i < numbering; i++){ edit[i].addEventListener('click', function(){ count = edit[i].getAttribute("data-inputId"); titleBox.value = titleAry[count]; contextBox.value = content[count]; formatChange("block"); title.style.display = "none"; context.style.display = "none"; }); }; } </script> </head> <body> <div id="leftBoard"> <div id="tool" style="display: flex"> <input id="newCreate" type="button" value="新規作成" onclick=" newCreatefx(); "><input id="allDelete" type="button" value="全削除" onclick=" numbering = 0; title.innerHTML = ''; context.innerText = ''; titleAry = []; content = []; memo.innerHTML = ''; localStorage.removeItem('numberingData'); localStorage.removeItem('titleData'); localStorage.removeItem('contentData'); localStorage.removeItem('memoData'); console.log(title); "> </div> <div id="list"> <div style="display: flex;"> <div id="memo" style="background: #ff7f50;width:100%;"></div> </div> </div> </div> <div id="rightBoard"> <div class="nextTo" style="display: flex;"> <input id="titleBox" type="text"> <input id="reserve" type="button" value="保存" onclick=" reservefx(); "> </div> <textarea id="contextBox"></textarea> <div id="note"> <div id="title" style="background: #b0d4de"></div> <div id="context"></div> </div> </div> <!-- <div id="set01"> <input type="text" id="note"> <input type="button" value="保存" id="reserve01" onclick=" let current = note.value; memo.innerText = current; memo.insertAdjacentHTML('afterend', '<div id=&quot;memo02&quot;></div>'); "> <input type="button" value="削除" id="delete01" onclick=" let setDelete = this.parentNode.parentNode; setDelete.removeChild(set01); "> <div id="memo"></div> </div> --> <!-- <div><div class="test"></div></div> --> </body> </html>

良い質問の評価を上げる

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

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

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

気になる質問をクリップする

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

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

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

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

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

m.ts10806

2019/04/16 09:20

「(初歩的な質問です)」とつけるのではなく「初心者アイコン」をつけてください。 あと、コードをべたっと張り付けての質問は良いのですが、自身が試す、調べる際は現象が再現する最小限のコードを試して検証してください。問題の切り分けの仕方が良くないと質問してもなかなか的確なアドバイスにはなりません。 ※質問者さん以外は質問コードは基本的に初見です。そのあたりは考慮いただきたく
hgfgjjhg

2019/04/16 09:40

アドバイスありがとうございます。 初心者アイコンをつけるように修正いたしました。 コードの切り分けについては、これから練習していきます。

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

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。