Change HTML via JS

Asked

Viewed 42 times

1

Good,

Below I have a clipping of an HTML page, where there is a Tspinner component, and I would like to change the attributes "data-min" and "data_max" when necessary.

  1. There are several Tspinner in html.
  2. I don’t have the "id" component since it is generated by PHP.
  3. To "class" is generic or is used by all Tspinner.
  4. The attribute "name" is unique in this case "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>

javascript

  • I think what you want is something like Document.querySelector('input[name=REG_MAXIMO]');

1 answer

4

To find an element by name, you can use the method getElementsByName, but since the name is not unique, it can return more than one element, note that the name is plural.

Having the elements, to exchange the value of a property, you can use the method setAttribute.

See an example that always increases property values data-min and data-max, using the above methods:

//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>

Documentations:

https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName

  • In case the name "is" unique

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.