Q&A
textContentで試して、「エラーも起きないし、クリックイベントも起きな」いということを確認したうえで質問させていただきました。
具体的にどこが「丸投げ」なのでしょうか？
ご意見の意図がつかめません。よろしくお願いします。
下のコードの100行目の
result.value = pwd;
とあるのですが、なぜtextContentでは、エラーも起きないし、クリックイベントも起きなくなるのか、理解できません。
よろしくお願いします。
HTML
1 <!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Password Generator</title> 6 <style> 7 body { 8 background: #e0e0e0; 9 font-family: 'Courier New', sans-serif; 10 text-align: center; 11 } 12 .container { 13 width: 320px; 14 margin: 30px auto; 15 } 16 fieldset { 17 margin-top: 40px; 18 border: 1px dashed #aaa; 19 border-radius: 5px; 20 text-align: left; 21 } 22 legend { 23 font-weight: bold; 24 padding: 0 10px; 25 } 26 27 fieldset p { 28 text-align: center; 29 } 30 31 input[type="text"] { 32 width: 300px; 33 padding: 7px; 34 border-radius: 3px; 35 font-size: 24px; 36 font-family: 'Courier New', sans-serif; 37 text-align: center; 38 } 39 #btn { 40 background: #00aaff; 41 color: #fff; 42 padding: 7px; 43 border-radius: 5px; 44 box-shadow: 0 4px 0 #0088cc; 45 cursor: pointer; 46 margin-bottom: 10px; 47 } 48 #btn:hover { 49 opacity: 0.8; 50 } 51 </style> 52 </head> 53 <body> 54 <div class="container"> 55 <p><input type="text" id="result"></p> 56 <div id="btn">Generate Password</div> 57 <fieldset> 58 <legend>Options</legend> 59 <p>Length: (<span id="label">8</span>): <input type="range" id="slider" value="8" min="4" max="20"></p> 60 <p> 61 Numbers?: <input type="checkbox" id="numbers"> 62 Symbols?: <input type="checkbox" id="symbols"> 63 </p> 64 </fieldset> 65 </div> 66 <script> 67 (function() { 68 'use strict'; 69 70 var slider = document.getElementById('slider'); 71 var label = document.getElementById('label'); 72 var btn = document.getElementById('btn'); 73 var result = document.getElementById('result'); 74 var numbers = document.getElementById('numbers'); 75 var symbols = document.getElementById('symbols'); 76 77 function getPassword() { 78 var seed_letters = 'abcdefghijklmnopqrstuvwxyz'; 79 var seed_numbers = '0123456789'; 80 var seed_symbols = '!#$%&'; 81 var len = slider.value; 82 var pwd = ''; 83 var seed; 84 85 seed = seed_letters + seed_letters.toUpperCase(); 86 if (numbers.checked) { 87 seed += seed_numbers; 88 } 89 if (symbols.checked === true) { 90 seed += seed_symbols; 91 } 92 93 94 95 96 97 for (var i = 0; i < len; i++) { 98 pwd += seed[Math.floor(Math.random() * seed.length)]; 99 } 100 result.value = pwd; 101 } 102 103 slider.addEventListener('change', function() { 104 label.innerHTML = this.value; 105 }); 106 107 btn.addEventListener('click', function() { 108 getPassword(); 109 }); 110 111 result.addEventListener('click', function() { 112 this.select(); 113 }); 114 115 getPassword(); 116 117 })(); 118 </script> 119 </body> 120 </html> 121
私は低評価をしたわけではないですが、「調べたこと」が何も書かれてないというのがあるかと思います。
絶対的なキーワードが既にある状態なので検索したら何も見つからないというのはないと思います
「調べてから質問したに決まってる」と思うかもしれませんが、本当に何も調べず試さず質問する人も非常に多いので、質問内容に書かれていないことは基本的に拾うことはできません。(エスパーを強いることになります)
回答2件
0
ベストアンサー
textContent
変数 result の親ノードをコンソール出力すると、
JavaScript
1function getPassword() { 2 // 中略 3 4 console.log(result.parentNode); 5 result.textContent = pwd; 6}
次のノードが生成されている事が分かります。
HTML
1<p><input type="text" id="result">YHtizySY</input></p>
textContent プロパティは「子孫テキストノード値を文字列結合した値」を返します。
input要素は空要素なので、本来、子孫ノードを持ちませんが、textContent で子のテキストノードを持ってしまった為にこのような状態になりました。
調べ方
次のアプローチで調べると、自分でも具体的な情報に辿り着けるようになると思います。
- ブラウザの開発者ツールでDOMツリーを確認する
- textContent がDOMの何を変更しているのかを調べる
valueプロパティがDOMの何を変更しているのかを調べる
Re: neginattofan さん
投稿2019/07/14 03:45
編集2019/07/16 12:33
総合スコア18164
回答ありがとうございます。実際に確認して、良く理解できました。
これからはDOMツリーで自分で調べることもやっていきたいと思います。
> 次のノードが生成されている事が分かります。
> <input type="text" id="result">
これは何かの反映漏れでしょうか？
To: x_x さん
result.outerHTML を使用すると、「空要素としての文字列」を出力するようなので、親ノードを出力するよう親記事を修正しました。
ご指摘ありがとうございました。
0
textContentは、要素の子孫に当たるテキストを返します（MDN）。
html
1<p>子ノードや<em>孫ノード</em>として含まれるテキスト</p>
一方で、<input />は空要素であり、子孫はないのでtextContentでは扱えません。
投稿2019/07/14 03:33
総合スコア145184
あなたの回答
tips
プレビュー
