表　時間割　モーダル　全部月曜日1限に反映されてしまう

時間割　それぞれの時間に対応したモーダルの作り方が分からない

時間割を作ろうと思い、それぞれ押すとモーダルが表示されるようにしました。（class名：modal-open)
その後、モーダルの確定ボタン（id名：確定１－１）を押すと月曜日1限に反映されます。
当然、確定ボタンが（１－１）になっているため、全部月曜日1限に行く所までは分かりますが、
ここからそれぞれの時間に対応したモーダルを作るにはどうすれば良いのかが分かりません。
確定ボタンは＜！ーー　モーダル　ーー＞の所にあります。
※部屋番号の反映については今は不要です。

こんな感じです。どれを押しても月曜日1限になります。
・・・

何が悪いのか分からないので全てのコードを貼り付けました。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src = "jquery-3.6.0.min.js"></script>
  <title>Firebase Auth for Google</title>
  <style type = "text/css">
    a.allLink{
      display:block;
      text-decoration:none;
    }

    table{
      margin:0 auto;
    }
    .subTitle{
      text-decoration:underline;
    }
    /*モーダルを開くボタン*/
    .modal-open{
      cursor: pointer;
    }
    /*モーダル本体の指定 + モーダル外側の背景の指定*/
    .modal-container{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      background: rgba(0,0,0,50%);
      padding: 40px 20px;
      overflow: auto;
      opacity: 0;
      visibility: hidden;
      transition: .3s;
      box-sizing: border-box;
    }
    /*モーダル本体の擬似要素の指定*/
    .modal-container:before{
      content: "";
      display: inline-block;
      vertical-align: middle;
      height: 100%;
    }
    /*モーダル本体に「active」クラス付与した時のスタイル*/
    .modal-container.active{
      opacity: 1;
      visibility: visible;
    }
    /*モーダル枠の指定*/
    .modal-body{
      position: relative;
      display: inline-block;
      vertical-align: middle;
      max-width: 500px;
      width: 90%;
    }
    /*モーダルを閉じるボタンの指定*/
    .modal-close{
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      top: -40px;
      right: -40px;
      width: 40px;
      height: 40px;
      font-size: 40px;
      color: #fff;
      cursor: pointer;
    }
    /*モーダル内のコンテンツの指定*/
    .modal-content{
      background: #fff;
      text-align: left;
      padding: 30px;
    }
    
  </style>
</head>
<body>
  <section>
    <h1>...Please wait</h1>
    <div id="info"></div>
    <h1 class = "subTitle">時間割</h1>

    <!--モーダル-->
    <div class="modal-container">
      <div class="modal-body">
        <div class="modal-close">×</div>
        <div class="modal-content">
          <input id = "kougi1-1" type = "text" placeholder = "講義名を入力">
          <select>
            <option value = "">部屋番号を選択してください</option>
            <option id = "1-101" value = "1-101">1-101</option>
            <option value = "1-102">1-102</option>
            <option value = "1-105">1-105</option>
            <option value = "2-101">2-101</option>
            <option value = "2-102">2-102</option>
            <option value = "2-103">2-103</option>
            <option value = "2-104">2-104</option>
            <option value = "2-105">2-105</option>
          </select>
          <input id = "kakutei1-1" type = "submit" value = "確定">
        </div>
      </div>
    </div>

    <table border = "1" style = "border-collapse: collapse;">
      
      <!--時間割-->
      <tr>
       <th></th>
       <th>月</th>
       <th>火</th>
       <th>水</th>
       <th>木</th>
       <th>金</th>
       <th>土</th>
      </tr>
      <!--1限-->
　　//空白とbrは表の見た目を広くするために加えました。
      <tr>
        <th>　1限　</th>
        <th><a  class = "allLink modal-open MonOne">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open TuesOne">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open WednesOne">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open ThursOne">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open FriOne">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open SaturOne">　　　　<br>　　　　</a></th>
      </tr>
      <!--2限-->
      <tr>
        <th>　2限　</th>
        <th><a  class = "allLink modal-open MonSec">　　　　<br>　　　　</a></th>
        <th><a class = "allLink modal-open TuesSec">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open WednesSec">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open ThursSec">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open FriSec">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open SaturSec">　　　　<br>　　　　</a></th>
      </tr>
      <!--3限-->
      <tr>
        <th>　3限　</th>
        <th><a  class = "allLink modal-open MonThr">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open TuesThr">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open WednesThr">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open ThursThr">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open FriThr">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open SaturThr">　　　　<br>　　　　</a></th>
      </tr>
      <!--4限-->
      <tr>
        <th>　4限　</th>
        <th><a  class = "allLink modal-open MonFour">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open TuesFour">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open WednesFour">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open ThursFour">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open FriFour">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open SaturFour">　　　　<br>　　　　</a></th>
      </tr>
      <!--5限-->
      <tr>
        <th>　5限　</th>
        <th><a  class = "allLink modal-open MonFive">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open TuesFive">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open WednesFive">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open ThursFive">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open FriFive">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open SaturFive">　　　　<br>　　　　</a></th>
      </tr>
      <!--6限-->
      <tr>
        <th>　6限　</th>
        <th><a  class = "allLink modal-open MonSix">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open TuesSix">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open WednesSix">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open ThursSix">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open FriSix">　　　　<br>　　　　</a></th>
        <th><a  class = "allLink modal-open SaturSix">　　　　<br>　　　　</a></th>
      </tr>
    </table>
    
  </section>

  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-auth.js"></script>
  <script src="config.js"></script>
  <script>
  //ログイン（したorしてない）時に出るメッセージ
    firebase.auth().onAuthStateChanged( (user) => {
      let h1   = document.querySelector('h1');
      let info = document.querySelector('#info');

      if(user) {
        info.innerHTML = `${user.displayName}さんようこそ<br>`;
      }
      else {
        h1.innerText = 'ログインされていないので情報は残りません';
      }
    });

    //月曜1限
    document.getElementById('kakutei1-1').onclick = function(){
      document.getElementsByClassName('MonOne')[0].innerHTML = document.getElementById("kougi1-1").value;
    };
    
    //モーダルの動き
    $(function(){
      // 変数に要素を入れる
      var open = $('.modal-open'),
      close = $('.modal-close'),
      container = $('.modal-container');

      //開くボタンをクリックしたらモーダルを表示する
      open.on('click',function(){ 
        container.addClass('active');
        return false;
      });

      //閉じるボタンをクリックしたらモーダルを閉じる
      close.on('click',function(){  
        container.removeClass('active');
      });

      //モーダルの外側をクリックしたらモーダルを閉じる
      $(document).on('click',function(e) {
        if(!$(e.target).closest('.modal-body').length) {
          container.removeClass('active');
        }
      });
    });
  </script>
</body>
</html>

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

回答1件

ベストアンサー

モーダルを表示したときに、何がクリックされて表示されたかをどこかに記録しておいて、確定ボタンを押したときにその情報から書き込み先を決めればいいですね。

色々方法があると思います。例えば、open.on() のコールバックの中で this をグローバル変数に保存しておいて、document.getElementById('kakutei1-1').onclick() コールバックの中でその変数に対して innerHTML をセットする、とか。

投稿2022/01/24 07:05

int32_t

総合スコア20845

Fujice

2022/01/24 07:38

付け焼刃の知識で作ったものなので、申し訳ないのですがthisの使い方が良く分かりません。 open.on('click',function(){ container.addClass('active'); return false; }); と document.getElementById('kakutei1-1').onclick = function(this){ document.getElementsByClassName('MonOne')[0].innerHTML = document.getElementById("kougi1-1").value; }; int32_tさんの言ったやり方をやるには、このコードを書き換えたらいいと思うのですが、分からないのでご教授いただけますでしょうか

int32_t

2022/01/24 07:43

1. JavaScriptコードのトップレベル(すべての関数の外)で let targetSlot = null; 2. open.on() のコールバックの中で、 targetSlot = this; 3. 確定ボタンの onclick の中を以下に置き換え targetSlot.innerHTML = document.getElementById("kougi1-1").value; でどうでしょうか。

Fujice

2022/01/24 07:54 編集

ありがとうございます！！！！その通り修正したらそれぞれが反映されました！ thisの使い方も分かった気がします。ずっと悩んでいたのでスッキリしました！

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