CODEWITHSUNDEEP
javascripthtml
Kayla
Kayla

Reputation: 15

Pulling values/text from dropdown menu

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>
...

Upvotes: 0

Views: 193

Answers (2)

King Friday
King Friday

Reputation: 26076

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>

Upvotes: 0

Vishal P Gothi
Vishal P Gothi

Reputation: 997

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>

Upvotes: 1

Related Questions