質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

【JS/HTML】オブジェクト指向のクラスをなくしたプログラムが知りたいです

tetucame
tetucame

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

-1評価

1クリップ

293閲覧

投稿2022/06/15 04:31

編集2022/06/22 12:40

html

<!DOCTYPE html> <head> <meta charset="utf-8"> <script src=""></script> </head> <body> <input type="text" readonly="readonly" size="3" value="" id="q_cnt"><br> <input type="text" readonly="readonly" size="6" value="日本語:" id="jn_q" > <input type="text" readonly="readonly" size="20" value="" id="one_q"><br> [<a href="javascript:void(0);" onClick="switch_jn();"> ↑↓ </a>]<br> <input type="text" readonly="readonly" size="6" value="英語:" id="jn_a" > <input type="text" readonly="readonly" size="20" value="" id="one_a"><br> <br> <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> <!--保存--> <input type="text" id="en" placeholder="単語"> <input type="text" id="ja" placeholder="意味"> <button id="btn">登録</button> <p id="total">全0件</p> <table id="table"></table> <footer> <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> </footer> </body> </html>

js(6/20訂正版)

window.onload = function () { counter_view(); const en=document.getElementById('en'); const ja=document.getElementById('ja'); const btn=document.getElementById('btn'); const total=document.getElementById('total'); const table=document.getElementById('table'); function Color(en, ja) { return { en, ja, showInfo() { const temp = document.createElement('template'); temp.innerHTML = `<td>${this.en}</td><td>${this.ja}</td><td><button class="btn">削除</button></td>`; const btn = temp.content.querySelector('.btn'); btn.addEventListener('click', e => { if (window.confirm('本当に削除しますか?')) { let parent = e.target.closest('tr'); parent.remove(); localStorage.removeItem('temp'); //localStorage.clear();//すべて削除 } }); return temp.content.children; }, showInfo_test_en() { return `${this.en}`; }, showInfo_test_ja() { return `${this.ja}`; } } } let colors=[]; const loadData=localStorage.getItem('colors'); if(loadData !=null){ let jsonArr=JSON.parse(loadData); for(let i=0;i<jsonArr.length;i++){ let color=new Color(jsonArr[i].en,jsonArr[i].ja); colors.push(color); } createTable(); } btn.addEventListener('click',()=>{ let color=new Color(en.value,ja.value); colors.push(color); en.value=''; ja.value=''; createTable(); localStorage.setItem("colors",JSON.stringify(colors)); }); function createTable(){ table.innerHTML='<tr><th>単語</th><th>意味</th></tr>'; for(let i=0;i<colors.length;i++){ let tr=document.createElement('tr'); tr.append(...colors[i].showInfo()); table.appendChild(tr); total.textContent=`${colors.length}`; words[0][i] = colors[i].showInfo_test_en(); words[1][i] = colors[i].showInfo_test_ja(); } } createTable(); }; var n = 5; let words = new Array(); for(var b = 0; b < n; b++) { words[b] = new Array(); for(var a = 0; a < n; a++) { words[b][a] = 0; } } var array = [words[0].length]; for(var i = 0; i<words[0].length; i++){ array[i] = i; } for (var i = array.length - 1; i >= 0; i--){ var rand = Math.floor( Math.random() * ( i + 1 ) ); [array[i], array[rand]] = [array[rand], array[i]] } var q_counter = -1; var qa_flag = false; var qa_lang = false; var q_lang = 0; var a_lang = 1; function switch_jn(){ if ( q_counter < 0 ) { return false; } if ( qa_lang ) { document.getElementById('jn_q').value = '日本語:'; document.getElementById('jn_a').value = '英語:'; q_lang = "0"; a_lang = "1"; } else { document.getElementById('jn_q').value = '英語:'; document.getElementById('jn_a').value = '日本語:'; q_lang = "1"; a_lang = "0"; } qa_lang = !(qa_lang); qa_view(); } function prev_btn(){ if (!(qa_flag)) { q_counter--; } if ( q_counter < 0 ) { q_counter = n-1; } qa_flag = !(qa_flag); counter_view(); qa_view(); } function next_btn(){ if ( !(qa_flag) ) { q_counter++; } if ( q_counter >= n ) { q_counter = 0; } qa_flag = !(qa_flag); counter_view(); qa_view(); } function qa_view(){ document.getElementById('one_q').value = words[q_lang][array[q_counter]]; if ( qa_flag ) { document.getElementById('one_a').value = ''; } else { document.getElementById('one_a').value = words[a_lang][array[q_counter]]; } } function counter_view(){ document.getElementById('q_cnt').value = q_counter + 1 + '/' + n; } /* showInfo() { const i; const btn2=document.getElementsByClassName("btn2"); btn.addEventListener('click', () => { localStorage.removeItem(words[i][0]); localStorage.removeItem(words[i][1]); if (window.confirm('本当に削除しますか?')) { let parent = button.parentNode; parent.remove(); } }); */

js(classあり)

window.onload = function () { counter_view(); const en=document.getElementById('en'); const ja=document.getElementById('ja'); const btn=document.getElementById('btn'); const total=document.getElementById('total'); const table=document.getElementById('table'); class Color{ constructor(en,ja){ this.en=en; this.ja=ja } showInfo(){ return `<td>${this.en}</td><td>${this.ja}</td><td><button class="btn">削除</button></td>`; btn.addEventListener('click',()=>{ localStorage.removeItem(words[i][0]); localStorage.removeItem(words[i][1]); if (window.confirm('本当に削除しますか?')) { let parent = button.parentNode; parent.remove(); } }); } showInfo_test_en(){ return `${this.en}`; } showInfo_test_ja(){ return `${this.ja}`; } } let colors=[]; const loadData=localStorage.getItem('colors'); if(loadData !=null){ let jsonArr=JSON.parse(loadData); for(let i=0;i<jsonArr.length;i++){ let color=new Color(jsonArr[i].en,jsonArr[i].ja); colors.push(color); } createTable(); } btn.addEventListener('click',()=>{ let color=new Color(en.value,ja.value); colors.push(color); en.value=''; ja.value=''; createTable(); localStorage.setItem("colors",JSON.stringify(colors)); }); function createTable(){ table.innerHTML='<tr><th>単語</th><th>意味</th></tr>'; for(let i=0;i<colors.length;i++){ let tr=document.createElement('tr'); tr.innerHTML=colors[i].showInfo(); table.appendChild(tr); total.textContent=`${colors.length}`; words[0][i] = colors[i].showInfo_test_en(); words[1][i] = colors[i].showInfo_test_ja(); } } createTable(); }; var n = 15; let words = new Array(); for(var b = 0; b < n; b++) { words[b] = new Array(); for(var a = 0; a < n; a++) { words[b][a] = 0; } } var array = [words[0].length]; for(var i = 0; i<words[0].length; i++){ array[i] = i; } for (var i = array.length - 1; i >= 0; i--){ var rand = Math.floor( Math.random() * ( i + 1 ) ); [array[i], array[rand]] = [array[rand], array[i]] } var q_counter = -1; var qa_flag = false; var qa_lang = false; var q_lang = 0; var a_lang = 1; function switch_jn(){ if ( q_counter < 0 ) { return false; } if ( qa_lang ) { document.getElementById('jn_q').value = '日本語:'; document.getElementById('jn_a').value = '英語:'; q_lang = "0"; a_lang = "1"; } else { document.getElementById('jn_q').value = '英語:'; document.getElementById('jn_a').value = '日本語:'; q_lang = "1"; a_lang = "0"; } qa_lang = !(qa_lang); qa_view(); } function prev_btn(){ if (!(qa_flag)) { q_counter--; } if ( q_counter < 0 ) { q_counter = words[0].length - 1; } qa_flag = !(qa_flag); counter_view(); qa_view(); } function next_btn(){ if ( !(qa_flag) ) { q_counter++; } if ( q_counter >= words[0].length ) { q_counter = 0; } qa_flag = !(qa_flag); counter_view(); qa_view(); } function qa_view(){ document.getElementById('one_q').value = words[q_lang][array[q_counter]]; if ( qa_flag ) { document.getElementById('one_a').value = ''; } else { document.getElementById('one_a').value = words[a_lang][array[q_counter]]; } } function counter_view(){ document.getElementById('q_cnt').value = q_counter + 1 + '/' + words[0].length; }

ここまで正常に動作するプログラムです。

試したこと

js

文字数制限のため削除させていただきました

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

yambejp

2022/06/15 04:42 編集

「オブジェクト指向のクラスをなくしたい」とは具体的にどういうイメージですか? クラスのメソッドをグローバルな関数で宣言するとかですかね?
hoshi-takanori

2022/06/15 04:52

JavaScript はクラスがなくてもオブジェクトは作れますからね。 var obj = { name: 'Taro', greet: function() { console.log(`Hello, ${this.name}`); } }; var obj2 = { ...obj, name: 'Jiro' }; obj.greet(); // Hello, Taro obj2.greet(); // Hello, Jiro
tetucame

2022/06/15 06:02

オブジェクト指向を使わないというより、クラスを使わないでということです。 上手く説明できず、ごめんなさい。 クラスを使わずに、for文や配列を用いてできればと思っています。 実はいうと、classを作成する知識が十分になく、 -------現在やりたいこととして、 ・削除ボタン(画像参考)を押したら、その単語だけ消えるようにしたい ・js63行目("window.onload = function () "の次) "var n = 15;"を"var n = colors.length;"にしたいが、colors.lengthがローカル変数であり、グローバル変数にするとうまく動作しなくなる -------です。 個人利用のもののため、特にこだわりはなく、上記2つのことができれば、なんでも大丈夫です。 よろしくお願いします。
Jon_do

2022/06/15 09:31

正常に動作するコードが正常に動作しないので 正常に動作するコードを書いた方が良いですよ。
tetucame

2022/06/16 00:51

htmlを全て載せました。 よろしくお願いします。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。