Q&A
> //arrayはdataで定義しています
> //spellingはすでに定義しています
判断するのに大事な所です。ダミーデータで構いませんので追記お願いします。
#実現したいこと
作成したarrayをHTMLで"Next"ボタンが押された時に1つづつinputに出力したいのですが
終了しました
とアラートが出て1つも出力されないまま終わってしまいます.
arrayはconsoleに出した時に問題なく表示されているので恐らくボタンのコードに問題があると考えています.
以下ボタン部分と動作を行うソースコードです.
js
1<script> 2let data; 3 window.addEventListener('DOMContentLoaded', ()=>{ 4 const myfile=document.querySelector('#output_csv'); 5 myfile.addEventListener('change',async e=>{ 6 var f=e.target.files[0]; 7 var fr=new FileReader(); 8 var aaa =await new Promise((resolve)=>{ 9 fr.addEventListener('load',()=>{ 10 const content=fr.result; 11 data=content.split(/[\r\n]+/).map(x=>(y=x.split(","),{spelling:y[0],meaning:y[1]})); 12 resolve(aaa); 13 }); 14 fr.readAsText(f) ; 15 }); 16 data.sort (function (a, b) {return Math.floor (Math.random () * 3) - 1 ;}) ; 17 console.log(data); 18 }); 19 }); 20function Next() { 21if (data.length==0){ 22 window.alert("すでに終了しています"); 23} 24 25while(true){ 26 var word = data.shift(); 27 28 if(data.length==0){ 29 window.alert("終了しました"); 30 return; 31 }else{ 32 document.getElementById("question").value = word.spelling 33 } 34} 35} 36 37</script> 38<div class="start"> 39 <form> 40 <button onclick="Next() ;"> 41 NEXT 42 </button> 43 </form> 44</div> 45<input id="question">
arrayに関するソースを追記しました.
少々長くなりますがご了承ください
console.log(data)
の部分ですが,問題なくコンソールに表示されました
回答2件
0
ベストアンサー
とりあえずコードをシンプルにしてテスト
HTML
1<html> 2<head> 3 <meta charset="UTF-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5<script> 6let data; 7var content=''; 8content += '"apple","りんご"\r\n'; 9content += '"apple","りんご"\r\n'; 10content += '"function","関数"\r\n'; 11content += '"hey", "へい"\r\n'; 12content += '"black","黒"\r\n'; 13content += '"color", "色"\r\n'; 14content += '"banana", "バナナ"\r\n'; 15content += '"red", "赤"\r\n'; 16content += '"orange", "オレンジ"\r\n'; 17content += '"happy", "幸せ"\r\n'; 18content += '"blue", "青"'; 19 20data=content.split(/[\r\n]+/).map(x=>(y=x.split(","),{spelling:y[0],meaning:y[1]})); 21data.sort (function (a, b) {return Math.floor (Math.random () * 3) - 1 ;}) ; 22 23function Next() { 24 if (data.length==0){ 25 window.alert("すでに終了しています"); 26 } 27 28 while(true){ 29 var word = data.shift(); 30 31 if(data.length==0){ 32 window.alert("終了しました"); 33 break; 34 }else{ 35 document.getElementById("question").value += word.spelling 36 } 37 } 38} 39 40</script> 41 42</head> 43 44<body> 45<div class="start"> 46 <button onclick="Next();"> 47 NEXT 48 </button> 49</div> 50<textarea id="question"></textarea> 51</body> 52</html>
この場合5が表示され「終了しました」表示されます。
実際の動きが違う事で想定されるのはCSVの改行ぐらいですが
本当に「/r/n」で改行されていますか？
追記
いただいた内容で確認しました。
質問者様の「表示されない」が「"終了しました"」と表示された後内容がクリアになる現象を表すのなら
<button>を<form>で囲んでいるからです。
※ あと<input>を使うのであればtype指定も行ってください。
(今回は複数行用に<textarea>へ変更しています。)
投稿2020/10/11 09:21
編集2020/10/11 10:25総合スコア2506
ご回答いただきありがとうございます
console.logで表示されている
とお伝えしましたが,実際に表示されているログを記載します
Array(10)
0: {spelling: "apple", meaning: "りんご"}
1: {spelling: "function", meaning: "関数"}
2: {spelling: "hey", meaning: "へい"}
3: {spelling: "black", meaning: "黒"}
4: {spelling: "color", meaning: "色"}
5: {spelling: "banana", meaning: "バナナ"}
6: {spelling: "red", meaning: "赤"}
7: {spelling: "orange", meaning: "オレンジ"}
8: {spelling: "happy", meaning: "幸せ"}
9: {spelling: "blue", meaning: "青"}
length: 10
とありますので改行されているかと思います.
実際に読み込んだcsvファイルは以下の形です
apple,りんご
banana,バナナ
orange,オレンジ
happy,幸せ
hey,へい
color,色
function,関数
red,赤
blue,青
black,黒
故に
function Next()
より上のコードには問題がないと考えております.
ボタンのコードを変更する必要があるのかなと,
＞document.getElementById("question").value = word.spelling
ここで前の値で上書きされていますよね？
> 1つづつinputに出力
「input text」は1行表示なのですが
＞document.getElementById("question").value += word.spelling
で試せば分かると思います。
document.getElementById("question").value += word.spelling
でも同様に何も表示されないまま
終了しました
とアラートが出ます
分からない中考えたのですが
条件の指定
もおかしい部分があるのかなと調べている次第です
ご回答いただきありがとうございました
おかげさまで解決することができました!
0
タイポですよ
alart → alert
投稿2020/10/11 08:50
総合スコア2724
あなたの回答
tips
プレビュー
