如何使用按鈕單擊將值添加到列表中？

我在使用appendChild函數麻煩......如何使用按鈕單擊將值添加到列表中？

這裏是我的代碼

<!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>

我進入2號，它就會用公式計算的結果。

我該如何製作一個按鈕，將x值添加到列表中，一旦點擊？

另外，我希望能夠從列表中刪除項目，如果可能的話

IM非常新的JavaScript，你可能會意識到

感謝

來源

2016-04-19 Happy G

'<按鈕類型= 「提交」的onclick = 「的document.getElementById（」容器「）的appendChild（LI）;」>上的例子的醇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(); });

當你點擊按鈕，該功能創建了中值的L1標籤在ID爲列表的ol中放置id = outputvalue的標籤

更新！點擊li元素並刪除。 https://jsfiddle.net/bfmpkc7p/3/

來源

2016-04-19 02:32:41 Cuchu

你可以添加CSS樣式列表。 – Cuchu

哇。非常感謝！！！ –

@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

如何使用按鈕單擊將值添加到列表中？

回答

相關問題