Как добавить значение в список нажатием кнопки?

У меня возникли проблемы с помощью функции 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, как вы могли бы реализовать

благодаря

источник

2016-04-19 Happy G

'Кнопка <тип = "отправить" OnClick = "document.getElementById (" контейнер ") AppendChild (Li)."> Отправить' на вашем примере ваш ола ид не ** контейнер ** –

У вас есть проблема с цитированием. Кавычки перед 'контейнером' соответствуют котировке после' 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(); });

При нажатии на кнопку, функция создания Li тег со значением Ушло put tag с id = outputvalue в ol с id = list

Обновление! нажмите элемент li и удалите. https://jsfiddle.net/bfmpkc7p/3/

источник

2016-04-19 02:32:41 Cuchu

Вы можете добавить стиль css в список. – Cuchu

WOW. Спасибо большое!!! –

@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

Как добавить значение в список нажатием кнопки?

ответ

Смежные вопросы