appendで選択するオプションを追加しようとしても何も起こりません

私のコードには2つのセクションがあります：新しいアイテムを入力するセクションと、それらを操作するセクションです。私は新しい項目がjQueryで追加されるたびにドロップダウンリストを更新しようとしていますが、私の現在のメソッドは何もしません。何もしない限り、ドロップダウンリストが空のままであることを意味します。私はこの質問に以前の答えを試みましたが、うまくいきませんでした。（私はかなりJavascriptに新しいので、私はただのnoobされている完全に可能です）。appendで選択するオプションを追加しようとしても何も起こりません

<!DOCTYPE html> 
<head> 
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <link rel = "stylesheet" type = "text/css" href = "deletion.css"></link> 
    <script src = 'chemical.js'></script> 
</head> 
<body> 
    <form id = "newChemicalForm"> 
     <p id = newChemicalText> Submit new chemicals here: </p> 
     <input type = "text" id = "newChemicalInput" onfocus = "this.select()" placeholder = "Enter new chemical here"/> 
     <button id = "newChemicalButton" onclick = "addChemical()" > Submit </button> 
    </form> 
    <form id = "newUsageForm"> 
     <p id= "newUsageText"> Name your chemical and a usage amount. Check if the usage is daily. </p> 
     <select id = "chemicalDropdown"> 
     </select> 
     <input type = "text" id = "newUsage" placeholder = "Ex: 250"/> 
     <input type = "checkbox" id = 'dailyCheckbox'/> 
     <p id = "dateText"> Enter the end date below: </p> 
     <input type = "date" id = "dateInput"/> 
     <button id = "newUsageButton" onclick = "addUsage()"> Submit </button> 
    </form> 
</body>

とJavaScript：

chemicals = []; 

function addChemical() { 
    var chemical = new Chemical(); 
    chemicals.push(chemical); 

    $('#chemicalDropdown').append('<option value = "' + chemical.name + '"> ' + chemical.name + '</option> \n'); 
} 

function Chemical() { 
    this.name = $('#newChemicalInput').val(); 
    this.amount = 0; 
    this.usages = []; 
}

出典

2016-05-06 Anthony Monterrosa

あなたのアペンド文の末尾に改行文字-' \ n'-を削除した場合、何が起こるのだろうか？ – reporter

コンソールエラー？私はあなたのjsのバインディングではなく、あなたのインラインバインディングを使用するように頼むだけです。ああ、あなたのaddChemical（）onclickバインディングはフォームにある 'ボタン'にあります。フォームを送信したためにページが再読み込みされていないことを確認していますか？フォームの 'ボタン'要素はサブミットとして機能します。 – Taplar

こちらのスニペットは1.11で動作します。「うまくいきません」（この場合は「何もしません」）ということは決して良い問題の説明ではありません。もちろん、それは動作しません。もしあなたがこの質問をしていないなら、あなたはこの質問をしません。代わりにあなたが目撃した行動、そしておそらくあなたが得るエラーを記述してください。私たちとあなたのデバッグ情報を共有してください。 – Sumurai8

何か問題があります。まず、送信ボタンを押すと、最初のフォームを送信しようとします。 Second：onclickイベントがドロップダウンリストにアイテムを追加するメソッドにバインドしていないようです。

私は物事のカップル更新しました：それはベストプラクティスであるとして

は$(document).ready(...);を追加しました。
インラインonclickを削除し、clickイベントをjQuery経由でバインドしました。

JSFiddle here...

<form id = "newChemicalForm"> 
     <p id = newChemicalText> Submit new chemicals here: </p> 
     <input type = "text" id = "newChemicalInput" onfocus = "this.select()" placeholder = "Enter new chemical here"/> 
     <button type="button" id = "newChemicalButton" > Submit </button> 
    </form> 
    <form id = "newUsageForm"> 
     <p id= "newUsageText"> Name your chemical and a usage amount. Check if the usage is daily. </p> 
     <select id = "chemicalDropdown"> 
     </select> 
     <input type = "text" id = "newUsage" placeholder = "Ex: 250"/> 
     <input type = "checkbox" id = 'dailyCheckbox'/> 
     <p id = "dateText"> Enter the end date below: </p> 
     <input type = "date" id = "dateInput"/> 
     <button id = "newUsageButton" onclick = "addUsage()"> Submit </button> 
    </form>

とJS：

$(document).ready(function(){ 
    var chemicals = []; 

    $("#newChemicalButton").on("click",function(){ 
    addChemical(); 
    }); 

    function addChemical() { 
     var chemical = new Chemical(); 
     chemicals.push(chemical); 

     $('#chemicalDropdown').append("<option value=" + chemical.name + ">" + chemical.name + "</option>"); 
    } 

    function Chemical() { 
     this.name = $('#newChemicalInput').val(); 
     this.amount = 0; 
     this.usages = []; 
    } 
});

出典

2016-05-06 14:51:34

これはうまくいった！ onclickイベントを追跡すると（私の場合）、私が提出したたびにトリガされ、私が知る限りで働いた。透明にするために、$（document）.ready（）に変更すると、ページがやりなおされるまで関数を呼び出さなかったので、問題を解決するように見えたのはなぜか分かりませんでした。保つのがよい習慣のように見えます。可能であれば、jQueryでのバインディングと同じです。他に何か提案があれば（それが何であっても）、入力は高く評価されます。ありがとうございました！ –

可能な追記コードの後ろに "\ nが" この作業ではない作る

は、ここでのhtmlです。それを削除してみてください。

出典

2016-05-06 14:45:57

appendで選択するオプションを追加しようとしても何も起こりません

答えて

関連する問題