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>
input
do tiposubmit
? Desse jeito voce esta submetendo o formulario para um endereco que o servidor nao consegue resolver (action=""
). Nao deveria colocar o tipobutton
para esseinput
? Ficaria assim:<input type="button" name="button" value="Select" id="selectBtn" />
document.getElementById('selectBtn').onclick = displayMags;
, voce estar sobreescrevendo a atribuicao anteriordocument.getElementById('selectBtn').onclick = select;
.