wanderval

Pelo que entendi da critica do tetsuo é apenas em relação a logica de business não em relação alteração da database, acredito que ele apenas se referiu a modificar a query usada pelo backend para construir um response com menor complexidade para que seja enviada ao front, pra não delegar logica de business ao front

Coloca o html amigo ai ajudo alguém a simular o problema!

Tem alguns novos padrões de tipografia fluida no css, pode consultar esse artigo aqui https://moderncss.dev/container-query-units-and-fluid-typography/ CSS container queries - CSS: Cascading Style Sheets | MDN (mozilla.org) ex: https://jsbin.com/qesenuzese/edit?html,css,output

Seu problema está no javascript quando está adicionando style.display='block', "block" irá tornar os elementos em coluna neste caso poderia ser "inline-block" ou "inline-flex" JS: // Problema if(itemSelecionado.value == "Sim"){ document.getElementById("divPai").style.display='block'; } // Solução if(itemSelecionado.value == "Sim"){ document.getElementById("divPai").style.display='inline-flex'; } Alteração de código HTML - alterado nome da classe para reaproveitamento <!--Removido methodo de invocação onchange passado para o script--> <select id="itemSelecionado" required> <option value=""></option> <option value="Sim" style="font-size:18px;">Sim</option> <option value="Não" style="font-size:18px;">não</option> </select> <!--Alterado nome das classes para reaproveitamento--> <div id="divPai"> <div class="item">item1</div> <div class="item">item2</div> <div class="item">item3</div> <div class="item">item4</div> <div class="item">item5</div> <div class="item">item6</div> </div> CSS: #divPai { display: inline-flex; flex-wrap: wrap; gap: 12px; border: 1px solid red; padding: 6px; align-items: center; } #divPai .item { max-width: 90px; border: 1px solid green; } JS: document.getElementById("divPai").style.display='none'; // Substituido if/else por condicional ternário function funcAprendiz(){ var itemSelecionado = document.getElementById("itemSelecionado"); var elementStyle = document.getElementById("divPai").style; elementStyle.display = itemSelecionado.value == "Sim" ? 'inline-flex' : 'none'; } // Listener document.getElementById('itemSelecionado').addEventListener('change', funcAprendiz); JsBin: https://jsbin.com/geyeqahuqi/edit?html,css,js,output

Tá ai uma versão refatorada minha desse código, tava de bobeira achei interessante esses ifs ai, então decidi partir pra ignorancia e começar a destruir esse código kk,a constant é pq to mexendo com java ai surgiu a ideia rs. HTML modificado <div id="container"> <textarea maxlength="100"></textarea> <p id="idToto"></p> </div> JS modificado function constant() { return { COUNTER_PLURAL_MESSAGE: " caracteres digitados - máximo ", COUNTER_SINGLE_MESSAGE: " caracter digitado - máximo ", LIMIT_MESSAGE: "Limite de caracteres atingido!" }; } function characterCounter() { const max = 100; const container = document.getElementById('container'); const [textArea, inputMessage] = container.children; const amountCharacterTyped = textArea.value.length; const selectMessage = () => amountCharacterTyped === 1 ? constant().COUNTER_SINGLE_MESSAGE : constant().COUNTER_PLURAL_MESSAGE; if (amountCharacterTyped === 0){ inputMessage.innerHTML = ''; } else if (amountCharacterTyped > 0 && amountCharacterTyped < max) { inputMessage.innerHTML = amountCharacterTyped + selectMessage() + max; } else { inputMessage.innerHTML = constant().LIMIT_MESSAGE; } } function clear() { document.querySelector('#container p').inputMessage.innerHTML = ""; } document.querySelector('textarea').addEventListener("keyup", characterCounter); document.querySelector('textarea').addEventListener("focusout", clear); JSbin: https://jsbin.com/yaduyigomo/edit?html,js,output

A funcionalidade esperada não tá muito clara! A respeito do loop está sendo feito sim um "forEach" na qual sempre quando você clica no checkbox com o id "reason_all_velongings" é executado o forEach que adiciona no mesmo select os item contidos do array "optionReason" optionsReason = ['Conferencia', 'Desobstrução', 'Entrega ao Cliente/Propr',' Inspeção', 'Manobra', 'Venda' ]; optionsReason.forEach((reason) => { option = new Option(reason, reason.toLowerCase()); movementsSelect.options[movementsSelect.options.length] = option; }); Possível problema: 1- Está usando o mesmo ID "check-belongings" em diferentes checkbox

Bom Biel é um pouco difícil você mudar o comportamento dos componentes nativos, tanto que o Bootstrap usa um dropdown customizado. A melhor maneira realmente e customizando um. Ex: <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here Something else here Something else here Something else here Something else here Something else here Something else here</a> </div> </div> JsBin: https://jsbin.com/haqejeqefe/edit?html,css,output

Como não sei o seu Sistema Operacional fica dificil: - Pressione Ctrl + Shift + P: para abrir a lista de comando - Procure por "Indent Line" e "Outdent Line"

CSS *{ margin: 0; padding: 0; } .divPrincipal{ width: 200px; display: flex; flex-wrap: wrap; align-items: center; border: 2px solid blue;} .divPaiCor{ flex:1; margin-right: 10px; } .h1_1{ padding: 4px 4px; margin-bottom: 2px; background-color:#c1c1c1; cursor: default; } .divPaiSeta{ flex:0.5; font-size: 30px; text-align: center;} .b_1{ padding: 0px 4px; margin: 8px 10px; background-color:#cfcfcf; display: block; border: 1px solid green; cursor: default; } .divPaiSeta b:hover { background: #000; color: #fff; cursor: pointer; } .divPaiSeta b:active { background: gray; color: #000; user-select: none; } .divPaiCor h1:hover{ background: #000; color: #fff; cursor: pointer; } .selectedItem { background: #000; color: #fff; } JS let indexSelected; let elementSelected; let divPaiCor = document.querySelector(".divPaiCor"); let arrowUp = document.querySelector("#id1"); let arrowDown = document.querySelector("#id2"); function setaPraCima(){ let x = document.querySelectorAll(".h1_1"); indexSelected = returnPositionIndex(indexSelected - 1); divPaiCor.insertBefore(elementSelected, x[indexSelected]); } function setaPraBaixo(){ let y = document.querySelectorAll(".h1_1"); indexSelected = returnPositionIndex(indexSelected + 1); divPaiCor.insertBefore(elementSelected, y[indexSelected].nextSibling); } function returnPositionIndex(index) { let min = 0, max = 3; if(index <= min){ return min; } if(index >= max){ return max; } if(index > min || index < max){ return index; } } function selectItem(refItem) { let allElements = [...refItem.target.parentNode.children]; let index = allElements.indexOf(refItem.target); allElements.map(item => item.classList.remove("selectedItem")); refItem.target.classList.add("selectedItem"); indexSelected = index; elementSelected = refItem.target; } divPaiCor.addEventListener("click", selectItem); arrowUp.addEventListener("click", setaPraCima); arrowDown.addEventListener("click", setaPraBaixo); Jsbin: https://jsbin.com/wuwusinoro/edit?html,css,js,output

Biel, vou frizar mais uma vez a propriedade "id" deve ser único, por ser uma identidade, acho que você faz um copy/paste e fica duplicando essa informação, quando for usar elementos similares sempre será "class" Ex de código funcional function funcAprendiz(){ var itemSelecionado = document.getElementById('id1'); var ggInput = document.querySelectorAll(".toto"); const hasInputValue = () => itemSelecionado.value === "item1"; const mapInputValue = item => hasInputValue() ? "aluno" : ""; ggInput.forEach(inputItem => inputItem.value = mapInputValue(inputItem)); } JS Bin - JS Bin

function myFunction() { var textArea = document.getElementById("myDIV"); //cria o elemento const para = document.createElement("span"); para.setAttribute("style", "font-size:30px"); //adiciona o conteudo const node = document.createTextNode(textArea.value); // acrescenta nó ao elemento para.appendChild(node); // anexa o elemento ao corpo document.querySelector("body").appendChild(para); } Jsbin: https://jsbin.com/rikirezage/edit?js,output

Essa regra não tem sentido, o seletor deve conter apenas uma categoria, se houver outro select como dependência deve ser a lista de item dessa categoria, o que você tá tentando fazer é um malabarismo funcional, imagina quantas regras você teria que fazer pra gerar essas distinções baseadas no item! Se você está apenas se desafiando, tudo bem! Mas eu não vejo sendo uma boa usabilidade, afinal o usuário tem a experiência dele de forma progressiva, o que você está fazendo é fazer o usário escolher no primeiro seletor ir para o segundo seletor depois ele teria que voltar ao primeiro pra selecionar uma outra categoria para depois retornar para o segundo seletor e teria que analisar a cada seleção a cetegoria do item a ser selecionado. ex: pais -> produto(carro) -> marca automovel -> modelo -> ano -> cor Pais Produto Marca Modelo Ano Cor Brasil Carro Fiat Uno 2008 Black India Ford 2022 Silver Japão Wolks Branco Então vamos imaginar o seguinte cenário em diferentes paises temos diferetes marcas e tipos de produtos, nesse caso temos o "Carro", na india e japão existem marcas diferentes dos que existem no Brasil, então quando você seleciona o País os outros seletores vão ter um carregamento de informação diferente, o mesmo ocorre no seletor "Ano" afinal dependendo do modelo você terá uma lista de anos na qual o mesmo foi construido e vendido certo? por esse motivo a sepaação por categoria é util.

Olha quando você diz resumir o código você deve entender que existe uma diferença entre código generico e código pequeno O codigo generico nem sempre irá ficar pequeno mas será muito mais flexivel quando seguido de divisão de responsabilidade, agora o código pequeno ele foca na sua regra atual. Codigo Generico: https://jsbin.com/yukaregole/edit?html,js,output function funcTete() { var itemSelecionado=document.getElementById('aprendiz').value; if (itemSelecionado === '') { enableAndDisableItems(false); } if (itemSelecionado === 'item1') { enableAndDisableItems(null, ['verde', 'amarelo']) } if (itemSelecionado === 'item2') { enableAndDisableItems(true); } } function enableAndDisableItems(enable, options) { const items = document.querySelectorAll('#aluno')[0]; if(!options) { Array.from(items).forEach(item => setDisplayValue(item, enable)); } if (options) { Array.from(items).forEach(item => { let isValidItem = options.includes(item.value); setDisplayValue(item, isValidItem); }); } } function setDisplayValue(item, isValidItem) { item.style.display = isValidItem ? 'block' : 'none'; } Código pequeno: https://jsbin.com/wituqihofu/1/edit?html,js,output function funcTete() { var itemSelecionado=document.getElementById('aprendiz').value; const setDisplayItems = (item1, item2, item3) => { document.querySelector(".verde").style.display=item1; document.querySelector('.amarelo').style.display=item2; document.querySelector('.azul').style.display=item3; } if (itemSelecionado === '') { setDisplayItems('none', 'none', 'none'); } if (itemSelecionado === 'item1') { setDisplayItems('block', 'block', 'none'); } if (itemSelecionado === 'item2') { setDisplayItems('block', 'block', 'block'); } }

/*ADD CSS RULE*/ .main-content .container > .row { justify-content: center; } .col-md-3 { min-width: 285px !important; } Jsbin: https://jsbin.com/ravuloyuha/edit?html,css,output

Que bom que ajudou, sobre reagir ao post fica tranquilo eu to com esse numero 19 já faz mais de 4 anos, embora esse forum esteja ativo, acho que a equipe de desenvolvimento já não atualiza ou corrigi os bugs!