1

Tenho o seguinte formulário:

<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<button>GERAR</button>

Nele o usuário seleciona o valor da largura da borda no seguinte bloco:

<div class="forma"></div>

Criei o método gerar()

const gerar = _ => {
  let widths = [];
  cps.forEach(c => widths.push(`${c.value}px`));
  frm.style.borderStyle = 'solid';
  frm.style.borderWidth = widths.join(' ');
};

o qual percorre o objeto cps e adiciona seu valor no objeto widths, depois define a propriedade borderWidth com os valores do objeto widths.

Até aqui tudo bem, como pode ser visto abaixo o código funciona normalmente.

let btn = document.querySelector('button');
let cps = document.querySelectorAll('[type="number"]');
let frm = document.querySelector('.forma');

const gerar = () => {
  let widths = [];
  cps.forEach(c => widths.push(`${c.value}px`));
  frm.style.borderStyle = 'solid';
  frm.style.borderWidth = widths.join(' ');
};

btn.onclick = gerar;
input[type="number"] {
  width: 40px;
}
.forma {
  height: 100px;
  margin: 14px;
  width: 100px;
}
<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<button>GERAR</button>

<div class="forma"></div>

O problema

Um desses campos, poderá ter seu valor maior que os outros, ex: 0 10 60 10 / 50 20 20 40.

Tenho que definir a propriedade borderColor e o campo que tiver seu valor maior, terá a cor diferente, ex:

0 10 60 10  = "transparent #f7f7f7 #069 #f7f7f7"
50 20 20 40 = "#069 #f7f7f7 #f7f7f7 #f7f7f7"

Como posso resolver ?

0

2 Respostas 2

1

Pode fazer da seguinte forma: No click começa por gerar a mesma cor para todos os borders, considerando que os que estão a 0px acabam por não ser visíveis. Depois acha o maior utilizando Math.max sobre os valores dos <input> e acha também qual <input> tem o maior, e com base na sua posição atribui o borderColor que interessa, sendo este um dos quatro disponíveis:

  • borderTopColor
  • borderRightColor
  • borderBottomColor
  • borderLeftColor

Exemplo:

let btn = document.querySelector('button');
let cps = document.querySelectorAll('[type="number"]');
let frm = document.querySelector('.forma');

const borders = ["borderTopColor", "borderRightColor", 
                 "borderBottomColor", "borderLeftColor"];

const gerar = () => {
  let widths = [];
  cps.forEach(c => widths.push(`${c.value}px`));
  frm.style.borderStyle = 'solid';
  frm.style.borderWidth = widths.join(' ');
  frm.style.borderColor = '#b7b7b7'; //aplica a cor normal a todos
  
  //pega em cada um dos inputs e mapeia para um array apenas com os numeros
  let nums = [...cps].map(caixa => Number(caixa.value)); 
  
  let maior = Math.max(...nums); //acha o maior     
  let posicaoMaior = nums.findIndex(x => x === maior); //acha a posição do maior
  frm.style[borders[posicaoMaior]] = '#069'; //mete a cor diferente no maior
};

btn.onclick = gerar;
input[type="number"] {
  width: 40px;
}
.forma {
  height: 100px;
  margin: 14px;
  width: 100px;
}
<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<button>GERAR</button>

<div class="forma"></div>

Obs: Pus um cinzento ligeiramente mais escuro só para se ver melhor.

Achei o maior utilizando o spread operator e a sua posição utilizando findIndex.

O exemplo acima funciona para quando apenas tem um elemento maior que os outros. Se houver a possibilidade de ter mais do que um, e quiser que todos fiquem com a cor de maior basta alterar um pouco a forma como isso é aplicado, utilizando por exemplo um forEach e comparando cada valor se é igual ao maior:

let btn = document.querySelector('button');
let cps = document.querySelectorAll('[type="number"]');
let frm = document.querySelector('.forma');

const borders = ["borderTopColor", "borderRightColor", 
                 "borderBottomColor", "borderLeftColor"];

const gerar = () => {
  let widths = [];
  cps.forEach(c => widths.push(`${c.value}px`));
  frm.style.borderStyle = 'solid';
  frm.style.borderWidth = widths.join(' ');
  frm.style.borderColor = '#b7b7b7'; 
  
  let nums = [...cps].map(caixa => Number(caixa.value)); 
  let maior = Math.max(...nums);

  //aplica o maior agora com um forEach
  cps.forEach((caixa, posicao) => { 
    if (Number(caixa.value) === maior){
      frm.style[borders[posicao]] = '#069';
    }
  });
};

btn.onclick = gerar;
input[type="number"] {
  width: 40px;
}
.forma {
  height: 100px;
  margin: 14px;
  width: 100px;
}
<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<button>GERAR</button>

<div class="forma"></div>

1

Acredito que você deva armazenar apenas a entrada em um {Array} para poder filtrar e encontrar o índice de maior valor... imaginando que sua entrada segue o mesmo esquema de ordem definido pelo atributo border-color (top,right,bottom,left) podes usar reduce():

let fakeEntires = [13, 8, 13, 2]

function getIndexFromMajor(itens) {
    return itens.reduce((iMax, x, i, arr) => x > arr[iMax] ? i : iMax, 0)
}

let index = getIndexFromMajor(fakeEntires)

console.log(`index:${index}, value:${fakeEntires[index]}`)

Contudo este método irá retornar apenas a primeira ocorrência (index) caso hajam valores duplicados, acredito que neste caso o ideal seria não retornar neste caso, podes usar o operador "Spread" ... e new Set() para verificar entradas duplicadas caso hajam, switch() para verificar o numero de entradas resultantes e percorrer a matriz original em busca do índice de valor maior.

Você não especificou como aplicaria esta "cor diferente" a borda então vou presumir usar vermelho no exemplo a seguir onde as "cores" também estão em uma matriz respeitando a ordem definida pelo atributo border-color.

Caso a busca não seja satisfatória o índice negativo -1 não aplicara mudanças na matriz de cores, exemplo completo:

let btn = document.querySelector('button');
let cps = document.querySelectorAll('[type="number"]');
let frm = document.querySelector('.forma');

const gerar = () => {

  function getIndexFromMajor(itens) {
    // check duplicates values
    let filter = [...new Set(itens)]
    // expected four (4) itens
    if ( filter.length === 4 ) {
        // no duplicates
        return itens.reduce((iMax, x, i, arr) => Number(x) > Number(arr[iMax]) ? i : iMax, 0)
    } else {
        switch(filter.length){
            case 3:
            case 2:
                // check number of clear duplicates
                let target = Math.max(...filter),
                    result = []
                itens.forEach((item, index) => {
                    if ( item === target ) {
                        result.push(index)
                    }
                })
                return (result.length === 1) ? result[0] : -1
            break
            case 1:
            default:
                -1
            break
        }
    }
  }

  let inputs = [],  // user input values
      borders = [], // borders width
      defColors = [ // default colors
         '#27bc3c', // top
         '#27bc3c', // right
         '#27bc3c', // bottom
         '#27bc3c'  // left
      ]
      
  cps.forEach(c => inputs.push(Number(c.value))); // number
  inputs.forEach(i => borders.push(`${i}px`));    // string
  
  frm.style.borderStyle = 'solid';
  frm.style.borderWidth = borders.join(' ');
  // change border color (on great border)
  defColors[getIndexFromMajor(inputs)] = '#ff0000' // red
  frm.style.borderColor = defColors.join(' ')
};

btn.onclick = gerar;
input[type="number"] {
  width: 40px;
}
.forma {
  height: 100px;
  margin: 14px;
  width: 100px;
}
<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<button>GERAR</button>

<div class="forma"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .