Evento DOM onchange

Home › Fóruns › JavaScript › Evento DOM onchange

Visualizando 2 respostas da discussão
  • Autor
    Posts
    • 1 de agosto de 2021 às 22:50 #72669
      Roberto Carreira
      Participante

      Boa noite.
      Criei um script onde eu preciso que três selects mudem as configurações de css caso o usuário mude o valor em cada <option>.
      Os selects seguem essa estrutura:
      <select>
      <option value=’x’>X</option>
      <option value=’Y’>Y</option>
      <option value=’Z’>Z</option>
      </select>
      Caso o valor do option mude de X (default), as cores do select tem que mudar. Mas sempre está me retornando um erro quando olho no inspector do web browser (invalid assignment left-hand side).
      Vi que está relacionado aos atributos de comparação. Mas mesmo mudando o atributo no <script></script> o erro permanece. Vi em tudo quanto é tutorial de internet e não consigo encontrar o erro para este problema.
      Segue o script:

      <script>
      function mudarC(){
      var x = window.document.getElementsByTagName(‘select’)[0].value;
      if(x != “escolher”){
      document.body.div.select.style.background = “red”;
      document.body.div.select.style.color = “white”;
      document.body.div.select.style.font-weight = “bold”;
      }
      }
      </script>

      Agradeço a ajuda.

    • 2 de agosto de 2021 às 19:28 #72724
      Tutora Mayla
      Mestre

      Roberto, não é possível utilizar document.body.div.select para pegar o elemento, o correto seria window.document.getElementsByTagName('select')[0].
      É possível fazer var x = window.document.getElementsByTagName('select')[0] assim não é necessário buscar o valor várias vezes. E no if seria feito if(x.value != "escolher") assim é possível continuar pegando o valor do select.

      De forma semelhante para configurar o background poderia ser feito assim x.style.background = "red", seguindo este exemplo tente fazer as outras linhas e se atente que font-weight é escrito como fontWeight.

      Espero ter ajudado, quaisquer outras dúvidas basta entrar em contato.

    • 6 de agosto de 2021 às 16:55 #73023
      Roberto Carreira
      Participante

      Tutora Myala, boa tarde.
      Eu não havia atentado para o atributo .value depois de x. Só isso já resolveu o erro que aparecia no inspector.
      Entretanto, o browser ainda me retorna um erro:
      x.style is undefined

      Para todas as demais linhas para mudança de configuração de css, eu segui o que você disse no post acima. Segue o código.
      <script>
      function mudarC(){
      var x = window.document.getElementById(‘iprofessor’).value;
      if(x.value != “escolher”){
      x.style.background = “red”;
      x.style.color = “white”;
      x.style.fontWeight = “bold”;
      }
      }
      </script>
      Segue a configuração css para o select
      <style>
      select#iprofessor{
      background: orange;
      color: purple;
      font-weight: bold;
      }
      </style>
      Agradeço a ajuda 🙂

      • 6 de agosto de 2021 às 20:31 #73034
        Tutora Mayla
        Mestre

        Roberto, acredito que o problema esteja nesta linha var x = window.document.getElementById(‘iprofessor’).value; o correto aqui seria sem o .value sendo ele chamado apenas no if para testar a condição. Como está sendo atribuído a x o valor do elemento, não existe style para o valor. Tire o .value que o elemento sera pego como um todo e será possível configurar seu style.
        Espero ter ajudado, quaisquer outras dúvidas estamos a disposição.

  • Autor
    Posts
Visualizando 2 respostas da discussão
  • Você deve fazer login para responder a este tópico.