Q&A
==にしても同じでしょうか
csvにある語群からランダムで問題解答のセットを取り出し、ユーザーにひらがなパレットで入力させてクイズに答えさせるプログラムを作っています。
判定時、回答と解答の比較がうまくいきません。
例えばコンソールには、「回答はにちようび」「正解はにちようび」と表示されても、比較するとfalseが返されます。
回答解答、ともに方はstringのようですが、しっかりと動きません。
どなたか間違えをご指摘いただけないでしょうか。
html
1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>フラッシュカード</title> 6<link href="izumo.css" rel="stylesheet" type="text/css"> 7<style type="text/css"> 8#aaaa{ 9 color:white; 10 text-align:center; 11 background-color:black; 12 font-size: 80px; 13} 14#output{ 15 color:white; 16 text-align:center; 17 background-color:black; 18 font-size: 80px; 19} 20a.cp_btn { 21display: block; 22width: 100px; 23padding: 0.6em; 24text-align: center; 25text-decoration: none; 26color: #EC407A; 27border: 2px solid #EC407A; 28border-radius: 3px; 29transition: .4s; 30} 31a.cp_btn:hover { 32background: #EC407A; 33color: #fff; 34} 35</style> 36</head> 37<body> 38<!--<input type="file" name="select" id="select" /><a class="cp_btn" onclick="startfnc()">スタート</a>--> 39<input type="file" name="select" id="select" /><a class="cp_btn" onclick="test()">次へ</a> 40<div id="aaaa">問題</div><br> 41<div id="output">回答</div> 42<!--<a class="cp_btn" onclick="stopTimer()">ストップ</a>--> 43<a class="cp_btn" onclick="kotaeawase()">採点</a> 44 45<!--キーボード部分--> 46<ul class="list-syllabary-ja"> 47<li><a href="#" title="あ" onclick="kana()">あ</a></li> 48<li><a href="#" title="い" onclick="kana()">い</a></li> 49<li><a href="#" title="う" onclick="kana()">う</a></li> 50<li><a href="#" title="え" onclick="kana()">え</a></li> 51<li><a href="#" title="お" onclick="kana()">お</a></li> 52<li><a href="#" title="か" onclick="kana()">か</a></li> 53<li><a href="#" title="き" onclick="kana()">き</a></li> 54<li><a href="#" title="く" onclick="kana()">く</a></li> 55<li><a href="#" title="け" onclick="kana()">け</a></li> 56<li><a href="#" title="こ" onclick="kana()">こ</a></li> 57<li><a href="#" title="さ" onclick="kana()">さ</a></li> 58<li><a href="#" title="し" onclick="kana()">し</a></li> 59<li><a href="#" title="す" onclick="kana()">す</a></li> 60<li><a href="#" title="せ" onclick="kana()">せ</a></li> 61<li><a href="#" title="そ" onclick="kana()">そ</a></li> 62<li><a href="#" title="た" onclick="kana()">た</a></li> 63<li><a href="#" title="ち" onclick="kana()">ち</a></li> 64<li><a href="#" title="つ" onclick="kana()">つ</a></li> 65<li><a href="#" title="て" onclick="kana()">て</a></li> 66<li><a href="#" title="と" onclick="kana()">と</a></li> 67<li><a href="#" title="な" onclick="kana()">な</a></li> 68<li><a href="#" title="に" onclick="kana()">に</a></li> 69<li><a href="#" title="ぬ" onclick="kana()">ぬ</a></li> 70<li><a href="#" title="ね" onclick="kana()">ね</a></li> 71<li><a href="#" title="の" onclick="kana()">の</a></li> 72<li><a href="#" title="は" onclick="kana()">は</a></li> 73<li><a href="#" title="ひ" onclick="kana()">ひ</a></li> 74<li><a href="#" title="ふ" onclick="kana()">ふ</a></li> 75<li><a href="#" title="へ" onclick="kana()">へ</a></li> 76<li><a href="#" title="ほ" onclick="kana()">ほ</a></li> 77<li><a href="#" title="ま" onclick="kana()">ま</a></li> 78<li><a href="#" title="み" onclick="kana()">み</a></li> 79<li><a href="#" title="む" onclick="kana()">む</a></li> 80<li><a href="#" title="め" onclick="kana()">め</a></li> 81<li><a href="#" title="も" onclick="kana()">も</a></li> 82<li><a href="#" title="や" onclick="kana()">や</a></li> 83<li><a href="#" title="ゆ" onclick="kana()">ゆ</a></li> 84<li class="next-kana-empty"><a href="#" title="よ" onclick="kana()">よ</a></li> 85<li><a href="#" title="っ" onclick="kana()">っ</a></li> 86<li><a href="#" title="ら" onclick="kana()">ら</a></li> 87<li><a href="#" title="り" onclick="kana()">り</a></li> 88<li><a href="#" title="る" onclick="kana()">る</a></li> 89<li><a href="#" title="れ" onclick="kana()">れ</a></li> 90<li><a href="#" title="ろ" onclick="kana()">ろ</a></li> 91<li><a href="#" title="わ" onclick="kana()">わ</a></li> 92<li><a href="#" title="ん" onclick="kana()">ん</a></li> 93<li><a href="#" title="ゃ" onclick="kana()">ゃ</a></li> 94<li><a href="#" title="ゅ" onclick="kana()">ゅ</a></li> 95<li><a href="#" title="ょ" onclick="kana()">ょ</a></li> 96<li><a href="#" title="が" onclick="kana()">が</a></li> 97<li><a href="#" title="ぎ" onclick="kana()">ぎ</a></li> 98<li><a href="#" title="ぐ" onclick="kana()">ぐ</a></li> 99<li><a href="#" title="げ" onclick="kana()">げ</a></li> 100<li><a href="#" title="ご" onclick="kana()">ご</a></li> 101<li><a href="#" title="ざ" onclick="kana()">ざ</a></li> 102<li><a href="#" title="じ" onclick="kana()">じ</a></li> 103<li><a href="#" title="ず" onclick="kana()">ず</a></li> 104<li><a href="#" title="ぜ" onclick="kana()">ぜ</a></li> 105<li><a href="#" title="ぞ" onclick="kana()">ぞ</a></li> 106<li><a href="#" title="だ" onclick="kana()">だ</a></li> 107<li><a href="#" title="ぢ" onclick="kana()">ぢ</a></li> 108<li><a href="#" title="づ" onclick="kana()">づ</a></li> 109<li><a href="#" title="で" onclick="kana()">で</a></li> 110<li><a href="#" title="ど" onclick="kana()">ど</a></li> 111<li><a href="#" title="ば" onclick="kana()">ば</a></li> 112<li><a href="#" title="び" onclick="kana()">び</a></li> 113<li><a href="#" title="ぶ" onclick="kana()">ぶ</a></li> 114<li><a href="#" title="べ" onclick="kana()">べ</a></li> 115<li><a href="#" title="ぼ" onclick="kana()">ぼ</a></li> 116<li><a href="#" title="ぱ" onclick="kana()">ぱ</a></li> 117<li><a href="#" title="ぴ" onclick="kana()">ぴ</a></li> 118<li><a href="#" title="ぷ" onclick="kana()">ぷ</a></li> 119<li><a href="#" title="ぺ" onclick="kana()">ぺ</a></li> 120<li><a href="#" title="ぽ" onclick="kana()">ぽ</a></li> 121</ul> 122 123 124 125<div id="aaaaa" >答え</div> 126 127 128<script> 129kana = function() { 130 var e = (window.event)? window.event : arguments.callee.caller.arguments[0]; 131 var self = e.target || e.srcElement; 132 console.log(self.title); 133 target = document.getElementById("output"); 134 var old =target.innerHTML; 135 console.log(old); 136 137 if(old=="入力待ち"){ 138 target.innerHTML =self.title; 139 //console.log("文章を初期化"); 140 }else{ 141 target.innerHTML =old + self.title; 142 //console.log("文章を継続"); 143 } 144 145}; 146 147function kotaeawase(){ 148 var kaito = document.getElementById('output').innerHTML; 149 console.log("回答は" + kaito); 150 var seikai = document.getElementById('aaaaa').innerHTML; 151 console.log("正解は" + seikai); 152 153 154 if(kaito===seikai){ 155 console.log("あっていますよ！"); 156 test(); 157 }else{ 158 console.log("間違っています"); 159 document.getElementById('output').innerHTML= ("入力待ち"); 160 } 161} 162 163var itemArr = []; 164 165// File APIに対応しているか確認 166if(window.File) { 167 var select = document.getElementById('select'); 168 169 // ファイルが選択されたとき 170 select.addEventListener('change', function(e) { 171 // 選択されたファイルの情報を取得 172 var fileData = e.target.files[0]; 173 174 var reader = new FileReader(); 175 // ファイル読み取りに失敗したとき 176 reader.onerror = function() { 177 alert('ファイル読み取りに失敗しました') 178 } 179 // ファイル読み取りに成功したとき 180 reader.onload = function() { 181 // 行単位で配列にする 182 var lineArr = reader.result.split("\n"); 183 // 行と列の二次元配列にする 184 185 for (var i = 0; i < lineArr.length-1; i++) { 186 itemArr[i] = lineArr[i].split(","); 187 } 188 189 var min = 1 ; 190 var max = itemArr.length-1 ; 191 var a = Math.floor( Math.random() * (max + 1 - min) ) + min ; 192 console.log(a); 193 console.log(itemArr[a][1]); 194 } 195 196 // ファイル読み取りを実行 197 reader.readAsText(fileData); 198 }, false); 199} 200 201function test(){ 202 var min = 1 ; 203 var max = itemArr.length ; 204 var a = Math.floor( Math.random() * (max + 1 - min) ) + min ; 205 /* 206 console.log(a); 207 console.log(itemArr[a][1]); 208 console.log(itemArr[a][2]); 209 */ 210 var p = document.getElementById('aaaa'); 211 p.innerHTML= itemArr[a][1]; 212 var ans = document.getElementById('aaaaa'); 213 ans.innerHTML= itemArr[a][2]; 214 var kaito =document.getElementById('output'); 215 kaito.innerHTML= ("入力待ち"); 216} 217function startfnc() 218{ 219 //関数hyoji()を1000ミリ秒間隔で呼び出す 220 setInterval("test()",1500); 221} 222function stopTimer(){ 223 224location.reload(); 225 226} 227 228 229</script> 230</body> 231</html>
css
1.list-syllabary-ja { 2 display: flex; 3 flex-flow: row wrap; 4 -ms-writing-mode: tb-rl; 5 writing-mode: tb-rl; 6 -webkit-writing-mode: vertical-rl; 7 writing-mode: vertical-rl; 8 margin: 0 0 calc(1em - 10px); 9 padding: 0; 10 width: ７00px; 11 height: 260px; 12 list-style: none; 13 line-height: 1; 14 font-size: 24px; 15} 16.list-syllabary-ja li { 17 margin: 0 0 10px 10px; 18 padding: 0; 19 width: 28px; 20} 21.list-syllabary-ja li.next-kana-empty { 22 margin-bottom: 56px; 23} 24.list-syllabary-ja li:last-child { 25 margin-left: 0; 26} 27.list-syllabary-ja a { 28 display: block; 29 padding: 5px; 30 border: 1px solid #b5b5b5; 31 border-radius: 3px; 32 background: linear-gradient(to bottom, #fff 60%, #efefef 100%); 33 color: #333; 34 text-decoration: none; 35} 36.list-syllabary-ja a:hover, .list-syllabary-ja a:focus { 37 border-color: #C72020; 38 background: linear-gradient(to bottom, #df3b3b 60%, #C72020 100%); 39 color: #fff; 40} 41 42body { 43 font-family: 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif; 44}
csv
11,魚,さかな 22,計算,けいさん 33,点数,てんすう 44,春風,はるかぜ 55,茶,ちゃ 66,長方形,ちょうほうけい 77,汽車,きしゃ 88,日曜日,にちようび 99,光,ひかり 1010,家,いえ
はい、同じです。
console.log(kaito=== seikai);
console.log(kaito== seikai);
ともにfalseがかえります。
では、デベロッパーツールのElementから見たときに改行など入ってませんか？
知識不足でご質問の意図が分かりませんが、Elementから見まして改行は
<div id="aaaa">問題</div><br>
<div id="output">回答</div>
の部分にしか確認できません。
が、そのことを問われているわけではないですよね・・・。すみません。
あくまで「改行コード」ですね。brはいわゆる「改行タグ」です。
デベロッパーツールから確認すると、JavaScriptで書き換えた状態を確認できます。
改行コードはブラウザ上は何も行われないので見た目ではわかりませんが、書き換えられたソース上は現れているので、そこを確認いただきたいです。
その、「にちようび」でデベロッパーツールElementの画面キャプチャご提示ください。
問題とは直接関係がないですが、
.list-syllabary-ja {
display: flex;
flex-flow: row wrap;
-ms-writing-mode: tb-rl;
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
margin: 0 0 calc(1em - 10px);
padding: 0;
width: ７00px;
↑ここの7が全角になっていますので修正をおすすめします
回答4件
0
ちなみにこちらのコードで、ChromeとEdgeでは少なくともうまく動いているように見えるのですが、 https://jsfiddle.net/kvucybg3/ 動作環境は何でしょうか。
IEではうまく動きませんでした（JSFiddleがIEをフルサポートしてないからかもしれませんが)
投稿2019/09/27 04:40
総合スコア2982
0
ベストアンサー
innerHTMLじゃなくて、innerTextにしてみても変わらないでしょうか？
投稿2019/09/27 04:10
総合スコア299
うまくいきました。こちらの回答をBAとさせていただきますが、以下を皆様への感謝とさせてください。
UTF-8のcsvから配列に直し、シャッフルされた数字に紐づけされた問題と解答を取り出す仕組みとなっていましたが、アドバイスにあった通り同行最終列の単語（解答）に「,」がなかったため、ここに「改行」が加えられていたようです。
したがって「,」を付けたら正常動作を確認でき、またinnerTextで文字列だけを引っ張ったことでも正常に動いたのだと思われます。
なぜ改行がつくのか、また改行以外の文字列を抜き出してなぜ正常に動かないのか疑問は残りますが、最もシンプルに解決策をくださったyy_tnさんをBAとさせていただきます。Elementの意味や全角誤記述などのご指摘も大変ありがたかったです。
みなさんありがとうございました。
0
javascript
1console.log([kaito,seikai]); 2console.log([kaito.length,seikai.length]);
でまず見比べてください
さらに
javascript
1console.log([encodeURIComponent(kaito),encodeURIComponent(seikai)]);
投稿2019/09/27 02:09
編集2019/09/27 02:20
総合スコア114825
なるほど、改行が隠れていたわけか。
と思い、とりあえず
var seikai = document.getElementById('aaaaa').innerHTML;
console.log("正解は" + seikai);
var seikai2 = seikai.substr( 0, seikai.length - 1 );
console.log([kaito,seikai2]);
console.log([kaito.length,seikai2.length]);
としましたが、コンソール上では
回答はいえ
正解はいえ
["いえ", "いえ"]
[2, 2]
間違っています
となります。お付き合いさせてすみませんが、ご教示願えませんか。
そうなるともう同じにしか見えませんが、日本語だと比較が微妙なので
エンコードしたものを見比べてみてはどうでしょうか？
文字列を抜き出した後の
console.log([encodeURIComponent(kaito),encodeURIComponent(seikai2)]);
では
0: "%E3%81%B2%E3%81%8B%E3%82%8A"
1: "%E3%81%B2%E3%81%8B%E3%82%8A"
と等しく思えるのですが認識違いでしょうか。
なんでしょうね、完全に一致していると思いますが、
ただその挙動なら姑息ですが最悪エスケープ後の文字を比較すれば当座しのげそうですね
console.log(encodeURIComponent(kaito)==encodeURIComponent(seikai2));
※seikai2の処理があるなら
console.log(kaito==seikai2);
がtrueになりそうな気もしますが
あなたの回答
tips
プレビュー
