I am working on an assignment for a javascript course, to have a user input a name and make a selection from a dropdown menu, then click a button to add the input/selection to a map, then click another button to display the map data. After writing the code, I can enter the name and make the selection, but clicking the buttons doesn't do anything. Tried debugging, and I keep getting weird errors. The newest error is in the line declaring ADDBUTTON, saying document.getElementByID isn't a function. I have also been getting an error in the ADDBUTTON.onclick block that I can't assign a null variable.
Does anyone have any thoughts?
...
<!DOCTYPE html>
<html>
<head>
<title>Camp Whack-a-Doo Chore List</title>
</head>
<body>
<h1>Add to the Chore List</h1>
<p>Enter the Camper's name and their assigned chore, then click the Add button.
Click the Display button to view the list.</p>
<label for = "name">Camper Name</label>
<input type = "text" id = "name" /><br/>
<label for = "chore">Choose a Chore</label>
<select id = "chore">
<option value = "frontSweep">Front Room Sweep</option>
<option value = "backSweep">Back Room Sweep</option>
<option value = "outsideGrounds">Outside Grounds</option>
<option value = "toilet">Clean Toilet</option>
<option value = "sink">Clean Sink</option>
<option value = "trashSupplies">Trash Patrol and Supplies</option>
</select><br/>
<button id = "btnToAddToCL">Add to Chore List</button>
<button id = "btnToDisplayCL">Display Chore List</button>
<div id = "result"></div>
<script>
const ADDBUTTON = document.getElementByID('btnToAddToCL');
const DISPLAYBUTTON = document.getElementByID('btnToDisplayCL');
let choreList = new Map();
ADDBUTTON.onclick = function(){
let name = document.getElementByID('name');
let c = document.getElementByID('chore').value;
let chore = c.target.options[c.selectedIndex].text;
choreList.set(name.value, chore.value);
name.value = "";
chore.value = "";
};
DISPLAYBUTTON.onclick = function(){
let out = "";
for(let x of choreList.entries()){
out += x[0] + ": " + x[1];
out += "<br/>";
}
document.getElementByID('result').innerHTML = out;
}
</script>
</body>
</html>
...
2 Answers 2
Please check this snippet, I have corrected syntax errors and now it is working.
What was wrong?
document.getElementByID should be document.getElementById
document.getElementById('chore').value should be just document.getElementById('chore') as in this situation you the need the whole element object not just the value.
c.tagrets.options[c.selectedIndex].text; should be just c.options[c.selectedIndex].text; as c itself is the target.
<!DOCTYPE html>
<html>
<head>
<title>Camp Whack-a-Doo Chore List</title>
</head>
<body>
<h1>Add to the Chore List</h1>
<p>Enter the Camper's name and their assigned chore, then click the Add button.
Click the Display button to view the list.</p>
<label for = "name">Camper Name</label>
<input type = "text" id = "name" /><br/>
<label for = "chore">Choose a Chore</label>
<select id = "chore">
<option value = "frontSweep">Front Room Sweep</option>
<option value = "backSweep">Back Room Sweep</option>
<option value = "outsideGrounds">Outside Grounds</option>
<option value = "toilet">Clean Toilet</option>
<option value = "sink">Clean Sink</option>
<option value = "trashSupplies">Trash Patrol and Supplies</option>
</select><br/>
<button id = "btnToAddToCL">Add to Chore List</button>
<button id = "btnToDisplayCL">Display Chore List</button>
<div id = "result"></div>
<script>
const ADDBUTTON = document.getElementById('btnToAddToCL');
const DISPLAYBUTTON = document.getElementById('btnToDisplayCL');
let choreList = new Map();
ADDBUTTON.onclick = function(){
let name = document.getElementById('name');
let c = document.getElementById('chore');
let chore = c.options[c.selectedIndex].text;
choreList.set(name.value, chore);
name.value = "";
chore.value = "";
};
DISPLAYBUTTON.onclick = function(){
let out = "";
for(let x of choreList.entries()){
out += x[0] + ": " + x[1];
out += "<br/>";
}
document.getElementById('result').innerHTML = out;
}
</script>
</body>
</html>4 Comments
Almost Perfect
So I just went over some of the case spelling of "getElementById" and corrected and used your idea of setting variables of the elements prior to running the code.
How I debugged this was I commented out all of the things and uncommented one at a time testing things using console.log(value) to see if I was able to get a value.
This is a running version.
const ADDBUTTON = document.getElementById('btnToAddToCL');
const DISPLAYBUTTON = document.getElementById('btnToDisplayCL');
const CHORES = document.getElementById('chore');
const NAME = document.getElementById('name');
const choreList = new Map();
ADDBUTTON.onclick = function() {
console.log('add button click')
const camper = NAME.value;
const chore = CHORES.options[CHORES.selectedIndex].text;
choreList.set(camper, chore);
NAME.value = "";
CHORES.selectedIndex = 0;
};
DISPLAYBUTTON.onclick = function(){
let out = "";
for(let x of choreList.entries()){
out += x[0] + ": " + x[1];
out += "<br/>";
}
document.getElementById('result').innerHTML = out;
} <h1>Add to the Chore List</h1>
<p>Enter the Camper's name and their assigned chore, then click the Add button.
Click the Display button to view the list.</p>
<label for = "name">Camper Name</label>
<input type = "text" id = "name" /><br/>
<label for = "chore">Choose a Chore</label>
<select id = "chore">
<option value = "frontSweep">Front Room Sweep</option>
<option value = "backSweep">Back Room Sweep</option>
<option value = "outsideGrounds">Outside Grounds</option>
<option value = "toilet">Clean Toilet</option>
<option value = "sink">Clean Sink</option>
<option value = "trashSupplies">Trash Patrol and Supplies</option>
</select><br/>
<button id = "btnToAddToCL">Add to Chore List</button>
<button id = "btnToDisplayCL">Display Chore List</button>
<div id = "result"></div>
document.getElementByID isn't a function...yep, it'sdocument.getElementById. JS is case-sensitive. developer.mozilla.org/en-US/docs/Web/API/Document/… . See also this - much easier to find the answer that way.error in the ADDBUTTON.onclick block that I can't assign a null variable...please always paste the exact error message. Don't abbreviate, paraphrase or make any other changes, Then there is no ambiguity. Also, ensure the information you provide tells us exactly which line it occurs on. Saying it's within a particular block is not precise enough.