Здравствуйте! Делаю текстовый редактор на JS и мне нужно создавать таблицу и список по введенных пользователям данным. Нужно сделать проверку данных которые вводит пользователь.
<div class="wrapper style">
<h1>Choose whant to add:</h1>
<!--переключатель между созданием таблицы и списка-->
<form action="#" name="butCuuseF">
<input type="radio" name="r" id="table" checked>Table
<input type="radio" name="r" id="list">List
</form>
<!--Данные для создания таблицы-->
<div class="tableStyle">
<form action="#" name="rTable">
<p>Input count of row:
<input type="text" id="row" class="rowCell typeTxtTab"><span class="result"></span>
</p>
<p>Input count of cell:
<input type="text" id="cell" class="rowCell typeTxtTab"><span class="result"></span>
</p>
</form>
<form action="#" name="rTable">
<h3>Table style:</h3>
<p>Input width of cell:
<input type="text" id="wCell" class="rowCell typeTxtTab"><span class="result"></span>
</p>
<p>Input height of cell:
<input type="text" id="hCell" class="rowCell typeTxtTab"><span class="result"></span>
</p>
</form>
<form action="#" name="rTable">
<p>Border width:
<input type="text" id="borderW" class="rowCell typeTxtTab"><span class="result"></span>
Border type:
<select class="typeBorder">
<option>dotted</option>
<option>dashed</option>
<option>solid</option>
<option>double</option>
<option>groove</option>
<option>ridge</option>
<option>inset</option>
<option>outset</option>
</select>
Border color:
<select class="colorBorder">
<option>Yellow</option>
<option>IndianRed</option>
<option>Salmon</option>
<option>DarkViolet</option>
<option>Blue</option>
<option>LightBlue</option>
<option>Red</option>
<option>Maroon</option>
</select>
Border-collapse:
<select class="borderCollapse">
<option>collapse</option>
<option>separate</option>
</select>
</p>
</form>
</div>
<!--Данные для создания списка-->
<div class="styleList">
<form action="#" name="rList">
<p class="typeMarker">
<input type="button" value="Number" id="number" class="button">
<input type="button" value="Marker" id="mark" class="button">
</p>
<p class="countListItem">Input count of lif item:
<input type="text" id="countItem" class="rowCell typeTxt"><span class="result"></span>
</p>
<p class="TypeOfMark">
Type of mark:
<select class="typeMark">
<option>circle</option>
<option>disc</option>
<option>square</option>
<option>none</option>
</select>
<select class="typeNumber">
<option>decimal</option>
<option>decimal-leading-zero</option>
<option>lower-alpha</option>
<option>lower-greek</option>
<option>armenian</option>
<option>georgian</option>
<option>lower-roman</option>
<option>upper-alpha</option>
<option>upper-roman</option>
<option>none</option>
</select>
</p>
</form>
</div>
<!--Кнопка создания таблицы и возвращения к редактору-->
<div>
<form action="#">
<input type="button" value="Create" id="create" class="button">
<input type="button" value="Back" id="back" class="button">
</form>
</div>
var id = function (a) {
return document.getElementById(a);
};
var sel = function (a) {
return document.querySelector(a);
};
function back() { // скрывает блок создания таблицы и списка и возвращает редактор
sel('.main').style.display = 'flex';
sel('.wrapper').style.display = 'none';
}
id('back').addEventListener('click', back); //
id('create').addEventListener('click', function () {
/*сменные для создания таблицы*/
var td = id('cell').value;
var tr = id('row').value;
var wTd = id('wCell').value;
var hTd = id('hCell').value;
var borderW = id('borderW').value;
var typeBorder = sel('.typeBorder').value;
var colorBorder = sel('.colorBorder').value;
var borderCollapse = sel('.borderCollapse').value;
/*создание таблицы*/
var tableCreate = `<table style ="border: ${borderW}px ${typeBorder} ${colorBorder}; border-collapse: ${borderCollapse};">`;
for (var i = 0; i < tr; i++) {
tableCreate += "<tr>";
for (var j = 0; j < td; j++) {
tableCreate += `<td style = "border: ${borderW}px ${typeBorder} ${colorBorder}; width: ${wTd}px; height: ${hTd}px; border-collapse: ${borderCollapse};"></td>`;
}
tableCreate += '</tr>';
}
tableCreate += '</table>';
sel('.textTarea').value += tableCreate;
sel('.wrapper').style.display = 'none';
sel('.main').style.display = 'flex';
});
id('mark').addEventListener('click', function () { // создание маркированного списка
sel('.countListItem').style.display = 'block';
sel('.typeNumber').style.display = 'none';
sel('.TypeOfMark').style.display = 'block';
sel('.typeMark').style.display = 'block';
id('create').addEventListener('click', function () {
var coutItem = id('countItem').value;
var typeMark = sel('.typeMark').value;
var itemCreate = `<ul>`;
for (var i = 0; i < coutItem; i++) {
itemCreate += `<li style = "list-style-type: ${typeMark}"></li>`
}
itemCreate += `</ul>`
sel('.textTarea').value += itemCreate;
sel('.wrapper').style.display = 'none';
sel('.main').style.display = 'flex';
});
});
id('number').addEventListener('click', function () { // создание нумерованного списка
sel('.countListItem').style.display = 'block';
sel('.typeNumber').style.display = 'block';
sel('.TypeOfMark').style.display = 'block';
sel('.typeMark').style.display = 'none';
id('create').addEventListener('click', function () {
var coutItem = id('countItem').value;
var typeNumber = sel('.typeNumber').value;
var itemCreate = `<ol>`;
for (var i = 0; i < coutItem; i++) {
itemCreate += `<li style = "list-style-type: ${typeNumber}"></li>`
}
itemCreate += `</ol>`
sel('.textTarea').value += itemCreate;
sel('.wrapper').style.display = 'none';
sel('.main').style.display = 'flex';
});
});
// проверка input
var value = sel('.typeTxtTab').value;
var selAll = document.querySelectorAll('.typeTxtTab');
for (var i = 0; i <= selAll.length; i++) {
selAll[i].addEventListener('blur', function(){
if (this.value <=0 || this.value > 99) {
this.style.border = '2px solid red';
this.nextElementSibling.innerHTML = 'number must be > 0 and < 100';
this.nextElementSibling.style.color = 'red';
id('create').disabled = 1;
}
else if (this.value != this.value * 1) {
this.style.border = '2px solid red';
this.nextElementSibling.innerHTML = ' enter number, not later!';
this.nextElementSibling.style.color = 'red';
id('create').disabled = 1;
}
else {
this.style.border = '2px solid green';
this.nextElementSibling.innerHTML = ' done';
this.nextElementSibling.style.color = 'green';
id('create').disabled = 0;
}
});
};
проблема в том что если вводишь несколько импутов не верно, а несколько верно все равно создает таблицу и список как выйти с этой проблемы только с помощью чистого JS?
