0
Hello! This is the following exercise:
Click on the go button:
- Change the background color
- Show selection of newspapers in the textarea
When I click on the button, the page results in error 405. I am not finding the bug and neither in the console nor in VS is appearing error.
The HTML is like this:
<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>
Javascript looks like this:
<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>
That doesn’t happen because of this
inputof the kindsubmit? This way Oce is submitting the form to an address that the server cannot solve (action=""). You shouldn’t put the typebuttonfor thisinput? Would look like this:<input type="button" name="button" value="Select" id="selectBtn" />– Cmte Cardeal
Something else, when Voce assigns
document.getElementById('selectBtn').onclick = displayMags;, You may be overwriting the previous assignmentdocument.getElementById('selectBtn').onclick = select;.– Cmte Cardeal