CODEWITHSUNDEEP
javascripthtmlcreateelement
aids
aids

Reputation: 33

How to edit element from within document.createelement?

I have a function where I add a row to my table whenever I click a button. Within one of the table columns is a select dropdown menu with the numbers 1-10, but I don't know how to edit it from within the function. Here's the relevant code

table_row = document.createElement('tr')
score_column = document.createElement('td')
let album_location = document.getElementById('album_table')
album_location.appendChild(table_row)
album_location.appendChild(score_column)
score_column.appendChild(document.createElement('select'))

#^This is the line where I want to add options to the select

I want the select element to look like the below code, but I need to do it within the above code

let album_list = []
       
function display_albums(){
    document.getElementById('album_table').innerHTML = ''
    table_header = document.createElement('tr')
    table_album_header = document.createElement('th')
    table_artist_header = document.createElement('th')
    table_date_header = document.createElement('th')
    table_score_header = document.createElement('th')
    table_album_header.innerText = 'Album'
    table_artist_header.innerText = 'Artist'
    table_date_header.innerText = 'Date'
    table_score_header.innerText = 'Score'


    let album_location = document.getElementById('album_table')
    album_location.appendChild(table_header)
    table_header.appendChild(table_album_header)
    table_header.appendChild(table_artist_header)
    table_header.appendChild(table_date_header)
    table_header.appendChild(table_score_header)


    album_list.forEach(function (album){
        table_row = document.createElement('tr')
        album_column = document.createElement('td')
        artist_column = document.createElement('td')
        date_column = document.createElement('td')
        score_column = document.createElement('td')

        delete_button_button = document.createElement('button')
        delete_button_button.innerText = "Delete"
        delete_button_button.id = album.id
        delete_button_button.onclick = delete_album;

        album_column.innerText = album.album_name
        artist_column.innerText = album.artist
        date_column.innerText = album.release_date

        let album_location = document.getElementById('album_table')
        album_location.appendChild(table_row)
        table_row.appendChild(album_column)
        table_row.appendChild(artist_column)
        table_row.appendChild(date_column)
        table_row.appendChild(score_column)
        table_row.appendChild(delete_button_button)
        score_column.appendChild(document.createElement('select'))
        console.log(album)
    })

}

/*album_column = table_row.createElement('td')
artist_column = table_row.createElement('td')
date_column = table_row.createElement('td')
album_column.innerText = album.album_name
artist_column.innerText = album.artist
date_column.innerText = album.release_date
*/
function add_albums(){
    album_name = document.getElementById('addedInput').value
    album_list.push({
        album_name: album_name,
        artist: "Aidan Stone",
        release_date: 2022,
        score: NaN,
        id: album_name
    });
    display_albums();

}
function delete_album(event){
    const delete_button = event.target
    const idToDelete = delete_button.id
    album_list = album_list.filter(function (album){
        if (album.id === idToDelete){
            return false
        }
        else{
            return true
        }
    })
    display_albums();
}
<!DOCTYPE html>

<body style="height:3000px;">
<header class="header">
    <div class="search_bar_section">
         <form class="search_bar" >
        <div ><input class="search_bar_cool" type="text" placeholder="Search"></div>
         <img class="search_bar_button" src="pictures/search_bar.jpg">
         <!-- When I make it a button it fucks up the shape? -->
       </form>
         </div>

    <div class="header_section">

        <div class="nav_stuff">
            <li><span><a href="fantasy_website_website.html">Home</a></span></li>
            <li><span><a href="fantasy_website_website.html">Add Albums</a></span></li>
            <li><span><a href="about_me.html">About Me</a></span></li>
            <li><span><a href="fantasy_website_website.html">Other idk</a></span></li>
            <li><span><a href="about_me.html">Other idk</a></span></li>
        </div>
       
    </div>
    <div class="profile_section">
        <img  class="pfp" src="pictures/gkmc.jpg">

    </div>
</header>

<body>
  <div>
    <table border="10" width="100" class="album_table" id="album_table">
        <tr>
            <th>Album</th>
            <th>Artist</th>
            <th>Average Score</th>
            <th>Score</th>
        </tr>
    </table>
</div>
  <div class="form">
    <input type="text" placeholder="Search" id="addedInput",class = "Searchbar">
    <button type="button" id="addBtn" onclick="add_albums()"></button>
  </div>
 <body>

Upvotes: 0

Views: 329

Answers (2)

aids
aids

Reputation: 33

I figured it out.

score_box = document.createElement('select');
score_box.innerText = "Score";
 sc_o1 = document.createElement('option');
sc_o1.innerText = "1";
sc_o1.value = 1;
score_box.appendChild(sc_o1);

Upvotes: 0

user19562681
user19562681

Reputation:

Here's the HTML code that's modified by the JavaScript code with comments explaining each line.

It doesn't need to use a while() loop, but it's cleaner since your original example had a select HTML element with incrementing number values.

tableRow = document.createElement('tr')
scoreColumn = document.createElement('td')
scoreBox = document.createElement('select')

// Create the default option element
scoreBoxOption = document.createElement('option')

// Set the default option display text
scoreBoxOption.innerText = 'Score'

// Add the option element to the select element
scoreBox.appendChild(scoreBoxOption)

// Set a numeric index for creating each option value
scoreBoxOptionIndex = 0

// Loop through indexes until 10 elements are created
while (scoreBoxOptionIndex != 10) {
    // Create a new option element with the same variable
    scoreBoxOption = document.createElement('option')

    // Set the option display text with the numeric index value
    scoreBoxOption.innerText = 'Option ' + scoreBoxOptionIndex

    // Set the option value to the numeric index value
    scoreBoxOption.value = scoreBoxOptionIndex++

    // Add the option element to the select element
    scoreBox.appendChild(scoreBoxOption)
}

let albumLocation = document.getElementById('albumTable')
albumLocation.appendChild(tableRow)
tableRow.appendChild(scoreBox)
<table border="10" width="100" class="album-table" id="albumTable">
    <tr>
        <th>Album</th>
        <th>Artist</th>
        <th>Average Score</th>
        <th>Score</th>
    </tr>
</table>

Upvotes: 2

Related Questions