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

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

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

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

Q&A

解決済

2回答

1279閲覧

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

hgfgjjhg

総合スコア8

JavaScript

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

0グッド

1クリップ

投稿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

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>メモ帳</title> 7 <link rel="manifest" href="./manifest.json"> 8 <script> 9 // service workerが有効なら、service-worker.js を登録します 10 if ('serviceWorker' in navigator) { 11 navigator.serviceWorker.register('./sw.js').then(function() { console.log('Service Worker Registered'); }); 12 } 13 </script> 14 <style type="text/css"> 15 body{ 16 display: flex; 17 margin: 0px; 18 } 19 #leftBoard{ 20 width: 40vw; 21 height: 100vh; 22 color:#000; 23 background: #aaa; 24 } 25 #rightBoard{ 26 width: 60vw; 27 height: 100vh; 28 color: #000; 29 background: #cc0; 30 border: solid 1px; 31 } 32 #newCreate{ 33 display: block; 34 margin: auto; 35 } 36 #titleBox{ 37 border: solid 1px; 38 display: none; 39 } 40 #reserve{ 41 display: none; 42 } 43 #contextBox{ 44 width: 98%; 45 height: 90%; 46 margin-top: 10%; 47 border: solid 1px; 48 display:none; 49 } 50 #edit{ 51 display: inline; 52 margin: auto; 53 } 54 55 /* 56 div>.test{ 57 color: #ff0; 58 background: #00f; 59 padding: 20px; 60 border: solid 1px #0f0; 61 text-align: center; 62 } 63 64 */ 65 </style> 66 67 <script> 68 let title; 69 window.onload = function(){ 70 // const note = document.getElementById('note'); 71 // const memo = document.getElementById('memo'); 72 const newCreate = document.getElementById("newCreate"); 73 const titleBox = document.getElementById("titleBox"); 74 const contextBox = document.getElementById("contextBox"); 75 const reserve = document.getElementById("reserve"); 76 const note = document.getElementById("note"); 77 title = document.getElementById("title"); 78 const context = document.getElementById("context"); 79 const memo = document.getElementById("memo"); 80 const list = document.getElementById("list"); 81 numbering = 0; 82 content = []; 83 titleAry = []; 84 count = 0; 85 formatChange = function(mode){ 86 titleBox.style.display = mode; 87 reserve.style.display = mode; 88 contextBox.style.display = mode; 89 } 90 writing = function(a){ 91 memo.innerHTML += '<div style="display: flex;">' + '<div class="listTitle" data-inputId="'+ count +'">' + a + '</div>' + '<input class="edit" type="button" value="編集" data-inputId="'+count+'">' + '</div>'; 92 listTitle = document.getElementsByClassName("listTitle"); 93 for(let i = 0; i < numbering; i++){ 94 listTitle[i].addEventListener('click', function(){ 95 count = listTitle[i].getAttribute("data-inputId"); 96 title.innerText = titleAry[count]; 97 context.innerText = content[count]; 98 }); 99 }; 100 } 101 102 title.style.display = "block"; 103 context.style.display = "block"; 104 newCreatefx = function(){ 105 if(reserve.style.display != "block"){ 106 titleBox.value = ""; 107 contextBox.value = ""; 108 formatChange("block"); 109 title.style.display = "none"; 110 context.style.display = "none"; 111 count = numbering; 112 numbering++; 113 console.log("count:" + count + "numbering:" + numbering); 114 }; 115 } 116 reservefx = function(){ 117 let currentTitle = titleBox.value; 118 let currentContext = contextBox.value; 119 formatChange("none"); 120 title.innerText = currentTitle; 121 context.innerText = currentContext; 122 title.style.display = "block"; 123 context.style.display = "block"; 124 if(document.querySelectorAll("input[data-inputId='"+count+"']").length==0){ 125 writing(currentTitle); 126 edit = document.getElementsByClassName('edit'); 127 }else{ 128 listTitle = document.getElementsByClassName("listTitle"); 129 for(let i = 0; i < numbering; i++){ 130 listTitle[i].addEventListener('click', function(){ 131 count = listTitle[i].getAttribute("data-inputId"); 132 title.innerText = titleAry[count]; 133 context.innerText = content[count]; 134 }); 135 }; 136 // accessTitle = document.getElementById("listTitle" + count); 137 // accessTitle.innerHTML = currentTitle; 138 }; 139 titleAry[count] = titleBox.value; 140 content[count] = contextBox.value; 141 // let editAry = Array.prototype.slice.call(edit); 142 for(let i = 0; i < numbering; i++){ 143 edit[i].addEventListener('click', function(){ 144 count = edit[i].getAttribute("data-inputId"); 145 titleBox.value = titleAry[count]; 146 contextBox.value = content[count]; 147 formatChange("block"); 148 title.style.display = "none"; 149 context.style.display = "none"; 150 }); 151 }; 152 localStorage.setItem("numberingData", numbering); 153 // localStorage.setItem("countData", count); 154 titleReserve = titleAry.join(); 155 localStorage.setItem("titleData", titleReserve); 156 contentReserve = content.join(); 157 localStorage.setItem("contentData", contentReserve); 158 localStorage.setItem("memoData", memo.innerHTML); 159 } 160 161 if(window.localStorage){ 162 console.log("localStorage:ok"); 163 } 164 if(window.sessionStorage){ 165 console.log("sessionStorage:ok"); 166 } 167 console.log(localStorage.getItem("titleData")); 168 console.log(localStorage.getItem("contentData")); 169 console.log(localStorage.getItem("memoData")); 170 // console.log(localStorage.getItem("contentData")); 171 // console.log(localStorage.getItem("contentData")); 172 if(!localStorage.getItem("titleData")){ 173 titleReserve = ""; 174 }else{ 175 titleReserve = localStorage.getItem("titleData"); 176 } 177 if(!localStorage.getItem("contentData")){ 178 contentReserve = ""; 179 }else{ 180 contentReserve = localStorage.getItem("contentData"); 181 } 182 titleAry = titleReserve.split(","); 183 content = contentReserve.split(","); 184 memo.innerHTML = localStorage.getItem("memoData"); 185 edit = document.getElementsByClassName('edit'); 186 console.log(edit); 187 numbering = localStorage.getItem("numberingData"); 188 for(let i = 0; i < numbering; i++){ 189 edit[i].addEventListener('click', function(){ 190 count = edit[i].getAttribute("data-inputId"); 191 titleBox.value = titleAry[count]; 192 contextBox.value = content[count]; 193 formatChange("block"); 194 title.style.display = "none"; 195 context.style.display = "none"; 196 }); 197 }; 198 } 199 </script> 200</head> 201 202<body> 203 <div id="leftBoard"> 204 <div id="tool" style="display: flex"> 205 <input id="newCreate" type="button" value="新規作成" onclick=" 206 newCreatefx(); 207 "><input id="allDelete" type="button" value="全削除" onclick=" 208 numbering = 0; 209 title.innerHTML = ''; 210 context.innerText = ''; 211 titleAry = []; 212 content = []; 213 memo.innerHTML = ''; 214 localStorage.removeItem('numberingData'); 215 localStorage.removeItem('titleData'); 216 localStorage.removeItem('contentData'); 217 localStorage.removeItem('memoData'); 218 console.log(title); 219 "> 220 </div> 221 <div id="list"> 222 <div style="display: flex;"> 223 <div id="memo" style="background: #ff7f50;width:100%;"></div> 224 </div> 225 </div> 226 </div> 227 <div id="rightBoard"> 228 <div class="nextTo" style="display: flex;"> 229 <input id="titleBox" type="text"> 230 <input id="reserve" type="button" value="保存" onclick=" 231 reservefx(); 232 "> 233 </div> 234 <textarea id="contextBox"></textarea> 235 <div id="note"> 236 <div id="title" style="background: #b0d4de"></div> 237 <div id="context"></div> 238 </div> 239 </div> 240<!-- 241 <div id="set01"> 242 <input type="text" id="note"> 243 <input type="button" value="保存" id="reserve01" 244 onclick=" 245 let current = note.value; 246 memo.innerText = current; 247 memo.insertAdjacentHTML('afterend', '<div id=&quot;memo02&quot;></div>'); 248 "> 249 <input type="button" value="削除" id="delete01" 250 onclick=" 251 let setDelete = this.parentNode.parentNode; 252 setDelete.removeChild(set01); 253 "> 254 <div id="memo"></div> 255 </div> 256--> 257 <!-- <div><div class="test"></div></div> --> 258</body> 259</html>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/04/16 09:20

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

2019/04/16 09:40

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

回答2

0

ベストアンサー

title 要素は以下で取得できます。

JavaScript

1document.querySelector('title')

onclick内で単にtitleと書けばtitleプロパティが参照されます。

また、title要素はテキストしか入れられないため、divなどは入りません。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/title

投稿2019/04/16 09:23

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hgfgjjhg

2019/04/16 09:37

誤解を生む書き方をしてしまい申し訳ありません。 title要素を取得したいのではなく、<div id="title">を取得したいのです。 77行目でtitle=document.getElementById('title'); としており、このtitleという名前の変数に入れたdiv要素に対して操作しようとしています。
hgfgjjhg

2019/04/16 09:53

onclick内でtitleとするとthis.titleと同義になるんですね! ありがとうございます。
guest

0

titleという予約語をつかってるからでしょうね

  • NG

javascript

1<script> 2var title; 3window.onload = function(){ 4 title = document.getElementById("title"); 5} 6</script> 7<input id="allDelete" type="button" value="全削除" onclick="console.log(title);"> 8<div id="title" style="background: #b0d4de"></div>
  • OK

javascript

1<script> 2var title2; 3window.onload = function(){ 4 title2 = document.getElementById("title"); 5} 6</script> 7<input id="allDelete" type="button" value="全削除" onclick="console.log(title2);"> 8<div id="title" style="background: #b0d4de"></div>

投稿2019/04/16 10:09

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問