I have tried in many ways and so far without an exact success, for now what I want in the application is that I type the number in the input, and when I click enter, the numbers are aligned on the line, (preferably I wanted which is more dynamic, without having to press enter, same is in the first commented code, but I think it would be more difficult to solve), when I click enter, I want it to take the old numbers from the line and keep the new one typed, but only I was able to let this happen when I clicked a second time on Enter, the first time it removes the elements and the second one places the new ones.
let line = document.getElementById('line-one');
let number = document.getElementById('number');
let space = document.getElementById('space');
let submitBtn = document.getElementById('button-js');
//number.addEventListener('input', (e) => {
// let arr = [];
//
// for (let i = 0; i < number.value; i++) {
// arr.push(i + 1);
// let lineNumber = document.createElement('div');
// lineNumber.classList.add('line-number');
// lineNumber.innerHTML = arr[i];
//
// line.appendChild(lineNumber);
//
// if (number.value.isUndefined == true) {
// while (line.hasChildNodes()) {
// line.removeChild(line.lastChild);
// }
// arr.splice(0, arr.length);
// }
//
// console.log(typeof(number.value))
//
// }
//
// console.log(typeof(i));
//});
let count = 0;
submitBtn.addEventListener('click', e => {
e.preventDefault();
let arr = [];
count++;
// if (!line.hasChildNodes()) {
// for (let i = 0; i < number.value; i++) {
// arr.push(i + 1);
//
// let lineNumber = document.createElement('div');
// lineNumber.classList.add('line-number');
// lineNumber.innerHTML = arr[i];
//
// line.appendChild(lineNumber);
//
// }
//
// } else {
// while (line.hasChildNodes()) {
// line.removeChild(line.lastChild);
// }
// arr.splice(0, arr.lenght);
// }
do {
for (let i = 0; i < number.value; i++) {
arr.push(i + 1);
let lineNumber = document.createElement('div');
lineNumber.classList.add('line-number');
lineNumber.innerHTML = arr[i];
line.appendChild(lineNumber);
}
} while (!line.hasChildNodes());
if (count == 2) {
while (line.hasChildNodes()) {
line.removeChild(line.lastChild);
count = 0;
}
arr.splice(0, arr.length);
}
console.log(arr, count);
});#wrapper {
margin: 0;
padding: 0;
}
#wrapper .inputs {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
align-items: flex-start;
}
#wrapper input[type=number]{
margin-bottom: 20px;
}
#wrapper a.button {
margin: 20px 0;
background: #fff;
color: #000;
text-decoration: none;
padding: 6px 20px;
border: 1px solid #111;
border-radius: 3px;
}
#wrapper a.button:hover {
border-color: #666;
color: #666;
}
#wrapper #line-one {
border-top: 1px solid #111;
padding-top: 10px;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/main.css">
<title>Group of Symmetries</title>
</head>
<body>
<div id="wrapper">
<div class="inputs">
<label for="number">Number quantity</label>
<input id="number" type="text">
<label for="space">Space</label>
<input id="space" type="text">
<a href="" id="button-js" class="button">Enter</a>
</div>
<div id="line-one">
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>The last active code is the one with the Do While, which I had never used, only came in the head as a test, and I'm learning JS, so this project itself, that is, I already know that it should have 10 better ways and cleaner to do what I want.
To test the better application here link