Я использую HTML, JavaScript, библиотеку JavaScript с именем d3.js и PHP, чтобы создать программу, которая попросит пользователя ввести набор чисел. Как только пользователь отправляет набор чисел, генерируется круговая диаграмма. Каждый раз, когда числа меняются, генерируется новая круговая диаграмма.
Проблема, с которой я сталкиваюсь, заключается в том, что я использую ввод текста, чтобы взять числа, они разделяются запятой, но я хочу добавить свой ввод текста в мою переменную данных (переменную для моей круговой диаграммы), чтобы каждый раз набор чисел вставлен, появится новая круговая диаграмма. Как я могу это сделать?
Это мой текстовый ввод:
< input type="text" name="first" min="1" max="100" >
Это моя исходная переменная данных для моей круговой диаграммы, но я хочу добавить свои данные в мою переменную данных:
var data [4,5,11,,2,10,7];
Как добавить мой текстовый ввод в переменную данных (переменную для круговой диаграммы), чтобы при каждом добавлении набора чисел появлялась новая круговая диаграмма?
Используйте input.split (‘,’), который преобразует значения через запятую в массив. Затем используйте функцию concat для объединения массивов.
var data = [4,5,11,2,10,7]
$("#submit").click(function(){
var input = $("#myInput").val().split(",")
$("#myInput").val("")
input.forEach(function(item){
data.push(parseInt(item, 10))
})
// data now includes new input. Pass to your chart building function here
alert(data)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id ="myInput" type="text" name="first" min="1" max="100">
<button id="submit">
submit
</button>
Используйте этот код:
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<input type="text" name="first" min="1" max="100">
<input type="submit" name="btnSubmit" id="btnSubmit">
<script type="text/javascript">
var data = new Array();
$('#btnSubmit').click(function() {
var value = parseInt($("input[name=first]").val(), 10);
if(!isNaN(value)){
data.push(value);
console.log(data);
}
});
</script>
</body>
</html>
Результат, который я получил с 4 раза нажмите кнопку