如何通过单击按钮将值添加到列表中

How do I add a value to a list with button click?

本文关键字：添加 列表 何通过 单击 按钮      更新时间：2023-09-26

我在使用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值添加到列表中？

此外，如果可能的话，我希望能够从列表中删除项目

我对javascript很陌生，因为你可能会意识到

感谢

我不确定你想在这里做什么，但从一个快速的一瞥中，我发现你的onclick中有一个拼写错误。

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

你的撇号有问题。如果你使用"，那么内部的需要是"''"或简单地放"

这将起作用：

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

尝试以下代码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(); });

当你点击按钮时，函数会在id＝list 的ol中创建一个id＝outputvalue的输出标签中的值的li标签

更新！！单击li元素并删除。https://jsfiddle.net/bfmpkc7p/3/

如果您是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>

相关文章：