How can I change a value of css property with a button click

Question

I am trying to changing the value of border radius of a figure. When I click the button, the values of inputs have to change the values already set in the property, but I don't know how to set these values in CSS properties.

I tried to set selecting using document.getElementByClassName and attributing the input value, but it doesn't work.

class CaixaPrevisora {
  constructor(valor) {
    this.formulario = document.querySelector('.formulario')
    this.valor = valor;
    this.eventos();
  }
  eventos() {
    this.formulario.addEventListener('submit', e => {
      this.handleSubmit(e);
    });
  }
  handleSubmit(e) {
    e.preventDefault();
    const camposValidos = this.camposSaoValidos();
    var retangulo = document.getElementsByClassName('retangulo')
    if (camposValidos) {
      retangulo.style.width = direitacima
    }

  }
  camposSaoValidos() {
    let valid = true;

    for (let errorText of this.formulario.querySelectorAll('.error-text')) {
      errorText.remove();
    }

    for (let campo of this.formulario.querySelectorAll('.validos')) {
      const label = campo.previousElementSibling.innerHTML;
      if (!campo.value) {
        this.criaErro(campo, `${label} não pode estar em branco`);
        valid = false;
      }
      if (campo.classList.contains('direitacima')) {
        if (!this.validaDireitaCima(campo)) valid = false;
      }
      if (campo.classList.contains('esquerdacima')) {
        if (!this.validaDireitaCima(campo)) valid = false;
      }
      if (campo.classList.contains('direitabaixo')) {
        if (!this.validaDireitaCima(campo)) valid = false;
      }
      if (campo.classList.contains('esquerdabaixo')) {
        if (!this.validaDireitaCima(campo)) valid = false;
      }
    }
    return valid;
  }
  validaDireitaCima(campo) {
    let valid = true;
    const direitaCima = campo.value;
    if (!direitaCima < 0) {
      this.criaErro(campo, 'O campo não pode estar negativo')
      valid = false;
    }
    return valid;
  }
  validaEsquerdaCima(campo) {
    let valid = true;
    const esquerdaCima = campo.value;
    if (!esquerdaCima < 0) {
      this.criaErro(campo, 'O campo não pode estar negativo')
      valid = false;
    }
    return valid;
  }
  validaDireitaBaixo(campo) {
    let valid = true;
    const direitaBaixo = campo.value;
    if (!direitaBaixo < 0) {
      this.criaErro(campo, 'O campo não pode estar negativo')
      valid = false;
    }
    return valid;
  }
  validaEsquerdaBaixo(campo) {
    let valid = true;
    const esquerdaBaixo = campo.value;
    if (!esquerdaBaixo < 0) {
      this.criaErro(campo, 'O campo não pode estar negativo')
      valid = false;
    }
    return valid;
  }
  criaErro(campo, msg) {
    const div = document.createElement('div');
    div.innerHTML = msg;
    div.classList.add('error-text');
    campo.insertAdjacentElement('afterend', div);

  }
}

const novo = new CaixaPrevisora();

<section class="limite">
  <form action="/" method="POST" class="formulario">
    <h4>Entre com as medidas para arredondar os vértices</h2>
      <label>Vertice Superior Direito</label>
      <input type="text" id="bordaDireita" class="direitacima validos">
      <label>Vértice Superior Esquerdo</label>
      <input type="text" id="bordaEsquerda" class="esquerdacima validos">
      <label>Vértice Inferior Direito</label>
      <input type="text" id="bordaDireitaCima" class="direitabaixo validos">
      <label>Vértice Inferior Esquerdo</label>
      <input type="text" id="bordaEsquerdaBaixo" class="esquerdabaixo validos">
      <button type="submit" id="modificar">Aplicar</button>
  </form>
  <section class="retangulo" id="modificacao"></section>
</section>

The value its the value of the input i want to change in css — Marco Aurélio Lopes Júnior
– Marco Aurélio Lopes Júnior, Commented Apr 12, 2021 at 14:25
So the problem is that you don't know how to get the value of the direitacima input? — Marco
– Marco, Commented Apr 12, 2021 at 14:34
getElementsByClassName('retangulo') returns a collection of nodes, not just one element but you are trying to set its style. You should see an error message on you browser's dev tools console. — A Haworth
– A Haworth, Commented Apr 12, 2021 at 14:49

Marco · Accepted Answer · 2021-04-12 14:45:15Z

1

In the handleSubmit function (I'm assuming that the issue is there) you're referring to direitacima, but you're not actually declaring it as a variable.

You can do that by writing something like:

var direitacima = document.querySelector('.direitacima').value

You should also be aware that document.getElementsByClassName returns multiple items, so you can't just set style on it (like with retangulo.style.width). You can add [0] after retangulo, or use querySelector('.retangulo'), which would only return one item.

answered Apr 12, 2021 at 14:45

Marco

6246 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marco Over a year ago

Great to hear! :) Would you mind marking my answer accepted?

MB_ · Accepted Answer · 2021-04-12 15:15:15Z

Try this

  handleSubmit(e) {
    e.preventDefault();
    const camposValidos = this.camposSaoValidos();
    var retangulo = document.getElementById("modificacao");
    var borderRightTop = document.getElementById('bordaDireita').value;    // here
    // Do same for others
    // var borderLeftTop = ...
    // var borderLeftBottom = ...
    if (camposValidos) {
      retangulo.style.borderTopRightRadius = borderRightTop + 'px'         // here
    }
  }

Try my demo + largura & altura :

class CaixaPrevisora {
  constructor(valor) {
    this.formulario = document.querySelector(".formulario");
    this.valor = valor;
    this.eventos();
  }
  eventos() {
    this.formulario.addEventListener("submit", e => {
      this.handleSubmit(e);
    });
  }
  handleSubmit(e) {
    e.preventDefault();
    const camposValidos = this.camposSaoValidos();
    var retangulo = document.getElementById("modificacao");
    var width = document.getElementById('largura').value
    var height = document.getElementById('altura').value
    var borderRightTop = document.getElementById('bordaDireita').value;
    var borderLeftTop = document.getElementById('bordaEsquerda').value;
    var borderRightBottom = document.getElementById('bordaDireitaCima').value;
    var borderLeftBottom = document.getElementById('bordaEsquerdaBaixo').value;
    if (camposValidos) {
      retangulo.style.width = width + 'px';
      retangulo.style.height = height + 'px';
      retangulo.style.borderTopRightRadius = borderRightTop + 'px'
      retangulo.style.borderTopLeftRadius = borderLeftTop + 'px'
      retangulo.style.borderBottomRightRadius = borderRightBottom + 'px'
      retangulo.style.borderBottomLeftRadius = borderLeftBottom + 'px'
    }
  }
  camposSaoValidos() {
    let valid = true;

    for (let errorText of this.formulario.querySelectorAll(".error-text")) {
      errorText.remove();
    }

    for (let campo of this.formulario.querySelectorAll(".validos")) {
      const label = campo.previousElementSibling.innerHTML;
      if (!campo.value) {
        this.criaErro(campo, `${label} não pode estar em branco`);
        valid = false;
      }
      if (campo.classList.contains("direitacima")) {
        if (!this.validaDireitaCima(campo)) valid = false;
      }
      if (campo.classList.contains("esquerdacima")) {
        if (!this.validaDireitaCima(campo)) valid = false;
      }
      if (campo.classList.contains("direitabaixo")) {
        if (!this.validaDireitaCima(campo)) valid = false;
      }
      if (campo.classList.contains("esquerdabaixo")) {
        if (!this.validaDireitaCima(campo)) valid = false;
      }
    }
    return valid;
  }
  validaDireitaCima(campo) {
    let valid = true;
    const direitaCima = campo.value;
    if (!direitaCima < 0) {
      this.criaErro(campo, "O campo não pode estar negativo");
      valid = false;
    }
    return valid;
  }
  validaEsquerdaCima(campo) {
    let valid = true;
    const esquerdaCima = campo.value;
    if (!esquerdaCima < 0) {
      this.criaErro(campo, "O campo não pode estar negativo");
      valid = false;
    }
    return valid;
  }
  validaDireitaBaixo(campo) {
    let valid = true;
    const direitaBaixo = campo.value;
    if (!direitaBaixo < 0) {
      this.criaErro(campo, "O campo não pode estar negativo");
      valid = false;
    }
    return valid;
  }
  validaEsquerdaBaixo(campo) {
    let valid = true;
    const esquerdaBaixo = campo.value;
    if (!esquerdaBaixo < 0) {
      this.criaErro(campo, "O campo não pode estar negativo");
      valid = false;
    }
    return valid;
  }
  criaErro(campo, msg) {
    const div = document.createElement("div");
    div.innerHTML = msg;
    div.classList.add("error-text");
    campo.insertAdjacentElement("afterend", div);
  }
}

const novo = new CaixaPrevisora();

.error-text {
  color: red;
}

.retangulo {
  background: #6600FF;
}

<section class="limite">
  <form action="/" method="POST" class="formulario">
    <h4>Entre com as medidas para arredondar os vértices</h4>
    <br />
    <label>Largura</label>
    <input type="text" id="largura" class="largura validos">
    <br />
    <label>Altura</label>
    <input type="text" id="altura" class="altura validos">
    <br />
    <label>Vertice Superior Direito</label>
    <input type="text" id="bordaDireita" class="direitacima validos">
    <br />
    <label>Vértice Superior Esquerdo</label>
    <input type="text" id="bordaEsquerda" class="esquerdacima validos">
    <br />
    <label>Vértice Inferior Direito</label>
    <input type="text" id="bordaDireitaCima" class="direitabaixo validos">
    <br />
    <label>Vértice Inferior Esquerdo</label>
    <input type="text" id="bordaEsquerdaBaixo" class="esquerdabaixo validos">
    <br />
    <button type="submit" id="modificar">Aplicar</button>
  </form>
  <section class="retangulo" id="modificacao"></section>
</section>

Collectives™ on Stack Overflow

How can I change a value of css property with a button click

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related