Eu tentei de várias formas e até agora sem um sucesso exato, por enquanto o que eu quero na aplicação é que eu digite o número no input, e quando clico enter, os números são alinhados na linha, (de preferencia eu queria que fosse mais dinamico, sem precisar apertar enter, igual está no primeiro código comentado, mas acho que seria mais dificil de resolver), ao clicar enter, quero que na hora tire os números antigos da linha e fique com o novo digitado, mas só consegui deixar para acontecer isso quando eu clico uma segunda vez no Enter, a primeira vez remove os elementos e a segunda coloca os novos.
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>
O último código ativo é o com o Do While, que eu nunca tinha usado, só veio na cabeça como teste, e eu estou aprendendo JS, por isso esse projeto próprio, ou seja, já sei que deve ter 10 formas melhores e mais limpas de fazer o que eu quero.
Para testar a aplicação melhor por aqui https://jsfiddle.net/eqmkne3u/