如何使用按钮单击将值添加到列表中？

我在使用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

如何使用按钮单击将值添加到列表中？

回答

相关问题