Всех приветствую!
Есть форма с инпутами, в которые можно внести данные по банковской карте. Эти данные по итогу должны выводиться в строки таблицы.
Эту проблему я решила с помощью:
const getData = () => {
document.querySelector('.text-item--1').appendChild(document.createTextNode(document.getElementById('sum').value));
}
Где .text-item--1 (id конкретной строки , куда вносятся данные), а sum(id инпута).
И написания кода, который при нажатии на кнопку вводятся данные:
btn.addEventListener('click', () =>{
function getCheck(){
if (getKey() != "" && check.checked){
console.log('click')
btn.disabled = false;
const user = [...document.querySelectorAll('input')].reduce((user, el) => {
user[el.name] = el.value;
return user;
}, {});
getData();
btnClear();
//document.querySelectorAll('.table-container__data').innerHTML = JSON.stringify(user, null, '');
} else {
btn.disabled = true;
}
}
getCheck()
});
Код хорошо срабатывает, но когда я нажимаю на кнопку данные заполняются сразу в две строки, а мне хотелось чтобы только при повторном нажатии на кнопку выводились данные во вторую строку.
Весь код (HTML) :
<div class="main-container__data">
<div class="data-item">
<form action="#" class="data-item__form">
<h2 class="data-item__text" >Сумма</h2>
<input type="number" name="sum" id="sum" autocomplete="off" onkeyup="this.value = this.value.replace (/\D/gi, '').replace (/^0+/, '')">
</form>
</div>
<div class="data-item">
<form action="#" class="data-item__form">
<h2 class="data-item__text">Номер карты</h2>
<input type="number" name="number" id="number" autocomplete="off" placeholder="1234 5678 9032 3456" title="Введите 12 цифр, пожалуйста"onkeyup="this.value = this.value.replace (/\D/gi, '').replace (/^0+/, '')">
</form>
</div>
<div class="data-item">
<form action="#" class="data-item__form ">
<h2 class="data-item__text">Имя</h2>
<input type="text" name="name" id="name" autocomplete="off" placeholder="Ivan" onKeyUp="if(/[^a-zA-Zа-яА-ЯёЁ .]/i.test(this.value)){this.value='';}">
</form>
</div>
<div class="data-item">
<form action="#" class="data-item__form">
<label for="">
<h2 class="data-item__text">Дата истечения</h2>
<input type="date" name="date" id="date" autocomplete="off">
</label>
</form>
</div>
<div class="data-item">
<form action="#" class="data-item__form">
<h2 class="data-item__text">CVV-код</h2>
<input type="password" name="cvv" id="cvv" autocomplete="off" title="Введите 3 цифры, пожалуйста" onkeyup="this.value = this.value.replace (/\D/gi, '').replace (/^0+/, '')">
</form>
</div>
</div>
<div class="main-container__check">
<label for="#" class="check-label">
<input type="checkbox" name="check" id="check" autocomplete="off">
<h4 class="check-text">Я согласен с правилами сервиса</h4>
</label>
</div>
<button type="submit" class="btn">Вывести</button>
</div>
<div class="table">
<table class="mainTable">
<tr class="table-container__data">
<td class="text-item--modify">Сумма</td>
<td class="text-item--modify">Номер карты</td>
<td class="text-item--modify">Имя</td>
<td class="text-item--modify">Дата истечения</td>
<td class="text-item--modify">CVV-код</td>
</tr>
<tr class="table-container__data" >
<td class="text-item text-item--1" for="sum"></td>
<td class="text-item text-item--2" for="number"></td>
<td class="text-item text-item--3" for="name"></td>
<td class="text-item text-item--4" for="date"></td>
<td class="text-item text-item--5" for="cvv"></td>
</tr>
<tr class="table-container__data">
<td class="text-item text-item--6"></td>
<td class="text-item text-item--7"></td>
<td class="text-item text-item--8"></td>
<td class="text-item text-item--9"></td>
<td class="text-item text-item--10"></td>
</tr>
<table>
</div>
И JS:
let btn = document.querySelector('.btn');
const form = document.querySelector('.data-item__form');
let inputs = document.querySelectorAll('input');
const getKey = (e) => {
let keyNum;
if(inputs.event) {
keyNum.inputs.event.keyUp;
} else if (e) {
keyNum = e.which;
}
console.log(keyNum)
};
document.onkeyup = getKey();
btn.addEventListener('click', () =>{
function getCheck(){
if (getKey() != "" && check.checked){
console.log('click')
btn.disabled = false;
const user = [...document.querySelectorAll('input')].reduce((user, el) => {
user[el.name] = el.value;
return user;
}, {});
getData();
btnClear();
//document.querySelectorAll('.table-container__data').innerHTML = JSON.stringify(user, null, '');
} else {
btn.disabled = true;
}
}
getCheck()
});
const getData = () => {
document.querySelector('.text-item--1').appendChild(document.createTextNode(document.getElementById('sum').value));
document.querySelector('.text-item--2').appendChild(document.createTextNode(document.getElementById('number').value));
document.querySelector('.text-item--3').appendChild(document.createTextNode(document.getElementById('name').value));
document.querySelector('.text-item--4').appendChild(document.createTextNode(document.getElementById('date').value));
document.querySelector('.text-item--5').appendChild(document.createTextNode(document.getElementById('cvv').value));
document.querySelector('.text-item--6').appendChild(document.createTextNode(document.getElementById('sum').value));
document.querySelector('.text-item--7').appendChild(document.createTextNode(document.getElementById('number').value));
document.querySelector('.text-item--8').appendChild(document.createTextNode(document.getElementById('name').value));
document.querySelector('.text-item--9').appendChild(document.createTextNode(document.getElementById('date').value));
document.querySelector('.text-item--10').appendChild(document.createTextNode(document.getElementById('cvv').value));
};
const btnClear = () => {
for (let i = 0; i < inputs.length; i++) {
if(i) {
inputs[i].value = "";
} else {
value.return();
}
}
};
