Reputation: 13
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
Upvotes: 1
Views: 5492
Reputation: 775
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>
Upvotes: 0
Reputation: 1462
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/
Upvotes: 0
Reputation: 125
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);"
Upvotes: 1