How to edit element from within document.createelement?-CodePudding

I have a function where I add a row to my table whenever I click a button. Within one of the table colloums 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_collumn = document.createElement('td')
let album_location = document.getElementById('album_table')
album_location.appendChild(table_row)
album_location.appendChild(score_collumn )
score_collumn.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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'pictures.css' %}">
    <link rel="stylesheet" href="{% static 'my_albums.css' %}">
    <link rel="stylesheet" href="{% static 'other.css' %}">
    <link rel="stylesheet" href="{% static 'text.css' %}">
    <link rel="stylesheet" href="{% static 'header_stuff2.css' %}">

    <script>
       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_collumn = document.createElement('td')
            artist_collumn = document.createElement('td')
            date_collumn = document.createElement('td')
            score_collumn = 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_collumn.innerText = album.album_name
            
            
           
            artist_collumn.innerText = album.artist
            
            date_collumn.innerText = album.release_date
            let album_location = document.getElementById('album_table')
            album_location.appendChild(table_row)
            table_row.appendChild(album_collumn)
            table_row.appendChild(artist_collumn)
            table_row.appendChild(date_collumn)
            table_row.appendChild(score_collumn)
            table_row.appendChild(delete_button_button)
            score_collumn.appendChild(document.createElement('select'))
            console.log(album)
        })

    }

/*album_collumn = table_row.createElement('td')
artist_collumn = table_row.createElement('td')
            date_collumn = table_row.createElement('td')
            album_collumn.innerText = album.album_name
            artist_collumn.innerText = album.artist
            date_collumn.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();
    }
    </script>
</head>
<body style="
height:3000px;
">
 
<header >
    <div >
         <form  >
        <div ><input  type="text" placeholder="Search"></div>
         <img  src="pictures/search_bar.jpg">
         <!-- When I make it a button it fucks up the shape? -->
       </form>
         </div>

    <div >

        <div >
            <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 >
        <img   src="pictures/gkmc.jpg">

    </div>
</header>

<body>


  <div>
    <table border="10" width="100"  id="album_table">
        <tr>
            <th>Album</th>
            <th>Artist</th>
            <th>Average Score</th>
            <th>Score</th>
        </tr>
      
    </table>
</div>


  <div >
    <input type="text" placeholder="Search" id="addedInput",class = "Searchbar">
    <button type="button" id="addBtn" onclick="add_albums()"></button>
  </div>

  <body>

CodePudding user response：

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"  id="albumTable">
    <tr>
        <th>Album</th>
        <th>Artist</th>
        <th>Average Score</th>
        <th>Score</th>
    </tr>
</table>

CodePudding user response：

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)