下のコードの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
textContentで試して、「エラーも起きないし、クリックイベントも起きな」いということを確認したうえで質問させていただきました。
具体的にどこが「丸投げ」なのでしょうか?
ご意見の意図がつかめません。よろしくお願いします。
私は低評価をしたわけではないですが、「調べたこと」が何も書かれてないというのがあるかと思います。
絶対的なキーワードが既にある状態なので検索したら何も見つからないというのはないと思います
「調べてから質問したに決まってる」と思うかもしれませんが、本当に何も調べず試さず質問する人も非常に多いので、質問内容に書かれていないことは基本的に拾うことはできません。(エスパーを強いることになります)
回答2件
あなたの回答
tips
プレビュー