サブウィンドウの表示方法

JavaScriptで得点式の診断テストを作っています。1問ごとに、選択肢のかいてある画像をサブウィンドウで表示したいのですが、どうすればよいかが分かりません。画像をいれていない状態のものは出来上がっています。助けて頂けると幸いです。

    <head>
        <meta charset="UTF-8">
<title>デート中にモテ度を稼ごう♡モテ度診断♡</title>

    </head>
<body>
<div id="aa"></div>
  <script>

alert("気になる彼とのデートでポイントを稼ごう♡モテ度診断♡");

var a=0
var b=0
var c

 c=prompt("どっちの服でデートに行く？1,2のどちらかをを入力してね","");
 c=parseInt(c)
 while(c!=1){alert("それ振られちゃわない？");
              a=prompt("どっちの服でデートに行く？1,2のどちらかをを入力してね","");}
 if(c==1){
    a=20
    alert(a)
 }
 if(c==2){
     b=0
 }

alert("次に進む");

 c=prompt("彼が30分遅刻してきた、どうする？1,2を入力してね","");
 
document.getElementById("aa").innerHTML="<img src=tuki.png>"

 c=parseInt(c)
 if(c==1){
     a=a+20
alert(a)
 }
 if(c==2){
     b=0
     b=b+0

 }

alert("次に進む");

 c=prompt("ごはんをどうするか聞かれたよ、なんて返事をする？1,2を入力してね","");
 c=parseInt(c)
 if(c==1){
     a=a+20
     alert(a)
 }
 if(c==2){
     b=0
     b=b+0

 }

alert("次に進む");

c=prompt("手を繋いでいいか聞かれちゃった、どうする？1,2を入力してね","");
c=parseInt(c)
 if(c==1){
    a=a+20
    alert(a)
 }
 if(c==2){
     b=0
     b=b+0

 }

alert("次に進む");

c=prompt("家まで送ってもらってデートはおわり！なんてLINEを送る？1,2を入力してね","");
c=parseInt(c)
 if(c==1){
     a=a+20
     alert(a)
 }
 if(c==2){
     b=0
     b=b+0

 }

alert("あなたのモテ度は…");

if(a==100||b==100){
alert(a+"％です");

}

if(a==80||b==80){
alert(a+"％です");
}

if(a==60||b==60){
alert(a+"％です");
}

if(a==40||b==40){
alert(a+"％です");
}

if(a<20&&b==0){
alert("ざんねん");
}

document.getElementById("aa").innerHTML="<img src=ikura.png>";

</script>
</body>
</html>

m.ts10806

2021/11/08 23:13 編集

「サブウィンドウ」とはどういうものを意図していっていますか？ alertやpromptのことなら画像は使えません。

z7nyz

2021/11/09 08:00

alertやpromptを使っているウィンドウでは画像が表示できないので、サブウィンドウで1問進むごとに画像のみ表示したいと思っています。サブウィンドウはあくまでも画像を出すだけの役割です。難しいでしょうか。

m.ts10806

2021/11/09 08:43

結局「サブウィンドウ」とはどういうものを意図していっていますか？

退会済みユーザー

2021/11/10 01:59

サブウィンドウだとこんなのをイメージしますよ Window opener Property https://www.w3schools.com/jsref/prop_win_opener.asp 多分イメージはモーダルボックスなのではないか？と思います。 How To Make a Modal Box With CSS and JavaScript https://www.w3schools.com/howto/howto_css_modals.asp 制御はここで言うサブウィンドウの方が難しくなります。モーダルボックスで実装すると、制御は簡単ですがCSSの知識が必要です。少しこれらのサンプルを動かしてみたあと、イメージに近い方の言葉で再検索して頂けば、より意図が明確な質問をできると思いますよ。

行動規範の内容に同意します

回答2件

たとえ何かで画像を出したとして、alertやpromptは画面上に出てきて覆いかぶさるので画像を見ながら何かということにはなりません。
今alertやpromptでやっているところを全てモーダルに変更し、入力時、ボタン押下時のイベントも自前で制御するのが最も自分の好きなように作り込めます（全部html上の話になるので）

投稿2021/11/09 08:46

m.ts10806

総合スコア80875