Всем привет, есть функция
appendInput, которая срабатывает при нажатии кнопки c классом
button_plus. Эта функция создаёт два input(а) и кнопку. Потом (по идее) пользователь вводит в эти input(ы) данные и нажимает на кнопку SAVE с классом
createChart. При нажатии на эту кнопку вызывается функция
valueFind, которая проходится по всем input(ам) и заносит их value в два массива, а потом эти массивы заносятся в
localStorage.
Проблема: значения input не заносятся в массивы, но в консоль выводится переменная с value input(а), которая должна заносится в массив. Ошибка: index.html:131 Uncaught TypeError: Cannot read properties of undefined (reading 'value')
at valueFind (index.html:131:69)
at HTMLInputElement.onclick (index.html:167:10)
Надеюсь, вы меня поняли.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Seymour+One&family=Sono:wght@200&family=Unbounded&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="stylePhone.css">
</head>
<body>
<header>
<article>dvoryashin</article>
</header>
<canvas id="myChart"></canvas>
<div id="app">
<main class="kvInput">
<input type="button" id="save_btn" value="SAVE">
<div class="tit">Ваши поля</div>
<div class="inputs">
</div>
<div class="button_plus" onclick="appendInput()">
<div class="plus">+</div>
</div>
<input type="button" value="Save" class="createChart" onclick="valueFind()">
</main>
</div>
<input type="button" onclick="download()" value="Скачать график">
</body>
<script
document.addEventListener('DOMContentLoaded', () => {
var inputSum = localStorage.getItem("inputs");
var inputs = document.querySelector(".inputs");
console.log(inputSum);
var valuesY = JSON.parse(localStorage.getItem("x"));
var valuesX = JSON.parse(localStorage.getItem("y"));
console.log(valuesX);
console.log(valuesY);
for(var i = 0; i <= inputSum; i++){
var div = document.createElement('div');
div.className = "pair";
div.innerHTML = "<input type='text' value='" + valuesX[i] +"' class='pairFirst'><input type='text' value='"+ valuesY[i] +"' class='pairSecond'><input type='button' onclick='valueFind()'>";
inputs.append(div);
}
new Chart(
document.querySelector('#myChart'),
{
type: 'line',
data: {
labels: valuesY,
datasets: [
{
label: 'Books bought',
data: valuesX,
borderColor: 'teal',
borderWidth: 5,
backgroundColor: 'teal',
cubicInterpolationMode: 'monotone',
borderWidth: 2
}
]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
}
);
})
function appendInput(){
var inputs = document.querySelector(".inputs");
var div = document.createElement('div');
div.className = "pair";
div.innerHTML = '<input type="text" class="pairFirst"><input type="text" class="pairSecond"><input type="button" onclick="valueFind()">';
inputs.append(div);
}
function valueFind(){
var valuesY2 = new Array();
var valuesX2 = new Array();
var input = document.querySelector(".inputs");
var inputs = document.querySelector('.inputs').children.length;
for(var i = 0; i <= inputs; i++){
var firstInput = input.querySelectorAll(".pairFirst")[i].value;
console.log(firstInput);
valuesY2[i] = firstInput;
var secondInput = document.querySelectorAll(".pairSecond")[i].value;
valuesX2[i] = secondInput;
console.log(valuesX2[i]);
}
console.log(valuesX2);
localStorage.setItem("x", JSON.stringify(valuesX2));
localStorage.setItem("y", JSON.stringify(valuesY2));
localStorage.setItem("input", inputs);
window.location.href = 'index2.html';
}
var download = function(){
var link = document.createElement('a');
link.download = 'filename.png';
link.href = document.getElementById('myChart').toDataURL()
link.click();
}
</script>
</html>
