Issue
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
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();
}<!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>Solution
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>Answered By - Liam Loads
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.