WordPress プラグイン作成〜アンケート作成プラグインを作る〜

前回までに、プラグインのハコを作成しました。
つまりは、ダッシュボードにメニューを追加、クリックすることで自作のページを表示することができるような実装を行いました。

そして、今回はアンケートのための質問と回答するためのボタンを作成するJSプログラムを作成しました。

JSでフォーム作成

できたものは下のようなものです。
<入力前>

<入力後>

下の部分に質問とボタンが表示されています。
これを投稿画面に挿入しようという考えです。

まずはHTMLで質問などの入力部品を作成

<table id="questionTable">
    <tr>
        <td>
            <font size="3">Input Question: </font>
        </td>
        <td>
            <input id="questionMessage" type="text" maxlength="30" size="35" placeholder="質問内容を記入します"/>
        </td>
    </tr>
    <tr>
        <td>
            <font size="3">Input Answer: </font>
        </td>
        <td>
            <input id="ansText0" data-ans="0" type="text" maxlength="12" size="12"/>
        </td>
    </tr>
</table>
<button type="button" onclick="addRow(this)">項目追加</button>
<button type="button" onclick="createForm()">作成</button>
<button type="button" onclick="deleteForm()">削除</button>

そして、質問の数を増やすためのボタン、フォームの作成ボタン、作成したコンポーネントの削除ボタンと用意しました。
具体的なJSの実装は下のようになっています。

// フォーム作成フラグ
let isCreated = false;
// ボタンのカウンタ
let num = 0;
// 質問の回答項目を追加
function addRow(button) {
    num++;
    let table = document.getElementById("questionTable");
    // テーブに行を追加
    let row = table.insertRow(table.rows.length);
    let col1 = row.insertCell(0);
    let col2 = row.insertCell(1);
    col1.innerHTML = 'Input Answer: ';
    col2.innerHTML = '';
}
// 作成したアンケートの入力フォームを生成
function createForm() {
    if (isCreated) {
        return;
    }
    let question = document.getElementById("questionMessage").value;
    let table = document.getElementById("questionTable");
    let inputs = table.getElementsByTagName("input");
// 文言を表示するためのpタグを作成
    let messageElement = document.createElement("p");
    messageElement.innerText = question;
    // フォームを出力するためのdivタグにフォームを追加する
    let dom = document.getElementById("result");
    dom.appendChild(messageElement);
    for(let i = 0; i < inputs.length; i++) {
        console.log(inputs[i].dataset.ans);
        let but = document.createElement("button");
        but.innerText = inputs[i].value;
        but.dataset.ans = inputs[i].dataset.ans
        dom.appendChild(but);
    };
    isCreated = true;
}

// 作成したフォームを削除
function deleteForm() {
    document.getElementById("result").innerHTML = "";
    isCreated = false;
}

こんな感じで実装しました。

でわでわ。。。