1

ユーザーが多肢選択式の質問を作成できるように、php と mysql を使用してプロジェクト用のスクリプトを作成しました。デフォルトでは、クイズに 1 つの質問しか持てないように設定していますが、クリックすると新しい入力ボックスを追加してクイズに質問を追加できるボタンを追加しようとしています。これはクライアント側であり、前の入力ボックスに既に入力されているものを変更しないため、javascript でこれを行う必要があると思いましたか? カウンターを使用して for ループを試し、クリック時にカウンターをインクリメントしましたが、ページを更新する必要があると思われるため、これは機能していないようです。ソリューションがphpまたはjavascriptのどちらであるかは気にしません。

var limit = 1;
function addQuestion(){
limit++;    

}

for(var  i=1; i <= limit; i++){
document.write("Question "+i+":<input type='text' name='Question"+i+"'>"); 
}
4

4 に答える 4

0

私があなたの質問を正しく理解していれば、これを行う方法は JavaScript です (PHP を使用する必要はありません)。

基本的に、ボタンがクリックされたら、必要な要素を DOM に追加する関数を呼び出す必要があります。ループforはこの関数内にある必要があります。

document.getElementById('button').addEventListener('click', function(){ addQuestion(3); }, false);

function addQuestion(limit)
{
    limit = limit || 1;

    var form = document.getElementById('my_form'), input;

    for (var i = 0; i < limit; i++)
    {
        input = document.createElement('input')
        input.type = 'text';
        input.className = 'foo';

        form.appendChild(input);
    }
}

addQuestionすべてのロジックは、その関数の内側にある必要があります（ループ、アプリデンディング/新しい要素の作成など）。可能であれば、ライブラリを使用してこれを支援してください。

編集:質問は既に回答されていますが、他の回答では不要なグローバル変数が導入され、文字列から要素が作成されるため、この回答は残しておきますが、これはベスト プラクティスではありません。

于 2013-09-18T15:54:22.083 に答える
0 
<form>
    <input type="text" /><br/>
</form>
<input type="button" id="add" value="Add Question">

<script>
    var limit = 5;

    //this is to target the form element, you could use an ID as well for example;
    var form = document.getElementsByTagName("form")[0];

    var button = document.getElementById("add");
    button.onclick = addQuestion;

    function addQuestion(){
        var currentInputs = form.elements.length;
        if(currentInputs < limit){
            var input = document.createElement("input");
            input.setAttribute('type', 'text');
            input.setAttribute('name', 'question'+(currentInputs+1));

            form.appendChild(input);
            form.appendChild(document.createElement("br"));
        } else {
            alert('maximum questions reached!');
        }
    }
</script>
于 2013-09-18T15:49:47.100 に答える