クイズの解説ボタンをつけて表示非表示を切り替えたい

質問

1.前提・実現したいこと
クイズ問題の下に解説ボタンをつけて表示非表示を切り替えたい

発生している問題・エラーメッセージ
clickBtn2 is not defined
該当のソースコード
<サンプルコード>
------------------------------
<input type="button" value="解説" onclick="clickBtn2()" />
<p id="p2">テスト１</p>
<script>
//初期表示は非表示
document.getElementById("p2").style.visibility ="hidden";

function clickBtn2(){
const p2 = document.getElementById("p2");

if(p2.style.visibility=="visible"){
// hiddenで非表示
p2.style.visibility ="hidden";
}else{
// visibleで表示
p2.style.visibility ="visible";
}
}
</script>
-----------------------------
自分で調べたことや試したこと
-------------------
<h2>解説</h2>
<div id="text_k"></div>
<input type="button" value="解説" onclick="clickBtn2()"/>
<script type="text/javascript">
/問題と解答
const qa = [
{q:"イルカを漢字で書くとどれ？",a:["海豚","海牛","河豚","河豚"],c:0,k:"くじら目はくじら亜目の小型海獣の総称。からだは紡錘(ぼうすい)形で、前肢はひれとなる。群れをなして泳ぎ、しばしば船について走る。マイルカ・ネズミイルカなど種類が多い。"},

//問題表示
QA.prototype.quiz = function() {
//問題
document.getElementById("text_q").innerHTML = (this.mondai_no + 1) + "問目：" + this.mondai_data[this.mondai_no].q;

//この問題の選択肢の数は自動判断（選択肢は何個でもOKです）
var answer_count=this.mondai_data[this.mondai_no].a.length;

//選択肢
var s = "";
for (var n=0;n<answer_count;n++) {
s += "【<a href=&#039;javascript:test.answer(" + n + ")&#039;>" + (n+1) + "：" + this.mondai_data[this.mondai_no].a[n] + "</a>】";
}
document.getElementById("text_s").innerHTML = s;

document.getElementById("text_k").innerHTML= this.mondai_data[this.mondai_no].k;

}

QA.prototype.clickBtn2 =function() {

//初期表示は非表示
document.getElementById("text_k").style.visibility ="hidden";
const text_k = document.getElementById("text_k");

if(text_k.style.visibility=="visible"){
// hiddenで非表示
text_k.style.visibility ="hidden";
}else{
// visibleで表示
text_k.style.visibility ="visible";
}
}

よろしくお願いします。

回答No.15

AsarKingChang · ベストアンサー

>また、僕を見つけてください。
寂しい事、いわんと～
わたしゃ暇人ですから～

お礼

新しい質問投稿しました。お暇なときでいいのでよろしくお願いします。文字数の制限で補足情報書ききれませんでした。
補足
-------------------
https://okwave.jp/qa/q10016834.html

<div id="text_k"></div>

<div id="text-button" ><p id="text">キーワード一致</p></div>
keyword1:行政指導<br>keyword2:文部科学書<br>keyoword3:中止等を求めることができる<br>
合計点：４０満点中２４点　　キーワード１つにつき８点×３＝２４点<Br>
全文一致で４０点
</body>
<script>

const qa = [
{q:"私立の大学であるA大学は、その設備、授業その他の事項について、法令の規定に違反しているとして、学校教育法15条1項に基づき、文部科学大臣から必要な措置をとるべき旨の書面による勧告を受けた。しかしA大学は、指摘のような法令違反はないとの立場で、勧告に不服をもっている。この文部科学大臣の勧告は、行政手続法の定義に照らして何に該当するか。また、それを前提に同法に基づき、誰に対して、どのような手段をとることができるか。40字程度で記述しなさい。",,kaitou:"行政指導に該当し、文部科学大臣に対して、当該勧告の中止等を求めることができる。（39字）"},

let arraySplit = kaitou.split('');
["行政指導","に","該","当","し、","文部科学大臣","に","対して","当該勧告の中止等を求めることができる"]

//alert("Hello!!");
var data = [];
var tr = $("table tr");//テーブルの全行を取得
for( var i=0,l=tr.length;i<l;i++ ){
var cells = tr.eq(i).children();//1行目から順番に列を取得(th、td)
for( var j=0,m=cells.length;j<m;j++ ){
if( typeof data[i] == "undefined" )
data[i] = [];
data[i][j] = cells.eq(j).text();//i行目j列の文字列を取得
}
}

//問題番号の選択
QA.prototype.set_mondai_no = function(no) {
// 正常な範囲内の時だけ、受け付ける
if (no<this.mondai_data.length) {

alert(no+"no");
this.mondai_no=no;
}
}
//問題表示
QA.prototype.quiz = function() {
//問題
document.getElementById("text_q").innerHTML = (this.mondai_no + 1) + "問目：" + this.mondai_data[this.mondai_no].q;

//この問題の選択肢の数は自動判断（選択肢は何個でもOKです）
var answer_count=this.mondai_data[this.mondai_no].a.length;

//選択肢
var s = "";

for (var n=0;n<answer_count;n++) {
s += "【<a href='javascript:test.answer(" + n + ")'>" + (n+1) + "：" + this.mondai_data[this.mondai_no].a[n] + "</a>】";
}
document.getElementById("text_s").innerHTML = s;
//document.getElementById("text_k").style.visibility ="hidden";

document.getElementById("text_k").style.visibility ="hidden";
document.getElementById("text_k").innerHTML= this.mondai_data[this.mondai_no].k;

document.getElementById("text-button").onclick = function() {

//初期表示は非表示
//document.getElementById("text_k").style.display ="none";

document.getElementById("text_k").style.visibility ="visible";
document.getElementById("text").innerHTML = "解説表示！";

//document.getElementById("text_k").innerHTML= this.mondai_data[this.mondai_no].k;
//初期表示は非表示
//document.getElementById("text_k").style.visibility ="hidden";
//hiddenが働かない

document.getElementById("text").style.visibility = "visible";

if(text_k.style.visibility=="visible"){
// hiddenで非表示
text_k.style.visibility ="hidden";

}else{
// visibleで表示
text_k.style.visibility ="visible";

}

};

// This is a JavaScript file
$(function(){

/* ここにjQueryのコードを記述 */
$('#f1').on('submit',function(e){
e.preventDefault();
var v_kaitouinput=$("#kaitouinpu").val();
if(v_kaitouinput!==""){
$('#t1 tbody').append($('<tr>').append($('<td>').text(V_kaitouinput_)));

}
});
});

//textboxの文字を取得する
function tbox1(){

str1 = document.form.txtb.value;

console.log(str1);

var x = document.getElementById('textid').value;
numx = parseInt(x);
numx = numx + 1;
document.getElementById('textoutput').innerHTML = x;

};
</script>
</html>

サンプルプログラム
http://www.openspc2.org/reibun/javascript/form_textfield/002/

cForm = document.myFORM.Address.value;
check = /.+@.+\..+/;
if (!cForm.match(check)) alert("キーワードが１件一致しました。８点")
else
alert("キーワードが2件一致しました。16点");
else
alert("キーワードが3件一致しました。24点")
else
alert("全文一致しました。４０点")

回答No.14

AsarKingChang

QA.prototype.quiz = function() {
-省略-
if(text_k.style.visibility=="visible"){
この、text_kを作ってる部分が見たたらないのですが。
原因はそれじゃないですかね？

interの関数は、単体用で、動作確認だけなので、
くっつける必要はないですよ。
jqueryのshow() hide()と同じ事をするだけの
サンプルなので。

が、もう一息って感じですね！。

お礼

texk_kを見つけました。
-------------------------
<body>
<h1>クイズひな形</h1>
<hr>

<span id="001"></span>

<h2>問題</h2>
<div id="text_q"></div>
<h2>選択</h2>
<div id="text_s"></div>
<h2>解答</h2>
<div id="text_a"></div>
<h2>案内</h2>
<div id="text_n"></div>
<h2>下に解説表示</h2>
<!-- <div id="text_k" style="display:none"></div> -->

<div id="text_k"></div>←ここです。text_kはここです。

<div id="text-button" ><p id="text">解説</p></div>
やっと完成しまいた。これもAsarKingChangさんのおかげです。やっとです。うれしいです。完成です。
つぎのネタ来週に準備します。つぎは４０字記述式パターンマッチング問題です。今、サンプルをかき集めて部分的に作っているところです。完成したので元気が出てきました。最近、失恋したので。AsarKingChangさんのおかげで失恋のショックが和らぎました。ありがとうございました。また、来週もあそんでください。つぎは４０字記述式パターンマッチング問題です。タイトルを忘れないでください。また、僕を見つけてください。ありがとうございました。

回答No.13

AsarKingChang

<script>
function _inter() {
var id="yay";
var node=document.getElementById(id);
/* 原因はここかも、この命令を実行する時まだHTMLが実行されてないので、
* getElementByIdが失敗してしまうので、node構築が終わってから
* 実行を開始すればよい。
* または、表示の完了割り込みを使う（こちらの方がスマート）
*/
if (node!=null) {
if (node.style.display=='') {
document.getElementById(id).style.display = 'none'; // hide
}else{
document.getElementById(id).style.display = ''; // show
}
}
setTimeout(_inter,1000);
}
_inter();
</script>

<html>
<div id="yay">あいうえお</div>
</html>
------------------
単体でこれのみをファイル化して、Firefoxで
読み込んでみてください。
こちらで、Chrome/FireFox両方で動作確認取りましたので。

補足

>単体でこれのみをファイル化して、Firefoxで
読み込んでみてください。

解説ボタンが点滅することを確認しましたが、ボタンはクリックしても反応ありません。
--------------------------------------
こういうふうに書きました。
style.css
-------------------
#text-button {
display: block;
cursor: pointer;
width: 160px;
height: 60px;
text-align: center;
border: 1px solid #232323;
}
------------------------------
mondai complete001.html
------------------------------
<h2>下に解説表示</h2>
<!-- <div id="text_k" style="display:none"></div> -->

<div id="text_k"></div>

<div id="text-button" ><p id="text">解説</p></div>
function _inter() {
var id="text_k";
var node=document.getElementById(id);
/* 原因はここかも、この命令を実行する時まだHTMLが実行されてないので、
* getElementByIdが失敗してしまうので、node構築が終わってから
* 実行を開始すればよい。
* または、表示の完了割り込みを使う（こちらの方がスマート）
*/
if (node!=null) {
if (node.style.display=='') {
document.getElementById(id).style.display = 'none'; // hide
}else{
document.getElementById(id).style.display = ''; // show
}
}
setTimeout(_inter,1000);
}
_inter();

//問題表示
QA.prototype.quiz = function() {
//問題
document.getElementById("text_q").innerHTML = (this.mondai_no + 1) + "問目：" + this.mondai_data[this.mondai_no].q;

//この問題の選択肢の数は自動判断（選択肢は何個でもOKです）
var answer_count=this.mondai_data[this.mondai_no].a.length;

//選択肢
var s = "";

for (var n=0;n<answer_count;n++) {
s += "【<a href='javascript:test.answer(" + n + ")'>" + (n+1) + "：" + this.mondai_data[this.mondai_no].a[n] + "</a>】";
}
document.getElementById("text_s").innerHTML = s;
//document.getElementById("text_k").style.visibility ="hidden";

document.getElementById("text_k").style.visibility ="hidden";
document.getElementById("text_k").innerHTML= this.mondai_data[this.mondai_no].k;

document.getElementById("text-button").onclick = function() {

document.getElementById("text_k").style.visibility ="visible";
document.getElementById("text").innerHTML = "解説表示！";

document.getElementById("text").style.visibility = "visible";

if(text_k.style.visibility=="visible"){
// hiddenで非表示
text_k.style.visibility ="hidden";

}else{
// visibleで表示
text_k.style.visibility ="visible";

}
};
-------------------
text_kとtextのidで混乱しています。
解説ボタンはクリックすると解説は表示されますが、ボタンは点滅します。

function _inter() {　//この関数は必要ですか？
よろしくお願いします。

回答No.12

AsarKingChang

>いつもありがとうございます。AsarKingChangさんのおかげで、いつも助かっています。ありがとうございます。

最初に言った通り、私も単なる暇つぶしなので、
あんまり感謝する～的なのは、なくても平気ですよ。

私的には、プログラムって
作ってる時が一番楽しくて、出来上がれば、
それほど楽しくない物、だったりします。

なので、これなんでうごかね～んだ～って言ってる時が
一番、人生で楽しめていると、私は感じますね。
そういう意味では、「全部が全部」簡単な人生は
つまらないですよね～って話＾＾

今回？？質問に無い、Object思考を
質問者さんに、教えてたのはこのため！

YES/NOで言えば、ややこしくなっただけでしょ＾＾
しか～し！、これのおかげで、
プログラムがモジュール化されて、
何個でもnewできる＝インスタンス化するという。。
メリットも得られたとは思います。

マゾってわけじゃないですが、プログラムってハマるほど楽しい！
要するに、結果より工程を楽しむ方が、楽しいって事でしてね！

回答No.11

AsarKingChang

FireFoxは入ってないので、後で入れてみますよ～
//提案
if文でdisplayを切り替えできませんか？
//document.getElementById(id).style.display = 'none'; // hide
//document.getElementById(id).style.display = ''; // show
ひとまず、これからやってみますかな！

お礼

おはようございます。もう一歩のところまで進みました。
なぜかボタンを押したときに表示ではなく表示されます。
この行をどこについかするか、で悩んでいます。document.getElementById("text_k").innerHTML= this.mondai_data[this.mondai_no].k;

------------------------------------
<h2>下に解説表示</h2>
<!-- <div id="text_k" style="display:none"></div> -->

<div id="text_k"></div>
-----------------------------------
//問題表示
QA.prototype.quiz = function() {
//問題
document.getElementById("text_q").innerHTML = (this.mondai_no + 1) + "問目：" + this.mondai_data[this.mondai_no].q;

//この問題の選択肢の数は自動判断（選択肢は何個でもOKです）
var answer_count=this.mondai_data[this.mondai_no].a.length;

//選択肢
var s = "";

for (var n=0;n<answer_count;n++) {
s += "【<a href='javascript:test.answer(" + n + ")'>" + (n+1) + "：" + this.mondai_data[this.mondai_no].a[n] + "</a>】";
}
document.getElementById("text_s").innerHTML = s;
//document.getElementById("text_k").style.visibility ="hidden";

document.getElementById("text_k").innerHTML= this.mondai_data[this.mondai_no].k;←米この行です

document.getElementById("text-button").onclick = function() {

//初期表示は非表示
//document.getElementById("text_k").style.display ="none";

document.getElementById("text").innerHTML = "解説表示！";

//document.getElementById("text_k").innerHTML= this.mondai_data[this.mondai_no].k;
//初期表示は非表示
document.getElementById("text_k").style.visibility ="hidden";

document.getElementById("text_K").style.visibility = "visible";

if(text_k.style.visibility=="visible"){
// hiddenで非表示
text_k.style.visibility ="hidden";

}else{
// visibleで表示
text_k.style.visibility ="visible";

}

};

今日はゆっくり休んでお暇なときによろしくお願いします。
僕はすこし進んだので元気が出てきました。ご協力感謝します。ありがとうございます。

補足

僕は、あと一歩で完成しそうだと思って事を焦りすぎました。
反省しています。
一旦立ち止まって休むことが必要かもしれません。
お体に気をつけて暇つぶし程度に付き合ってください。
焦ればやっぱり失敗します。

新たに発見した情報があります。
１．alert(text_k);
[object HTMLDivElement]と表示されます。

２.alert(document.writeln(waaaaa).type
[object HTMLInputElement]と表示されます。

//問題表示
QA.prototype.quiz = function() {
//問題
document.getElementById("text_q").innerHTML = (this.mondai_no + 1) + "問目：" + this.mondai_data[this.mondai_no].q;

//この問題の選択肢の数は自動判断（選択肢は何個でもOKです）
var answer_count=this.mondai_data[this.mondai_no].a.length;

//選択肢
var s = "";

for (var n=0;n<answer_count;n++) {
s += "【<a href='javascript:test.answer(" + n + ")'>" + (n+1) + "：" + this.mondai_data[this.mondai_no].a[n] + "</a>】";
}
document.getElementById("text_s").innerHTML = s;

document.getElementById("text_k").innerHTML= this.mondai_data[this.mondai_no].k;

//alert(document.writeln(text_k.value);

その１//alert(text_k);
//[object HTMLDivElement]と表示されます。

//alert(document.writeln(waaaaa).value);

その２//alert(document.writeln(waaaaa).type
//[object HTMLInputElement]と表示されます。

//alert(document.writeln(text_k).value);

//alert(this.mondai_data[this.mondai_no].k);
//何も表示されません。
}

QA.prototype.clickBtn2 =function() {

//初期表示は非表示
//document.getElementById("text_k").style.cssText.visibility ="hidden";

const text_k = document.getElementById("waaaaa");
//alert(text_k);

document.getElementById("waaaaa").style.visibility = "visible";

if(text_k.style.visibility=="visible"){
// hiddenで非表示
text_k.style.visibility ="hidden";
}else{
// visibleで表示
text_k.style.visibility ="visible";
}

-----------------------------------
// コンストラクタ
function QA(mondai_data,text_k) {
alert(mondai_data);
//[object Object],[object Object].....と表示されます。

alert(text_k);
//waaaaaと表示されます。

this.mondai_data=mondai_data;

//追加しました。
//this.text_k=text_k;

this.mondai_no=0;
this.user_answer=[];

this.next_mondai();

this.clear();
}

-----------------------------

最近、レザークラフトの出張講習に行っています。
そこで感じたことがあります。
若い人は飲み込みがいいので上達が早いのですが、やる気のない人は上達が遅いというか、ぜんぜんできません。
僕の教え方が悪いのかと思いましたが、年配の方でも７０歳くらいの方です。でも、やる気があるので１，２日での上達のスピードがすごいです。人に教えていて教える側も気付かされたことがあります。
この方はこんな癖があるのかと、その癖を見つけて調整して本人が気づいてできたときがぼくはうれしいです。

まん延防止措置が解除されて夜のお仕事が忙しくなっていると思いますので、
お体に気をつけて暇つぶし程度に付き合ってください。
お返事は来週でもかまいませんので、今週はゆっくり休んでください。
また来週にでもよろしくお願いします。
いつもありがとうございます。AsarKingChangさんのおかげで、いつも助かっています。ありがとうございます。

回答No.10

AsarKingChang

ちょっと、最小限のソースにしてもらっていいですか？
OKWAVEのシステム上。。長いレスが使えないので＾＾
全体像が把握できなくて＾＾

お礼

やっとできました。ご協力感謝感謝します。ありがとうございました。うれしいです。
//問題表示
QA.prototype.quiz = function() {
//問題
document.getElementById("text_q").innerHTML = (this.mondai_no + 1) + "問目：" + this.mondai_data[this.mondai_no].q;

//この問題の選択肢の数は自動判断（選択肢は何個でもOKです）
var answer_count=this.mondai_data[this.mondai_no].a.length;

//選択肢
var s = "";

for (var n=0;n<answer_count;n++) {
s += "【<a href='javascript:test.answer(" + n + ")'>" + (n+1) + "：" + this.mondai_data[this.mondai_no].a[n] + "</a>】";
}
document.getElementById("text_s").innerHTML = s;

//この行を追加したらできました。
document.getElementById("text_k").style.visibility ="hidden";
document.getElementById("text_k").innerHTML= this.mondai_data[this.mondai_no].k;

document.getElementById("text-button").onclick = function() {

document.getElementById("text_k").style.visibility ="visible";
document.getElementById("text").innerHTML = "解説表示！";

document.getElementById("text").style.visibility = "visible";

if(text_k.style.visibility=="visible"){
// hiddenで非表示
text_k.style.visibility ="hidden";

}else{
// visibleで表示
text_k.style.visibility ="visible";

}

補足

最小限のソースにしました。
cssの設定に問題がある気がします。

<style type="text/css">
<!--
html, body, div {
height:auto;
margin: auto;
overflow-y: scroll;
}

.box {
border: 1px solid #333333;
width: auto;
height: auto;
overflow-y: scroll;
}
.overflow-y-wrap{
border: 1px solid #999;
width: 200px;
height: 100px;
padding: 10px;
}
.overflow-y{

/*コレ*/overflow-y: scroll;
}
-->
</style>
<h2>解説</h2>

<div class="box" id="text_k" style="display:none">解説</div>

問題点１
microsoft Edeでデバックするとbody{display : block}と表示されます。

https://arakan-pgm-ai.hatenablog.com/entry/2018/03/30/080000

問題点２
<input type="button" value="解説" id="waaaaa"/>←　firefoxでデバックするとオーバーフローと表示されます。
エラー名　　この要素はオーバーフローの原因になっています

<script type="text/javascript">
//提案
if文でdisplayを切り替えできませんか？
//document.getElementById(id).style.display = 'none'; // hide
//document.getElementById(id).style.display = ''; // show

よろしくお願いします。

回答No.9

AsarKingChang

明日にしますね～

補足

<head>
<meta charset="utf-8">
<title>三択クイズ</title>
</head>
<body >
<h1>クイズひな形</h1>
<hr>

<span id="001"></span>

<h2>問題</h2>
<div id="text_q"></div>
<h2>選択</h2>
<div id="text_s"></div>
<h2>解答</h2>
<div id="text_a"></div>
<h2>案内</h2>
<div id="text_n"></div>

<style type="text/css">
<!--
html, body, div {
height:auto;
margin: auto;
overflow-y: scroll;
}

.box {
border: 1px solid #333333;
width: auto;
height: auto;
overflow-y: scroll;
}
.overflow-y-wrap{
border: 1px solid #999;
width: 200px;
height: 100px;
padding: 10px;
}
.overflow-y{

/*コレ*/overflow-y: scroll;
}
-->
</style>
<h2>解説</h2>

<div class="box" id="text_k" style="display:none">解説</div>

<input type="button" value="解説" id="waaaaa"/>←　firefoxでデバックするとオーバーフローと表示されます。この要素はオーバーフローの原因になっています

<script type="text/javascript">
//if文でdisplayを切り替えできませんか？
//document.getElementById(id).style.display = 'none'; // hide
//document.getElementById(id).style.display = ''; // show

１．試してみたこと

//.style.cssText;を追加しました。4ケ所追加しましたが、ボタンの反応がありません。

２．試してみたこと
//.style.display = "";も反応ありませんでした。.style.display = 'inline'も反応ありませんでした。

const text_k = document.getElementById("waaaaa").style.cssText;

console.log(text_k);
alert(text_k);
if(text_k.style.cssText.visibility=="visible"){
// hiddenで非表示
text_k.style.cssText.visibility ="hidden";
}else{
// visibleで表示
text_k.style.cssText.visibility ="visible";
}

３．試してみたこと
//block noneを使って見ましたがダメでした。
// const text_k = document.getElementById("waaaaa");

// if(text_k.style.display=="block"){
// noneで非表示
// text_k.style.display ="none";
// }else{
// blockで表示
// text_k.style.display ="block";
// }
}

４．試してみたこと
ｃｓｓの設定を追加しました。
<style type="text/css">
<!--
html, body, div {
height:auto;
margin: auto;
overflow-y: scroll;
}

.box {
border: 1px solid #333333;
width: auto;
height: auto;
overflow-y: scroll;
}
.overflow-y-wrap{
border: 1px solid #999;
width: 200px;
height: 100px;
padding: 10px;
}
.overflow-y{

/*コレ*/overflow-y: scroll;
}
-->
</style>

この部分に問題がありそうな気がします。
<input type="button" value="解説" id="waaaaa"/>←　firefoxでデバックするとオーバーフローと表示されます。
この要素はオーバーフローの原因になっています

今日も、朝３時からがんばって見ましたが、仕事に行く時間になってしまったので残りは帰ってからしたいと思います。
あと一歩が足りないです。よろしくお願いします。
帰りは１６時くらいになりますのでそれまで連絡が取れません。問題が解決されたらスッキリすると思います。
あと一歩ご協力ください。なんとぞご尽力よろしくお願いします。

回答No.8

AsarKingChang

> IDの文字を消したのですが、反応しませんでした。
> <input type="button" value="解説" id=""/>
けしちゃだめ～～～～
そのid="<この部分>"を
test=new QA(qa,"waaaaa");←ここに書くんだから！
test.quiz();
空っぽじゃ見つけられない！

あと、
function TEST(text_k) {　～　}はいらないので削除で
これは、サンプルで書いただけで、今回必要なものではないので。

そんだけで、動くはずだよ～

補足

問題文と選択肢は表示されましたが、ボタンがやっぱり反応しませんでした。
h2>解説</h2>
<div id="text_k" style="display:none">解説</div>
<input type="button" value="解説" id="waaaaa"/>
※追加しました。

<script type="text/javascript">

※削除しました。
でも、ボタンが反応しません。コンソールにエラーメッセージも表示されませんでした。原因が解りません。他に考えられる原因はありますか？なにとぞあと少しよろしくお願いします
//QA.prototype.clickBtn2 =function()
// function QA(text_k) {
// this.id=text_k;
// document.getElementById(text_k).onclick=this.clickBtn2.bind(this);
// }
// QA.prototype.onclick = function() {
// console.log(this.clickBtn2 + "が、押されたぜ！");
// }

// /* TESTというクラスは同じだが、担当しているボタンを変える！ */
// var gr1=new QA("waaaaa");
//var gr2=new TEST("gyaaa2");

回答No.7

AsarKingChang

function TEST(text_k) {
TESTってクラスはQAじゃないですよ～
違うクラスオブジェクトなので、使われてないだけです！
なので、
--------------------
// コンストラクタ
function QA(mondai_data) {
this.mondai_data=mondai_data;
this.mondai_no=0;
this.user_answer=[];

this.next_mondai();

this.clear();
}
--------------------
今もこのままのコンストラクタなら、
mondai_dataの後ろに、text_kを追加
function QA(mondai_data,text_k) {
これを追加 その他のは、消しちゃダメ！
document.getElementById(text_k).onclick=this.clickBtn2.bind(this);
}
--------------------
以前のインスタンス生成がこうだったら、
test=new QA(qa);

<input type="button" value="解説" id="waaaaa"/>
ID=の部分の文字を渡す。
test=new QA(qa,"waaaaa");

これで、コンストラクタ内で、
document.getElementById("waaaaa").onclick=this.clickBtn2.bind(this);
って展開されるので、
結果INPUTボタンのONCLICKに、QA内の、clickBtn2が
リスナーとして登録される。
リスナーは割り込みポイントの事（ボタンなどに反応するぜ！）って事

いけますかな？

補足

IDの文字を消したのですが、反応しませんでした。
<input type="button" value="解説" id=""/>
なにかおかしいですか？もう少しのようなのですが。
やっぱりUncaught TypeError: Cannot read properties of undefined (reading 'bind')エラーがでます。
あと少しなのですが、なにとぞよろしくおねがいします。h2>解説</h2>
<div id="text_k" style="display:none">解説</div>
<input type="button" value="解説" id=""/>

<script type="text/javascript">

//QA.prototype.clickBtn2 =function()
function TEST(text_k) {
this.id=text_k;
document.getElementById("waaaaa").onclick=this.clickBtn2.bind(this);
}
TEST.prototype.onclick = function() {
console.log(this.clickBtn2 + "が、押されたぜ！");
}

/* TESTというクラスは同じだが、担当しているボタンを変える！ */
var gr1=new TEST("waaaaa");
//問題表示
QA.prototype.quiz = function() {
//問題
document.getElementById("text_q").innerHTML = (this.mondai_no + 1) + "問目：" + this.mondai_data[this.mondai_no].q;

//この問題の選択肢の数は自動判断（選択肢は何個でもOKです）
var answer_count=this.mondai_data[this.mondai_no].a.length;

//選択肢
var s = "";

for (var n=0;n<answer_count;n++) {
s += "【<a href='javascript:test.answer(" + n + ")'>" + (n+1) + "：" + this.mondai_data[this.mondai_no].a[n] + "</a>】";
}
document.getElementById("text_s").innerHTML = s;

document.getElementById("text_k").innerHTML= this.mondai_data[this.mondai_no].k;

}

QA.prototype.clickBtn2 =function() {

//初期表示は非表示
//document.getElementById("text_k").style.visibility ="hidden";
const text_k = document.getElementById("waaaaa");

if(text_k.style.visibility=="visible"){
// hiddenで非表示
text_k.style.visibility ="hidden";
}else{
// visibleで表示
text_k.style.visibility ="visible";
}
}

test=new QA(qa,"waaaaa");
test.quiz();
もう少しなのですが、あと少しだけお付き合いください。よろしくお願いします。

回答No.6

AsarKingChang

ちと、五月雨になりますが。
> var clickBtn2 = new clickBtn2 ();
> //ここは間違っていますか？
間違ってます。clickBtn2 はメンバーで、クラスオブジェクトではないのでこれはエラー

> <input type="button" value="解説" onclick="clickBtn2()"/>
> //ここでやっぱりエラーになります。clickBtn2 is not defined
なので、＃３の回答みたいに、onclickをここに書かないで、
QAのコンストラクタにいれれば解決しますよ。

//表示物を消す
QA.prototype.clear = function() {
document.getElementById("text_q").innerHTML = "";
　　略
//ここはなくても大丈夫ですか？

だめです、これは、表示を消しているのではなく
「中身」を消している物です。

//ここもいらないですか？
QA.prototype.clickBtn2 =function() {
ここが、一番大事な部分なので消しちゃダメです。

このように書くのであれば、

<input type="button" value="解説" onclick="clickBtn2()"/>
こうではなく
<input type="button" value="解説" id="waaaaa"/>
例えば"waaaaa"をIDとして名前を付ける！

QAのコンストラクタに、
document.getElementById(id).onclick=this.clickBtn2.bind(this);
この、(id)のIDという変数に、"waaaaa"なので
document.getElementById("waaaaa").onclick=this.clickBtn2.bind(this);
と記入するか、外からパラメーターでボタンのIDを渡す！
そうすれば、QA内の、clickBtn2が呼ばれますよ。
ってのが、#3のサンプルです。

お礼

ここでエラーが出ます。なにとぞご協力お願いします。最後まで完成させたいです。
Uncaught TypeError: Cannot read properties of undefined (reading 'bind')
<h2>解説</h2>
<div id="text_k" style="display:none">解説</div>
<input type="button" value="解説" id="waaaaa"/>

<script type="text/javascript">

//QA.prototype.clickBtn2 =function()
function TEST(text_k) {
this.id=text_k;
document.getElementById("waaaaa").onclick=this.clickBtn2.bind(this);
}
TEST.prototype.onclick = function() {
console.log(this.clickBtn2 + "が、押されたぜ！");
}
//問題表示
QA.prototype.quiz = function() {
//問題
document.getElementById("text_q").innerHTML = (this.mondai_no + 1) + "問目：" + this.mondai_data[this.mondai_no].q;

//この問題の選択肢の数は自動判断（選択肢は何個でもOKです）
var answer_count=this.mondai_data[this.mondai_no].a.length;

//選択肢
var s = "";

//var clickBtn2 = new clickBtn2 ();

for (var n=0;n<answer_count;n++) {
s += "【<a href='javascript:test.answer(" + n + ")'>" + (n+1) + "：" + this.mondai_data[this.mondai_no].a[n] + "</a>】";
}
document.getElementById("text_s").innerHTML = s;

document.getElementById("text_k").innerHTML= this.mondai_data[this.mondai_no].k;

}

QA.prototype.clickBtn2 =function() {

//初期表示は非表示
//document.getElementById("text_k").style.visibility ="hidden";
const text_k = document.getElementById("waaaaa");

if(text_k.style.visibility=="visible"){
// hiddenで非表示
text_k.style.visibility ="hidden";
}else{
// visibleで表示
text_k.style.visibility ="visible";
}
}

補足

やっぱりwaaaaaになります。すいません。
全部見てもらえますか？よろしくお願いします。
-----------------
<h2>解説</h2>
<div id="text_k" style="display:none">解説</div>
<input type="button" value="解説" id="waaaaa"/>

<script type="text/javascript">

//QA.prototype.clickBtn2 =function()
function TEST(text_k) {
this.id=text_k;
document.getElementById("waaaaa").onclick=this.clickBtn2.bind(this);
}
TEST.prototype.onclick = function() {
console.log(this.text_k + "が、押されたぜ！");
}

/* TESTというクラスは同じだが、担当しているボタンを変える！ */
var gr1=new TEST("text_k");

//問題表示
QA.prototype.quiz = function() {
//問題
document.getElementById("text_q").innerHTML = (this.mondai_no + 1) + "問目：" + this.mondai_data[this.mondai_no].q;

//この問題の選択肢の数は自動判断（選択肢は何個でもOKです）
var answer_count=this.mondai_data[this.mondai_no].a.length;

//選択肢
var s = "";

//var clickBtn2 = new clickBtn2 ();

for (var n=0;n<answer_count;n++) {
s += "【<a href='javascript:test.answer(" + n + ")'>" + (n+1) + "：" + this.mondai_data[this.mondai_no].a[n] + "</a>】";
}
document.getElementById("text_s").innerHTML = s;

document.getElementById("text_k").innerHTML= this.mondai_data[this.mondai_no].k;

}

QA.prototype.clickBtn2 =function() {

//初期表示は非表示
//document.getElementById("text_k").style.visibility ="hidden";
const text_k = document.getElementById("text_k");

if(text_k.style.visibility=="visible"){
// hiddenで非表示
text_k.style.visibility ="hidden";
}else{
// visibleで表示
text_k.style.visibility ="visible";
}
}

ボタンが反応しません。何度もお手数お掛けしてすいません。なにとぞ最後まで完成させたいです。よろしくお願いします。

回答No.5

AsarKingChang

>QAというオブジェクトに入れた方を呼びたいです。
>具体的なソースコードを書き込んでもらえませんか？
回答番号3番参照～
これで、外から押してほしいボタンを指定して
newする＝インスタンス化するといいます。
なので、後は、ボタンを配置した数、
指定して、ByIDで振り分けちゃえば、
何個でもボタン追加OKですよ～

補足

/選択肢
var s = "";

var clickBtn2 = new clickBtn2 ();
//ここは間違っていますか？

for (var n=0;n<answer_count;n++) {
s += "【<a href='javascript:test.answer(" + n + ")'>" + (n+1) + "：" + this.mondai_data[this.mondai_no].a[n] + "</a>】";
}
document.getElementById("text_s").innerHTML = s;

document.getElementById("text_k").innerHTML= this.mondai_data[this.mondai_no].k;