Q&A
```言語名
//ここにコード
```
です。少し ``` が多いのでは
調整してください。
Javaspric
1``````(function(){ 2 'use strict'; 3 var btn = document.getElementById('btn'); 4 btn.addEventListener('click', function(){ 5 var n = Math.random(); 6 if(n < 0.9){ 7 this.textContent = 'あ'; 8 } 9 else if (n < 0.9){ 10 this.textContent = 'い'; 11 } 12 else if (n < 0.9){ 13 this.textContent = 'う'; 14 } 15 else if (n < 0.9){ 16 this.textContent = 'え'; 17 } 18 else if (n < 0.9){ 19 this.textContent = 'お'; 20 } 21 else if (n < 0.9){ 22 this.textContent = 'か'; 23 } 24 else if (n < 0.9){ 25 this.textContent = 'き'; 26 } 27 else if (n < 0.9){ 28 this.textContent = 'く'; 29 } 30 else if (n < 0.9{ 31 this.textContent = 'け'; 32 }else{ 33 this.textContent = 'こ'; 34 } 35 }); 36 btn.addEventListener('mousedown', function(){ 37 this.className = 'pushed'; 38 }); 39 btn.addEventListener('mouseup', function(){ 40 this.className = ''; 41 }); 42})(); 43コード 44
```html <html lang="ja"> <head> <meta charset="utf-8"> <title>おみくじ</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id = "btn">push!</div> <script src=random.js></script> </body> </html>ここに言語を入力 コード
エラーが出てしまってます
イメージとしてはプッシュを押すとアからコをランダムで出したいです
random.js:5 Uncaught TypeError: Cannot read property 'addEventListener' of null
at random.js:5
at Object../app/javascript/random.js (random.js:49)
at webpack_require (bootstrap:19)
at Object../app/javascript/packs/application.js (application.js:10)
at webpack_require (bootstrap:19)
at bootstrap:83
at bootstrap:83
あと、このコードではaddEventListener以前のエラーがでます。
Uncaught SyntaxError: Unexpected token '{'
コードはコピペされてますか？
そしてそこを修正するとエラーは出ず「あ」だけが出るプログラムになります。ifの条件が同じだからですね。
回答2件
0
- 「け」を表示するコードの直前のifの条件式の直後に
)が抜けている(文法エラーになる) Math.randomで0以上1未満の範囲の実数値を発生させ、「あ」～「こ」を同じ確率で表示させたいのであれば、if文の条件式を0.1刻みで変化させる必要がある。- 質問文に提示されたエラーは、提示されたHTMLファイルとJSファイルでは発生しない。基になったファイルで、ボタンのIDを書き間違えていないか、スクリプトをhead内で読み込んでいないかなどをチェックしよう。
JavaScript
1(function () { 2 'use strict'; 3 var btn = document.getElementById('btn'); 4 btn.addEventListener('click', function () { 5 var n = Math.random(); 6 if (n < 0.1) { 7 this.textContent = 'あ'; 8 } else if (n < 0.2) { 9 this.textContent = 'い'; 10 } else if (n < 0.3) { 11 this.textContent = 'う'; 12 } else if (n < 0.4) { 13 this.textContent = 'え'; 14 } else if (n < 0.5) { 15 this.textContent = 'お'; 16 } else if (n < 0.6) { 17 this.textContent = 'か'; 18 } else if (n < 0.7) { 19 this.textContent = 'き'; 20 } else if (n < 0.8) { 21 this.textContent = 'く'; 22 } else if (n < 0.9) { 23 this.textContent = 'け'; 24 } else { 25 this.textContent = 'こ'; 26 } 27 }); 28 btn.addEventListener('mousedown', function () { 29 this.className = 'pushed'; 30 }); 31 btn.addEventListener('mouseup', function () { 32 this.className = ''; 33 }); 34})();
投稿2020/10/10 22:47
編集2020/10/10 22:48
総合スコア11990
0
ベストアンサー
こんにちは
まずは、ご質問にあるコードを、Daregadaさんのご回答で指摘されている諸点について見直し修正して、意図通り動かせるようにすることが前提ですが、それが出来てからの応用編として、あからこまでのいずれかの平仮名一文字をランダムに取得して、ボタンのテキストに設定するために、以下のよう書けます。
javascript
1const letters = [...'あいうえおかきくけこ']; 2 3btn.addEventListener('click', function(){ 4 this.textContent = _.sample(letters); 5});
上記で、_.sample(letters)の部分は、配列やオブジェクトを操作するときに便利なライブラリ lodash の _.sample というメソッドを使って、配列lettersに含まれる要素からランダムにひとつを得ています。
- 動作確認用サンプル: codepen.io/jun68ykt/pen/bGedBew
参考になれば幸いです。
追記
コメントいただきました件ですが、以下の２点を修正してみるといかがでしょうか？
(1) <head>･･･</head> の中の <link rel="stylesheet" href="style.css"> のすぐ下に、lodashを読み込む <script>タグの行を追加
diff
1 <head> 2 <meta charset="utf-8"> 3 <title>おみくじ</title> 4 <link rel="stylesheet" href="style.css"> 5+ <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script> 6 </head>
(2) lettersを作る行を以下のように修正
diff
1- const letters = [...'あいうえおかきくけこ','かきくけこ','なにぬねの']; 2+ const letters = [...'あいうえおかきくけこ', ...'かきくけこ', ...'なにぬねの'];
すなわち、追加した'かきくけこ'と'なにぬねの'それぞれの前にも、スプレッド構文の...が必要です。この場合、letters の要素に、か, き, く, け, こ は２個ずつ含まれることになるので、これらは他の文字の２倍の確率で出現することになります。
投稿2020/10/11 05:44
編集2020/10/11 14:17
総合スコア9058
document.addEventListener('DOMContentLoaded', function() {
const btn = document.getElementById('btn');
const letters = [...'あいうえおかきくけこ','かきくけこ','なにぬねの'];
btn.addEventListener('click', function(){
this.textContent = _.sample(letters);
});
btn.addEventListener('mousedown', function(){
this.className = 'pushed';
});
btn.addEventListener('mouseup', function(){
this.className = '';
});
});
配列の３つの文字列の中から１つ取り出したく上記を作ってみたところ
random.js:6 Uncaught ReferenceError: _ is not defined
at HTMLDivElement.<anonymous
のエラーが出ます。何を追記する必要があるのでしょうか
回答に要修正と思われる点を挙げておきました。
あなたの回答
tips
プレビュー
