appendChild関数がフォームにラベルを追加していません

質問を入力しようとしていますが、この質問をフォーム内の要素として表示するには、"survey-form"。しかし、JavaScriptを使用して子ノードを"survey-form"に追加すると、テキストは0.5秒間表示されてから消えます。それは、ラベル要素が追加されたが削除されたようだ。どのようにこれを修正するための任意のアイデア？appendChild関数がフォームにラベルを追加していません

window.onload = init; 
 

 
function init() { 
 
    document.getElementById("question-form").addEventListener("submit", 
 
    validateQuestion); 
 
} 
 

 
function validateQuestion() { 
 
    let questionValue = document.getElementById("question-box").value; 
 
    if (questionValue == "" || questionValue == undefined) { 
 
    alert("Fill the box with information so it can be added to the survey!"); 
 
    return; 
 
    } else { 
 
    addQuestion(questionValue); 
 
    } 
 
} 
 

 
function addQuestion(question) { 
 
    let label = document.createElement("label"); 
 
    label.innerHTML = question; 
 

 
    document.getElementById("survey-form").appendChild(label); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Create Your Own Survey</title> 
 
    <link rel="stylesheet" type="text/css" href="index.css"> 
 
    <script type="text/javascript" src="index.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="model-side"> 
 
    <form id="question-form" method="" action=""> 
 
     <label>Create a question for the survey:</label> 
 
     <input id="question-box" type="text" size="35" /><br/> 
 
     <input type="submit" value="Submit Question" /> 
 
    </form> 
 
    </div> 
 

 
    <div id="view-side"> 
 
    <form id="survey-form" method="" action=""> 
 
     <label>Current View</label> 
 
    </form> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-11-13 Troy Leu

利用event.preventDefault（）; validateQuestion関数にあります。 – Lalit

だけ追加：event.preventDefault()を。

EventインタフェースのpreventDefault()方法はユーザーエージェントを伝えイベントが明示的に処理されない場合、それは通常のだろうと、そのデフォルトのアクションが取られるべきではないということ。イベントリスナーの1つが stopPropagation()またはstopImmediatePropagation()（どちらかが）を一度に終了するかのいずれかを呼び出さない限り、イベントは通常通りに伝播します。

このような何か：

window.onload = init; 
 

 
function init() { 
 
    document.getElementById("question-form").addEventListener("submit", 
 
    validateQuestion); 
 
} 
 

 
function validateQuestion(event) { // Add event to get the question-form context. 
 
    event.preventDefault(); // Prevent the default action of the question-form in the form submission. 
 
    let questionValue = document.getElementById("question-box").value; 
 
    if (questionValue == "" || questionValue == undefined) { 
 
    alert("Fill the box with information so it can be added to the survey!"); 
 
    } else { 
 
    addQuestion(questionValue); 
 
    } 
 
} 
 

 
function addQuestion(question) { 
 
    let label = document.createElement("label"); 
 
    label.innerHTML = question; 
 

 
    document.getElementById("survey-form").appendChild(label); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Create Your Own Survey</title> 
 
    <link rel="stylesheet" type="text/css" href="index.css"> 
 
    <script type="text/javascript" src="index.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="model-side"> 
 
    <form id="question-form" method="" action=""> 
 
     <label>Create a question for the survey:</label> 
 
     <input id="question-box" type="text" size="35" /><br/> 
 
     <input type="submit" value="Submit Question" /> 
 
    </form> 
 
    </div> 
 

 
    <div id="view-side"> 
 
    <form id="survey-form" method="" action=""> 
 
     <label>Current View</label> 
 
    </form> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-11-13 05:01:14

これがなぜ機能するかは、以前はコードを実行していて、フォームを送信させるためです。アクションがないので、同じページを再度ロードしました。ボタンを押すたびに効果的にページをリフレッシュします。 –

validateQuestionの終了時にfalseを返すとどうしてうまくいかないでしょうか？ –

@TroyLeuあなたのコードで 'return'ステートメントを削除することができます。アップデートを参照してください。 –

appendChild関数がフォームにラベルを追加していません

答えて

関連する問題