html
1<!DOCTYPE html> 2<head> 3 <meta charset="utf-8"> 4 <script src=""></script> 5</head> 6<body> 7<input type="text" readonly="readonly" size="3" value="" id="q_cnt"><br> 8<input type="text" readonly="readonly" size="6" value="日本語:" id="jn_q" > 9<input type="text" readonly="readonly" size="20" value="" id="one_q"><br> 10[<a href="javascript:void(0);" onClick="switch_jn();"> ↑↓ </a>]<br> 11<input type="text" readonly="readonly" size="6" value="英語:" id="jn_a" > 12<input type="text" readonly="readonly" size="20" value="" id="one_a"><br> 13<br> 14<a href="javascript:void(0);" onClick="prev_btn();" class="bottum"> BACK </a>/<a href="javascript:void(0);" onClick="next_btn();"class="bottum"> NEXT </a><br> 15 16 17<!--保存--> 18<input type="text" id="en" placeholder="単語"> 19<input type="text" id="ja" placeholder="意味"> 20<button id="btn">登録</button> 21<p id="total">全0件</p> 22<table id="table"></table> 23 24 25 26 <footer> 27 <p class="bottom"><a href="https://cms-web1.educ.chs.nihon-u.ac.jp/cgi-bin/Login.cgi" target="_blank">template by myrtilles.</a></p> 28 </footer> 29</body> 30</html> 31
js(6/20訂正版)
1window.onload = function () { 2 counter_view(); 3 const en=document.getElementById('en'); 4 const ja=document.getElementById('ja'); 5 const btn=document.getElementById('btn'); 6 const total=document.getElementById('total'); 7 const table=document.getElementById('table'); 8 function Color(en, ja) { 9 return { 10 en, 11 ja, 12 showInfo() { 13 const temp = document.createElement('template'); 14 15 temp.innerHTML = `<td>${this.en}</td><td>${this.ja}</td><td><button class="btn">削除</button></td>`; 16 const btn = temp.content.querySelector('.btn'); 17 btn.addEventListener('click', e => { 18 if (window.confirm('本当に削除しますか?')) { 19 let parent = e.target.closest('tr'); 20 parent.remove(); 21 localStorage.removeItem('temp'); 22 //localStorage.clear();//すべて削除 23 } 24 }); 25 return temp.content.children; 26 }, 27 showInfo_test_en() { 28 return `${this.en}`; 29 }, 30 showInfo_test_ja() { 31 return `${this.ja}`; 32 } 33 } 34 } 35 let colors=[]; 36 const loadData=localStorage.getItem('colors'); 37 if(loadData !=null){ 38 let jsonArr=JSON.parse(loadData); 39 for(let i=0;i<jsonArr.length;i++){ 40 let color=new Color(jsonArr[i].en,jsonArr[i].ja); 41 colors.push(color); 42 } 43 createTable(); 44 } 45 btn.addEventListener('click',()=>{ 46 let color=new Color(en.value,ja.value); 47 colors.push(color); 48 en.value=''; 49 ja.value=''; 50 createTable(); 51 localStorage.setItem("colors",JSON.stringify(colors)); 52 }); 53 function createTable(){ 54 table.innerHTML='<tr><th>単語</th><th>意味</th></tr>'; 55 for(let i=0;i<colors.length;i++){ 56 let tr=document.createElement('tr'); 57 tr.append(...colors[i].showInfo()); 58 table.appendChild(tr); 59 total.textContent=`全${colors.length}件`; 60 words[0][i] = colors[i].showInfo_test_en(); 61 words[1][i] = colors[i].showInfo_test_ja(); 62 } 63 } 64 createTable(); 65}; 66 67var n = 5; 68let words = new Array(); 69for(var b = 0; b < n; b++) { 70 words[b] = new Array(); 71 for(var a = 0; a < n; a++) { 72 words[b][a] = 0; 73 } 74} 75var array = [words[0].length]; 76for(var i = 0; i<words[0].length; i++){ 77 array[i] = i; 78} 79for (var i = array.length - 1; i >= 0; i--){ 80 var rand = Math.floor( Math.random() * ( i + 1 ) ); 81 [array[i], array[rand]] = [array[rand], array[i]] 82} 83 84var q_counter = -1; 85var qa_flag = false; 86var qa_lang = false; 87var q_lang = 0; 88var a_lang = 1; 89 90 91function switch_jn(){ 92 if ( q_counter < 0 ) { return false; } 93 if ( qa_lang ) { 94 document.getElementById('jn_q').value = '日本語:'; 95 document.getElementById('jn_a').value = '英語:'; 96 q_lang = "0"; 97 a_lang = "1"; 98 } else { 99 document.getElementById('jn_q').value = '英語:'; 100 document.getElementById('jn_a').value = '日本語:'; 101 q_lang = "1"; 102 a_lang = "0"; 103 } 104 qa_lang = !(qa_lang); 105 qa_view(); 106} 107 108function prev_btn(){ 109 if (!(qa_flag)) { q_counter--; } 110 if ( q_counter < 0 ) { q_counter = n-1; } 111 qa_flag = !(qa_flag); 112 counter_view(); 113 qa_view(); 114} 115 116function next_btn(){ 117 if ( !(qa_flag) ) { q_counter++; } 118 if ( q_counter >= n ) { q_counter = 0; } 119 qa_flag = !(qa_flag); 120 counter_view(); 121 qa_view(); 122} 123 124function qa_view(){ 125 document.getElementById('one_q').value = words[q_lang][array[q_counter]]; 126 if ( qa_flag ) { 127 document.getElementById('one_a').value = ''; 128 } else { 129 document.getElementById('one_a').value = words[a_lang][array[q_counter]]; 130 } 131} 132 133function counter_view(){ 134 document.getElementById('q_cnt').value = q_counter + 1 + '/' + n; 135} 136 137/* 138showInfo() { 139 const i; 140 const btn2=document.getElementsByClassName("btn2"); 141 btn.addEventListener('click', () => { 142 localStorage.removeItem(words[i][0]); 143 localStorage.removeItem(words[i][1]); 144 if (window.confirm('本当に削除しますか?')) { 145 let parent = button.parentNode; 146 parent.remove(); 147 } 148 }); 149*/
js(classあり)
1window.onload = function () { 2 counter_view(); 3 const en=document.getElementById('en'); 4 const ja=document.getElementById('ja'); 5 const btn=document.getElementById('btn'); 6 const total=document.getElementById('total'); 7 const table=document.getElementById('table'); 8 class Color{ 9 constructor(en,ja){ 10 this.en=en; 11 this.ja=ja 12 } 13 showInfo(){ 14 return `<td>${this.en}</td><td>${this.ja}</td><td><button class="btn">削除</button></td>`; 15 btn.addEventListener('click',()=>{ 16 localStorage.removeItem(words[i][0]); 17 localStorage.removeItem(words[i][1]); 18 if (window.confirm('本当に削除しますか?')) { 19 let parent = button.parentNode; 20 parent.remove(); 21 } 22 }); 23 } 24 showInfo_test_en(){ 25 return `${this.en}`; 26 } 27 showInfo_test_ja(){ 28 return `${this.ja}`; 29 } 30 } 31 let colors=[]; 32 const loadData=localStorage.getItem('colors'); 33 if(loadData !=null){ 34 let jsonArr=JSON.parse(loadData); 35 for(let i=0;i<jsonArr.length;i++){ 36 let color=new Color(jsonArr[i].en,jsonArr[i].ja); 37 colors.push(color); 38 } 39 createTable(); 40 } 41 btn.addEventListener('click',()=>{ 42 let color=new Color(en.value,ja.value); 43 colors.push(color); 44 en.value=''; 45 ja.value=''; 46 createTable(); 47 localStorage.setItem("colors",JSON.stringify(colors)); 48 }); 49 function createTable(){ 50 table.innerHTML='<tr><th>単語</th><th>意味</th></tr>'; 51 for(let i=0;i<colors.length;i++){ 52 let tr=document.createElement('tr'); 53 tr.innerHTML=colors[i].showInfo(); 54 table.appendChild(tr); 55 total.textContent=`全${colors.length}件`; 56 words[0][i] = colors[i].showInfo_test_en(); 57 words[1][i] = colors[i].showInfo_test_ja(); 58 } 59 } 60 createTable(); 61}; 62 63var n = 15; 64let words = new Array(); 65for(var b = 0; b < n; b++) { 66 words[b] = new Array(); 67 for(var a = 0; a < n; a++) { 68 words[b][a] = 0; 69 } 70} 71var array = [words[0].length]; 72for(var i = 0; i<words[0].length; i++){ 73 array[i] = i; 74} 75for (var i = array.length - 1; i >= 0; i--){ 76 var rand = Math.floor( Math.random() * ( i + 1 ) ); 77 [array[i], array[rand]] = [array[rand], array[i]] 78} 79 80var q_counter = -1; 81var qa_flag = false; 82var qa_lang = false; 83var q_lang = 0; 84var a_lang = 1; 85 86 87function switch_jn(){ 88 if ( q_counter < 0 ) { return false; } 89 if ( qa_lang ) { 90 document.getElementById('jn_q').value = '日本語:'; 91 document.getElementById('jn_a').value = '英語:'; 92 q_lang = "0"; 93 a_lang = "1"; 94 } else { 95 document.getElementById('jn_q').value = '英語:'; 96 document.getElementById('jn_a').value = '日本語:'; 97 q_lang = "1"; 98 a_lang = "0"; 99 } 100 qa_lang = !(qa_lang); 101 qa_view(); 102} 103 104function prev_btn(){ 105 if (!(qa_flag)) { q_counter--; } 106 if ( q_counter < 0 ) { q_counter = words[0].length - 1; } 107 qa_flag = !(qa_flag); 108 counter_view(); 109 qa_view(); 110} 111 112function next_btn(){ 113 if ( !(qa_flag) ) { q_counter++; } 114 if ( q_counter >= words[0].length ) { q_counter = 0; } 115 qa_flag = !(qa_flag); 116 counter_view(); 117 qa_view(); 118} 119 120function qa_view(){ 121 document.getElementById('one_q').value = words[q_lang][array[q_counter]]; 122 if ( qa_flag ) { 123 document.getElementById('one_a').value = ''; 124 } else { 125 document.getElementById('one_a').value = words[a_lang][array[q_counter]]; 126 } 127} 128 129function counter_view(){ 130 document.getElementById('q_cnt').value = q_counter + 1 + '/' + words[0].length; 131}
ここまで正常に動作するプログラムです。
試したこと
js
1文字数制限のため削除させていただきました 2

回答1件
あなたの回答
tips
プレビュー