ボタンクリックでリストに値を追加するにはどうすればよいですか？私はトラブルのappendChild機能を使用してのことだ

...ボタンクリックでリストに値を追加するにはどうすればよいですか？私はトラブルのappendChild機能を使用してのことだ

は、ここで私は2つの数値を入力し、それが式を使用して結果を計算します私のコード

<!DOCTYPE html> 
<html> 
<body> 

<form oninput="x.value=((parseFloat(winning_number.value)%(parseFloat(total_key_value.value)*100*2))/(parseFloat(total_key_value.value)*2)).toFixed(2)"> 
<input type="number" id="winning_number" value="" placeholder="Winning Number"> ~ 
<input type="number" id="total_key_value" value="" placeholder = "Total (Keys)"> 
= <output name="x" for="winning_number total_key_value"></output>% 
</form> 

<button type="submit" onclick="document.getElementById("container").appendChild(li);">Submit</button> 


<ol id="list"></ol> 

</body> 
</html>

です。

クリックすればリストにx値を追加するボタンを作る方法はありますか？

も、私はそれがJavaScriptに非常に新しい

イム可能です場合は、私が何を」わからない

おかげ

出典

2016-04-19 Happy G

'<=は、のonclick = "のdocument.getElementById（" コンテナ "） "送信" ボタンタイプのappendChild（李）;">あなたの例あなたのOL IDに' を送信**コンテナではありません** –

引用の問題があります。 'container'の前にある引用符は、' onclick = 'の後に引用符と一致しているので、属性を終了しています。二重引用符で囲まれた属性の中にあるときは、文字列の回りに一重引用符を使用するか、その逆もできます。 – Barmar

変数 'li'はどこで設定しますか？ – Barmar

このコードhttps://jsfiddle.net/bfmpkc7p/2/

<form oninput="x.value=((parseFloat(winning_number.value)%(parseFloat(total_key_value.value)*100*2))/(parseFloat(total_key_value.value)*2)).toFixed(2)"> 
<input type="number" id="winning_number" value="" placeholder="Winning Number"> ~ 
<input type="number" id="total_key_value" value="" placeholder = "Total (Keys)"> 
= <output id="outputvalue" name="x" for="winning_number total_key_value"></output>% 
</form> 
<button id="boton" type="submit">Submit</button> 
<ol id="list"></ol>

を試してみてください

とJavaScript

$('#boton').click(function() { 
    value = $("#outputvalue").html(); 
    $('#list').append('<li>'+value+'</li>'); 
}); 

$(document).on('click', 'li', function() { $(this).remove(); });

ボタンをクリックすると、関数はアウトの値とのliタグを作成しますid = outputvalueのタグをid = listのolに入れてください

更新!! li要素をクリックして削除します。

出典

2016-04-19 02:32:41 Cuchu

あなたはリストにCSSスタイルを追加することができます。 – Cuchu

WOW。どうもありがとうございます！！！ –

@HappyGありがとう！役に立った場合は投票し、スレッドを閉じるための答えとして選択してください！ – Cuchu

を実現する可能性があるとして、リストから項目を削除できるようにしたいですここでやろうとしていますが、すばやく見ると、あなたのonclickにタイプミスがあります。

onclick="document.getElementById("container").appendChild(li);"

アポストロフィに問題があります。あなたが使用している場合は、「

これは働くだろう『』 \」、そして内側のものはどちらか\である必要があり、「」または単に置く：

onclick="document.getElementById('container').appendChild(li);"

出典

2016-04-19 02:24:20 helfi

、ありがとう（完全な問題ではない） –

javascriptを初めてお使いの方は、jQueryを学ぶ必要があります。これをjQueryでよりクリーンで使いやすくすることができます。

$("input").change(function(e) { 
 
    var winning_number = $("#winning_number").val(); 
 
    var total_key_value = $("#total_key_value").val(); 
 
    var res = ((parseFloat(winning_number) % (parseFloat(total_key_value) * 100 * 2))/(parseFloat(total_key_value) * 2)).toFixed(2); 
 
    $("#result").val(res); 
 
}); 
 

 
$("#submit").click(function(e) { 
 
    var val = $("#result").val(); 
 
    $("#list").append("<li>" + val + "</li>"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
</div> 
 
<form id="calculation"> 
 
    <input type="number" id="winning_number" value="" placeholder="Winning Number"> ~ 
 
    <input type="number" id="total_key_value" value="" placeholder="Total (Keys)"> = 
 
    <input id="result"> % 
 
</form> 
 
<span id="text"></span> 
 
<button id="submit">Submit</button> 
 

 

 
<ol id="list"></ol>

出典

2016-04-19 03:40:00 kangaswad

ボタンクリックでリストに値を追加するにはどうすればよいですか？私はトラブルのappendChild機能を使用してのことだ

答えて

関連する問題