M5.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入力フォーム</title>
    <style>
        label {
            display: block;
            margin-bottom: 8px;
            white-space: nowrap;
        }

        textarea {
            width: 500px;
            height: 800px;
            margin-bottom: 16px;
        }

        li {
            float: left;
            list-style: none;
            padding: 8px;
        }
    </style>
</head>
<body>
    <div>
        <label for="inputText">【JNDI名】</label>
    </div>
    <div>
        &nbsp;jdbc/<input id="inputText">
    </div>
    <div>
        <br>
        <div>【DBスキーマ名】</div>
        <label for="Schema">スキーマを入力or選択</label>
        <input list="SchemaList" id="Schema" name="Schema" />
        <datalist id="SchemaList">
            <option value="BUNSHO"></option>
            <option value="DOC_MANAGER"></option>
            <option value="EG_USER"></option>
            <option value="ACCMGR"></option>
            <option value="DP_USER"></option>
        </datalist>
    </div>
    <div>
        <div>
            <p id="checkList">【追加項目】</p>
        </div>
        <form name="'checkboxForm">
          <div>
            <input type="checkbox" name="btn" id="maxTotal" onclick="btnClick()" checked>maxTotal<label for="maxTotal"></label>
          </div>
           <div>
             <input type="checkbox" name="btn" id="initalSize" onclick="btnClick()" checked>initalSize<label for="initalSize"></label>
          </div>
          <div>
            <input type="checkbox" name="btn" id="validationQuery" onclick="btnClick()" checked>validationQuery<label for="validationQuery"></label>
          </div>
          <div>
            <input type="checkbox" name="btn" id="testOnBorrow" onclick="btnClick()" checked>testOnBorrow<label for="testOnBorrow"></label>
          </div>
          <p id="checkList">【共通リソース】</p>
            <div>
              <input type="checkbox" name="btn" id="Intra_authDS" onclick="showOutput()">Intra_authDS<label for="Intra_authDS"></label>
            </div>
            <div>
              <input type="checkbox" name="btn" id="OaUtilDS" onclick="btnClick()">OaUtilDS<label for="OaUtilDS"></label>
            </div>
        </form>
    </div>
    <br>
    <button type="button" onclick="showOutput()">出力</button>
    <label for="outputText">cntext.xml</label>
    <textarea id="outputText">Resource</textarea>

    <script>
        // クラスを表すオブジェクト
        class MyClass {
            constructor(firstName, jdbcName, schemaName, endName) {
                this.firstName = firstName;
                this.jdbcName = jdbcName;
                this.schemaName = schemaName;
                this.endName = endName;
                this.maxTotal = "";
                this.initalSize = "";
                this.validationQuery = "";
                this.testOnBorrow = "";
                this.buttonValues = []; // チェックボックスの値を格納するプロパティを追加
            }
            
            // 文字列を返すメソッド
            getInfo() {
                return this.firstName + '\n' + 'name="jdbc/' + this.jdbcName + '"\n' + 'type="javax.sql.DataSource"\n' + 'url="${URL};queryTimeout=90"\n' + 'driverClassName="com.microsoft.sqlserver.jdbc.SQLServerDriver"\n' + 'username="${USER_' + this.schemaName + '}"\n' + 'password="${PASS_' + this.schemaName + '}"\n' + 'maxTotal="' + this.maxTotal + '"\n' + 'initialSize="' + this.initalSize + '"\n' + 'validationQuery="' + this.validationQuery + '"\n' + 'testOnBorrow="' + this.testOnBorrow + '"\n' + this.endName;
            }
        }




    //     function showOutput() {
    //     const inputTextValue = document.querySelector('inputText').value;
    //     const inputSchema = document.querySelector('schema').value;

    //     const selectedValue = new MyClass("<", "", "", "/>");
    //     selectedValue.jdbcName = inputTextValue;
    //     selectedValue.schemaName = inputSchema;

    //     const outputValue = selectedValue.getInfo();
    //     document.querySelector('#outputText').value = outputValue;
    //   }




        let classesArray = [];
        // // const CLASS1 = new MyClass('<Resource','', '', '/>');
        // // let CLASS2;

        // function btnClick() {

        // // classesArray を初期化
        // // classesArray = [];

        // const inputTextValue = document.getElementById('inputText').value;
        // const inputSchema = document.getElementById('Schema').value;
        //         // インスタンスのjdbcNameとschemaNameに適用
        //         const selectedClass = new MyClass('<Resource', inputTextValue, inputSchema, '/>');
        // // // // 現在の選択されたクラスのインスタンスを取得
        // // //     const selectedClass = new MyClass('<Resource', '', '', '/>');

        // // // // チェックボックスの値を配列に追加
        //     const checkboxes = document.getElementsByName('btn');
        // //     // const checkedValues = Array.from(checkboxes).filter(checkbox => checkbox.checked).map(checkbox => checkbox.id);
        //     selectedClass.buttonValues = Array.from(checkboxes).filter(checkbox => checkbox.checked).map(checkbox => checkbox.id);

        // //     // selectedClass.buttonValues = checkedValues;

        // //     // インスタンスを配列に追加
        //     classesArray.push(selectedClass);
        // }

        function showOutput() {
        //     // classesArray = [];
            // 入力された input【JNDI名】を取得
            var inputTextValue = document.getElementById('inputText').value;

            // 入力 or 選択されたスキーマを取得
            var inputSchema = document.getElementById('Schema').value;

        // インスタンスのjdbcNameとschemaNameに適用
            const selectedClass = new MyClass('<Resource', inputTextValue, inputSchema, '/>');
            
        //     // チェックボックスの値を設定
        //     const checkboxes = document.getElementsByName('btn');
        //     selectedClass.buttonValues = Array.from(checkboxes).filter(checkbox => checkbox.checked).map(checkbox => checkbox.id);

            // インスタンスを配列に追加
            classesArray.push(selectedClass);

            // 出力用の文字列を作成
            var outputValue = "";
                for (const classInstance of classesArray) {
                    outputValue += classInstance.getInfo() + '\n\n';

            // 出力
            document.getElementById('outputText').value = outputValue;
                }

                // function btnClick(){
                document.getElementById('OaUtilDS').checked 
                    // const selectedClass = new MyClass('<Resource', 'OaUtilDS', 'OaUtilDS', '/>');
                    classesArray.push(selectedClass);
                
            // }

        }

        //     // // インスタンスのjdbcNameとschemaNameに適用
        //     // CLASS1.jdbcName = inputTextValue;
        //     // CLASS1.schemaName = inputSchema;

        //     // // 選択されたクラスのインスタンスを取得
        //     // let selectedValue = CLASS1;
        //     // var outputValue = selectedValue.getInfo();
        //     // document.getElementById('outputText').value = outputValue;

            




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