1

Boas,

Logo abaixo tenho um recorte de uma pagina HTML, onde tem um componente Tspinner, e gostaria de alterar os atributos "data-min" e "data_max" quando for necessário.

  1. Existe vários Tspinner no html.
  2. Não tenho o "id" do componente já que o mesmo é gerado pelo PHP.
  3. A "class" é genérica ou seja utilizada por todos Tspinner.
  4. O atributo "name" é único, neste caso "name=REG_MAXIMO".

<div class="fb-inline-field-container form-line" style="display: inherit;vertical-align:top;;width: 200px">
    <div class="input-group spinner" data-trigger="spinner">
        
        <input class="form-control tfield" widget="tspinner" title="" name="REG_MAXIMO" value="4" type="text" data-min="0" data-max="100" data-step="1" style="text-align:right;width:100%;" relwidth="100%" id="tspinner_1786988191" data-original-title="Qtde Máxima da Regra">
        
        <div class="input-group-addon">
            <a href="javascript:;" class="spin-up" data-spin="up">
                <i class="fa fa-caret-up"></i>
            </a> 
            
            <a href="javascript:;" class="spin-down" data-spin="down">
                <i class="fa fa-caret-down"></i>
            </a> 
        </div>
        
    </div>
</div>

1
  • acho que o que vc quer é algo do tipo document.querySelector('input[name=REG_MAXIMO]'); 7/10/2020 às 3:02

1 Resposta 1

4

Para encontrar um elemento pelo nome, você pode utilizar do método getElementsByName, porém como o nome não é único, ele pode retornar mais de um elemento, perceba que o nome está no plural.

Tendo os elementos, para trocar o valor de uma propriedade, você pode utilizar do método setAttribute.


Veja um exemplo que sempre incrementa os valores das propriedades data-min e data-max, utilizando os métodos citados:

//Variáveis para incrementar os valores das propriedades
let min = 0;
let max = 100;

//Função exemplo
function changeSpinner() {
  //Busco todos os elementos com o nome REG_MAXIMO...
  const spinners = document.getElementsByName("REG_MAXIMO");

  if (spinners) {
    min++;
    max++;

    //Como o nome não é único no DOM, pode conter mais de um elemento
    for (const spinner of spinners) {
      //Aqui você coloca os valores desejados
      spinner.setAttribute("data-min", min);
      spinner.setAttribute("data-max", max);

      //Exibe os valores atuais, após as alterações no console
      console.log(spinner.getAttribute("data-min"));
      console.log(spinner.getAttribute("data-max"));
    }
  }
}
<div class="fb-inline-field-container form-line" style="display: inherit;vertical-align:top;;width: 200px">
    <div class="input-group spinner" data-trigger="spinner">
        
        <input class="form-control tfield" widget="tspinner" title="" name="REG_MAXIMO" value="4" type="text" data-min="0" data-max="100" data-step="1" style="text-align:right;width:100%;" relwidth="100%" id="tspinner_1786988191" data-original-title="Qtde Máxima da Regra">
        
        <div class="input-group-addon">
            <a href="javascript:;" class="spin-up" data-spin="up">
                <i class="fa fa-caret-up"></i>
            </a> 
            
            <a href="javascript:;" class="spin-down" data-spin="down">
                <i class="fa fa-caret-down"></i>
            </a> 
        </div>
        
    </div>
</div>

<button onclick="changeSpinner()">Mudar o spinner</button>


Documentações:

https://developer.mozilla.org/pt-BR/docs/Web/API/Element/setAttribute

https://developer.mozilla.org/pt-BR/docs/Web/API/Document/getElementsByName

1
  • No caso o nome "é" único
    – le314u
    7/10/2020 às 7:07

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 .