0

Olá! Esse exercício é o seguinte:

Clicar no botão vai:

  • Mudar a cor do fundo
  • Mostrar a seleção de jornais no textarea

Quando clico no botão, a página resulta em erro 405. Não estou encontrando o bug e no console nem no VS está aparecendo erro.

O HTML está assim:

<body>
  <h1>Radio buttons and Checkboxes</h1>
  <form action="" method="post" id="backg">
    <div>Please select a background color for the form:</div>
    <div>
      <label><input type="radio" name="colors" value="green" />Green </label>
      <label
        ><input type="radio" name="colors" value="yellow" />Yellow
      </label>
      <label><input type="radio" name="colors" value="lime" />Lime </label>
      <label><input type="radio" name="colors" value="aqua" />Aqua </label>
    </div>
    <div>
      Please select your favorite magazines: <br />
      <label>
        <input type="checkbox" name="mags" value="The New Yorker" />
        The New Yorker </label
      ><br />
      <label>
        <input type="checkbox" name="mags" value="WIRED" />
        WIRED </label
      ><br />
      <label>
        <input type="checkbox" name="mags" value="National Geographic" />
        National Geographic </label
      ><br />
      <label>
        <input type="checkbox" name="mags" value="Sports Illustrated" />
        Sports Illustrated
      </label>
    </div>
    <div>
      <label>
        Your magazine selections:<br />
        <textarea name="result" cols="30" rows="4" readonly></textarea>
      </label>
    </div>
    <div>
      <input type="submit" name="button" value="Select" id="selectBtn" />
      <input type="reset" name="Reset" value="Clear" id="resetBtn" />
    </div>
  </form>
</body>

O javascript está assim:

<script>
  function select() {
    const myForm = document.getElementById('backg');
    const colors = myForm['colors'];

    for (let i = 0; i < colors.length; i++) {
      if (colors[i].checked) {
        let userChoice = colors[i].value;
        document.querySelector('body').style.backgroundColor = userChoice;
      }
    }
  }

  function displayMags() {
    const myFormTwo = document.getElementById('backg');
    const magazine = selectForm['mags'];

    let message = magazine;
    myFormTwo['result'].value = message;
  }

  document.getElementById('selectBtn').onclick = select;
  document.getElementById('selectBtn').onclick = displayMags;
</script>
2
  • Isso nao acontece por causa desse input do tipo submit? Desse jeito voce esta submetendo o formulario para um endereco que o servidor nao consegue resolver (action=""). Nao deveria colocar o tipo button para esse input? Ficaria assim: <input type="button" name="button" value="Select" id="selectBtn" /> Commented 5/11/2020 às 0:30
  • Outra coisa, quando voce atribui document.getElementById('selectBtn').onclick = displayMags;, voce estar sobreescrevendo a atribuicao anterior document.getElementById('selectBtn').onclick = select;. Commented 5/11/2020 às 0:33

0

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

Pesquise outras perguntas com a tag .