Populate a Select Box using javascript

Question

I've looked everywhere, but I can't find a solution to this problem. I've spent hours debugging, and I can't figure it how myself either. I'm sorry if this is an easy fix, I just can't seem to get it.

I have an empty select box as shown here:

<p id='draftChoice' class='hide'>
    Select draft choice:
    <select id='draftList'>
    </select>
    <input type=submit value='Draft' id='draft'>
</p>

When you click draft, this will run:

draftRound = function() {
var draftee = document.getElementById('#draftList').value;
prospectPool.splice(draftee, 1);
prospectPool.players.splice(0, 13);
};

However, I get an error: "Uncaught TypeError: Cannot read property 'value' of null" on this line:

var draftee = document.getElementById('#draftList').value;

My best guess is that it the value isn't being properly defined when I populate the box, which I do here:

createDraftList = function() {
//$('#right').html("");
//$('#draftList').html("");
for (var i = 0; i < prospectPool.players.length; i++) {
    $('#right').append("<h4>" + prospectPool.players[i].name + "</h4><div><p>" + prospectPool.players[i].overall + "<br>" + prospectPool.players[i].position + "<br>" + prospectPool.players[i].playerType);
}
$('#right').accordion();
$('#draftChoice').removeClass('hide');
    $(prospectPool.players).each(function() {
        $('#draftList').append($("<option>").attr('value',this.name).text(this.name))  + "</option>";
    });
 };

As a follow up question, I want to have multiple 'rounds' of this draft. When I do, I want to update the select box, as well as the accordion I have on the screen (populated in the last block of text). My current method used the two commented out lines. When I do this, the correct text shows up, but I lost my accordion formatting, and I have no idea why. Anybody who can help, I greatly appreciate it!

For the first part, you could also use var draftee = $('#draftList')[0].value; or even var draftee = $('#draftList').val();. On the second part... do you need to close your <p> and <div> tags? On your $('#right').append(... line? — Mike B.
– Mike B., Commented Mar 27, 2015 at 22:17
@MikeB. Thank you for pointing that out, I hadn't realized I didn't close those tags. — Kyle
– Kyle, Commented Mar 27, 2015 at 22:27

Mike Cluck · Accepted Answer · 2015-03-27 22:08:00Z

2

Change

document.getElementById('#draftList')

to

document.getElementById('draftList')

The # is only used in CSS. When you're grabbing an element by ID, it only needs to actual ID.

answered Mar 27, 2015 at 22:08

Mike Cluck

32.6k13 gold badges84 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mike B. Over a year ago

Yeah, the #id is for CSS and some JS libraries (like jQuery). Vanilla JS just uses the id by itself with no pound/hash symbol.

Kyle Over a year ago

Thank you! The simplest things can be so difficult to see. I'll accept the answer once the time is up. Any idea why I'm losing the accordion when I update the #right?

Mike Cluck Over a year ago

@Kyle Basically, a reference to certain elements is kept with the $('#right') object but those references are lost when you clear it out. See this question for the correct way to destroy and recreate an accordion.

Kyle Over a year ago

@MikeC thank you for that, I got the accordion working properly. I appreciate your help!

Collectives™ on Stack Overflow

Populate a Select Box using javascript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related