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

Question

I'm having trouble using the appendChild function...

here's my code

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

i enter 2 numbers and it will calculates the result using a formula.

how can i make a button that will add the x value to a list once clicked?

also, i want to be able to delete items from the list if that's possible

im very new to javascript as you might realize

thanks

<button type="submit" onclick="document.getElementById("container").appendChild(li);">Submit</button> on your example your ol id is not container — JF-Mechs
– JF-Mechs, Commented Apr 19, 2016 at 2:14
You have a quoting problem. The quotes before container is matching the quote after onclick=, so it's ending the attribute. Use single quotes around strings when they're inside a double-quoted attribute, or vice versa. — Barmar
– Barmar, Commented Apr 19, 2016 at 2:19
You should put what you want to do into a function. Adding a row to a table is not a simple one-liner that can easily fit into the onclick attribute. You need to call document.createElement to create the new li, fill the element with the appropriate contents, then call appendChild. You might want to learn jQuery, it makes it a little easier. — Barmar
– Barmar, Commented Apr 19, 2016 at 2:25

helfi · Accepted Answer · 2016-04-19 02:24:20Z

1

I'm not sure what you're trying to do here but from a quick glimpse, I found a typo in your onclick.

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

You're having problems with your apostrophes. If you're using a "", then the inner ones need to be either \" \" or simply put ' '

This would work:

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

answered Apr 19, 2016 at 2:24

helfi

1253 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maxi Schvindt · Accepted Answer · 2016-04-19 02:44:12Z

0

try this code 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>

And javascript

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

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

When you click on button, the function create a li tag with a value in output tag with id=outputvalue in the ol with id = list

Update!! click on li element and delete. https://jsfiddle.net/bfmpkc7p/3/

edited Apr 19, 2016 at 2:44

answered Apr 19, 2016 at 2:32

Maxi Schvindt

1,4601 gold badge11 silver badges21 bronze badges

2 Comments

Maxi Schvindt Over a year ago

you can add css style to list.

Maxi Schvindt Over a year ago

@HappyG Thanks! if it was helpful give it your vote and select it as an answer to close the thread!

kangaswad · Accepted Answer · 2016-04-19 03:40:00Z

If you are new to Javascript, then you should learn jQuery. We can do this more clean and handy with 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>

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related