Develop Reference

Javascript for loop innerhtml doesn't work

class GenerateArray {
constructor() {
this.arrayCode = document.getElementById('code');
this.BaseCode = document.getElementById('preCode');
this.startCode = document.getElementById('startC');
this.endCode = document.getElementById('endC');
this.question = "";
this.prefix = "";
this.description = "";
this.answer = "";
this.id = "";
this.Name = "";
this.answerDIV = "";
this.count = 0;
}
generateQuestionPart() {
this.question = document.createElement('input');
this.question.setAttribute('type', 'text');
this.question.id = 'question' + this.count;
this.question.className = 'question';
this.question.placeholder = 'What is the question?'
this.prefix = document.createElement('input');
this.prefix.setAttribute('type', 'text');
this.prefix.className = 'prefix';
this.prefix.id = 'prefix' + this.count;
this.prefix.placeholder = 'The prefix of the question that belongs to the link'
this.description = document.createElement('input');
this.description.setAttribute('type', 'text');
this.description.id = 'description' + this.count;
this.description.className = 'description';
this.description.placeholder = 'Add the description that is going to be in the info pop up';
this.answerDIV = document.createElement('div');
this.answerDIV.className = 'answerDIV' + this.count;
this.answerDIV.id = 'AnswerDivId';
this.answer = document.createElement('button');
this.answer.setAttribute('type', 'button');
this.answer.id = 'answer';
this.answer.className = 'answerN' + this.count;
this.answer.innerHTML = 'Add Answer';
this.answer.onclick = function (e) {
for (let i = 0; i < NewArray.count; i++) {
if (e.target.className.endsWith(i)) {
NewArray.id = document.createElement('input');
NewArray.id.setAttribute('type', 'text');
NewArray.id.id = 'id' + i;
NewArray.id.classList.add('id');
NewArray.id.placeholder = 'Add the ID of the answer';
NewArray.Name = document.createElement('input');
NewArray.Name.setAttribute('type', 'text');
NewArray.Name.id = 'Name' + i;
NewArray.Name.className = 'name';
NewArray.Name.placeholder = 'Add the text that is on the answer button';
// console.log(e.target.className);
document.getElementsByClassName('answerDIV' + i)[0].appendChild(NewArray.id);
document.getElementsByClassName('answerDIV' + i)[0].appendChild(NewArray.Name);
}
}
}
document.getElementsByClassName('create')[0].appendChild(this.question);
document.getElementsByClassName('create')[0].appendChild(this.prefix);
document.getElementsByClassName('create')[0].appendChild(this.description);
document.getElementsByClassName('create')[0].appendChild(this.answerDIV);
document.getElementsByClassName('create')[0].appendChild(this.answer);
this.count++;
// console.log(NewArray.answer.length)
}
writeArray() {
let basis = document.createElement('p');
basis.innerHTML =
" class QuizPart {\n" +
" constructor(questionText, chosenAnswer, prefix, questionDescription) {\n" +
" this.questionText = questionText;\n" +
" this.chosenAnswer = chosenAnswer;\n" +
" this.prefix = prefix;\n" +
" this.questionDescription = questionDescription;\n" +
" }\n" +
" }\n" +
"\n" +
" class ChosenAnswer {\n" +
" constructor(id, name) {\n" +
" this.id = id;\n" +
" this.name = name;\n" +
" }\n" +
" }";
this.BaseCode.appendChild(basis);
let startC = document.createElement('p');
startC.innerHTML = "let Quiz = [";
for (let i = 0; i < this.count; i++) {
let code = document.createElement('p');
let output = "new QuizPart('" + document.getElementById('question' + i).value + "', [";
let answers = document.querySelectorAll("input#Name" + i)
console.log(answers.length);
for (let y = 0; y < answers.length; y++) {
output += "new ChosenAnswer('" + document.getElementById('id' + i).value + "', '" + document.getElementById('Name' + i).value + "'),"
}
output += "], '" + document.getElementById('prefix' + i).value + "',";
output += "'" + document.getElementById('description' + i).value + "',";
code.innerHTML = output;
this.arrayCode.appendChild(code);
}
let endC = document.createElement('p');
endC.innerHTML = "]"
this.startCode.appendChild(startC);
this.endCode.appendChild(endC);
// console.log(this.count.length);
}
}
NewArray = new GenerateArray();
NewArray.generateQuestionPart();
body {
margin: 0;
padding: 0;
}
.container{
height: 1000px;
width: 800px;
position: relative;
margin-top: 5px;
left: 50%;
-ms-transform: translate(-50%, 5%);
transform: translate(-50%, 5%);
}
.QPB{
width: 50px;
height: 50px;
margin-bottom: 10px;
background-color: orange;
font-size: 40px;
}
.question{
width: 100%;
height: 20px;
margin-bottom: 10px;
}
#answer{
width: 100px;
height: 35px;
margin-bottom: 50px;
}
.prefix{
width: 100%;
height: 20px;
margin-bottom: 10px;
}
.description{
width: 100%;
height: 20px;
margin-bottom: 10px;
}
.id{
position: relative;
width: 90%;
height: 20px;
margin-bottom: 10px;
margin-left: 10%;
}
.name{
position: relative;
width: 90%;
height: 20px;
margin-bottom: 20px;
margin-left: 10%;
}
.CreateArray{
width: 100px;
height: 35px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css">
<title>Hoi</title>
</head>
<body>
<div class="container">
<div class="create">
<button id="QuestionPartBtn" class="QPB" type="button" onclick="NewArray.generateQuestionPart()">+</button>
</div>
<div class="result">
<button id="CreateArray" class="CreateArray" type="button" onclick="NewArray.writeArray()">Create Array</button>
</div>
<div class="preCode" id="preCode"></div>
<div class="startC" id="startC"></div>
<div class="code" id="code"></div>
<div class="endC" id="endC"></div>
</div>
I created this system that makes an array with information that a user fills in in input fields.
The input fields are dynamically generated, so I use a for loop to show them all in an innerHTML that eventually creates the array.
My code:
this.answerDIV = document.createElement('div');
this.answerDIV.className = 'answerDIV' + this.count;
this.answerDIV.id = 'AnswerDivId';
this.answer = document.createElement('button');
this.answer.setAttribute('type', 'button');
this.answer.id = 'answer';
this.answer.className = 'answerN' + this.count;
this.answer.innerHTML = 'Add Answer';
this.answer.onclick = function (e) {
for (let i = 0; i < NewArray.count; i++) {
if (e.target.className.endsWith(i)) {
NewArray.id = document.createElement('input');
NewArray.id.setAttribute('type', 'text');
NewArray.id.id = 'id' + i;
NewArray.id.classList.add('id');
NewArray.id.placeholder = 'Add the ID of the answer';
NewArray.Name = document.createElement('input');
NewArray.Name.setAttribute('type', 'text');
NewArray.Name.id = 'Name' + i;
NewArray.Name.className = 'name';
NewArray.Name.placeholder = 'Add the text that is on the answer button';
// console.log(e.target.className);
document.getElementsByClassName('answerDIV' + i)[0].appendChild(NewArray.id);
document.getElementsByClassName('answerDIV' + i)[0].appendChild(NewArray.Name);
}
}
}
For loop:
for (let i = 0; i < this.count; i++) {
let code = document.createElement('p');
let output = "new QuizPart('" + document.getElementById('question' + i).value + "', [";
let answers = document.querySelectorAll("input#Name" + i)
console.log(answers.length);
for (let y = 0; y < answers.length; y++) {
output += "new ChosenAnswer('" + document.getElementById('id' + i).value + "', '" + document.getElementById('Name' + i).value + "'),"
}
output += "], '" + document.getElementById('prefix' + i).value + "',";
output += "'" + document.getElementById('description' + i).value + "',";
code.innerHTML = output;
this.arrayCode.appendChild(code);
}
The problem is with the second loop. Whenever I create 3 input fields for one question and I generate the innerHTML code it does show me all 3, except that they are all the first input field and the second and third aren't used as seen in the following screenshot:The problem
if i change i to y: Problem 2
(My FiddleJS link):https://jsfiddle.net/thijsl0705/1s98gumk/1/

I entered a,b,c then add answer, d,e then hit the plus sign and add f,g,h,i,j then create array. then hit the plus sign and add 1,2,3,4,5 and create the array and get:
let Quiz = [
let Quiz = [
new QuizPart('a', [new ChosenAnswer('d', 'e'),], 'b','c',
new QuizPart('f', [new ChosenAnswer('i', 'j'),], 'g','h',
new QuizPart('a', [new ChosenAnswer('d', 'e'),], 'b','c',
new QuizPart('f', [new ChosenAnswer('i', 'j'),], 'g','h',
new QuizPart('1', [new ChosenAnswer('4', '5'),], '2','3',
]
]
what exactly is the problem? what do you want to do? Looks like you might be missing a closing ) for each new QuizPart

Organizing buttons in div using only JavaScript

I need help with organizing this gallery to look like this:
I tried everything I know with positions (absolute and relative), bottoms, margins... but I can't seem to organize it properly.
This popup div needs to occupy 80% of page height and 80% of the page width, and images shouldn't break out of div.
I am not allowed to change HTML or to add CSS. Everything needs to be written inside the JS file.
Here is my code:
$(document).ready(function() {
var images = $('div[title ="London gallery"]').children('img').map(function() {
return $(this).attr('src')
}).get();
var description = $('div[title ="London gallery"]').children('p').map(function() {
return $(this).text();
}).get();
$('div[title ="London gallery"]').hide();
var gallery_lndn = document.createElement('button');
gallery_lndn.id = 'btn_London';
gallery_lndn.innerHTML = 'Look at the galery!';
document.body.appendChild(gallery_lndn);
document.getElementById('btn_London').onclick = function() {
show_pictures(images, description);
}
function show_pictures(images, description) {
function popUp() {
var index = 0;
var popup = document.createElement('div');
popup.className = 'popup';
popup.id = 'div_popup';
popup.style.background = "#2F4F4F";
popup.style.position = "absolute";
popup.style.top = "0px";
popup.style.left = "0px";
popup.style.right = "0px";
popup.style.margin = "100px auto";
popup.style.height = "80%";
popup.style.width = "80%";
var cancelButton = document.createElement('button');
cancelButton.innerHTML = 'x';
cancelButton.id = 'btn_cancelButton';
cancelButton.style.background = "red";
cancelButton.style.border = "none";
cancelButton.style.display = "inline-block";
cancelButton.style.fontSize = "16px";
cancelButton.style.padding = "15px 20px";
cancelButton.style.float = "right";
cancelButton.style.top = "0";
cancelButton.onclick = function(e) {
popup.parentNode.removeChild(popup)
};
var previousButton = document.createElement('button');
previousButton.innerHTML = '<<';
previousButton.style.background = "#32CD32";
previousButton.style.border = "none";
previousButton.style.display = "inline-block";
previousButton.style.fontSize = "16px";
previousButton.style.padding = "15px 32px";
previousButton.style.position = "absolute";
previousButton.style.float = "left";
previousButton.style.bottom = "0";
previousButton.onclick = function() {
index = (index == 0) ? images.length - 1 : index - 1;
console.log(index);
updateImage();
}
var nextButton = document.createElement('button');
nextButton.innerHTML = '>>';
nextButton.style.background = "#32CD32";
nextButton.style.background = "#32CD32";
nextButton.style.border = "none";
nextButton.style.display = "inline-block";
nextButton.style.fontSize = "16px";
nextButton.style.padding = "15px 32px";
//nextButton.style.position = "absolute";
nextButton.style.float = "right";
nextButton.style.bottom = "0";
nextButton.onclick = function() {
index = (index == images.length - 1) ? 0 : index + 1;
console.log(index);
updateImage();
}
function updateImage() {
var img = new Image();
img.src = images[index];
img.style.margin = "auto";
img.style.position = "relative";
img.style.display = "block";
console.log(img);
$("#div_popup").html("");
if (index == 0) {
previousButton.style.background = "#A9A9A9";
//previousButton.disabled = "true";
} else if (index == images.length - 1) {
nextButton.style.background = "#A9A9A9";
//nextButton.disabled = "true";
} else {
//nextButton.disabled = "false";
//previousButton.disabled = "false";
previousButton.style.background = "#32CD32";
nextButton.style.background = "#32CD32";
}
popup.appendChild(previousButton);
popup.appendChild(nextButton);
popup.appendChild(cancelButton);
var message = document.createElement('span');
//message.style.position = "absolute";
message.style.bottom = "0";
message.innerHTML = "Picture " + (index + 1) + "/" + images.length + "<br>" + description[index];
img.onload = function() {
popup.appendChild(message);
popup.appendChild(img);
document.body.appendChild(popup);
};
}
updateImage();
}
popUp();
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="gallery.js"></script>
</head>
<body>
<h1>London</h1>
<div class="gallery" title="London gallery">
<img src="https://cdn.londonandpartners.com/visit/general-london/areas/river/76709-640x360-houses-of-parliament-and-london-eye-on-thames-from-above-640.jpg">
<p data-target="https://cdn.londonandpartners.com/visit/general-london/areas/river/76709-640x360-houses-of-parliament-and-london-eye-on-thames-from-above-640.jpg">
Description 1.
</p>
<img src="https://news.itu.int/wp-content/uploads/2018/07/london-min-e1530887248858.jpg">
<p data-target="https://news.itu.int/wp-content/uploads/2018/07/london-min-e1530887248858.jpg">
Description 2.
</p>
</div>
</body>
</html>

You can update the button positions according to the image. Call below method inside the updateImage method just before closing.
function updatePositions(){
// absolute position for all buttons
$('#div_popup > button').css({'position': 'absolute', 'float':'none', 'z-index': 1});
// get image bottom position
let buttonTopPos = ($('#div_popup > img').offset().top + $('#div_popup > img').height()) - $('#div_popup').offset().top + 20;
// get image bottom left position
let buttonLeftPos = 0;
if($('#div_popup').width() > $('#div_popup > img').width()){
buttonLeftPos = ($('#div_popup').width() - $('#div_popup > img').width())/2
}else{
$('#div_popup > img').css({'min-width':'100%', 'max-width':'100%'});
}
// image overflow will be hidden
$('#div_popup').css('overflow', 'hidden');
// Back button position
$('#div_popup > button:nth-child(1)').css({'top': buttonTopPos, 'bottom':'auto', 'left': buttonLeftPos +'px'})
// Next button position
$('#div_popup > button:nth-child(2)').css({'top': buttonTopPos, 'bottom':'auto', 'left': (buttonLeftPos + $('#div_popup > img').width()) - 90})
// cancel button position
$('#div_popup > button:nth-child(3)').css({'top': 0, 'right': 0, left: 'auto'});
// description position
$('#div_popup > span').css({'position': 'absolute','top': buttonTopPos, 'bottom':'auto', 'left': buttonLeftPos + 90, 'width': $('#div_popup > img').width() - 90 - 90, 'text-align': 'center'})
}

Here's a layout that approximates the sample, above. For convenience, this uses JavaScript to add a <style> element to the <head>.
window.onload = () => {
const myCSS =
' body {\n' +
' width:100vw;\n' +
' height:100vh;\n' +
' position:relative\n' +
' }\n' +
' .gallery {\n' +
' background-color: darkblue;\n' +
' width: 80%;\n' +
' height: 80%;\n' +
' position: absolute;\n' +
' top: 10%;\n' +
' left: 10%;\n' +
' }\n' +
' .img-wrapper {\n' +
' background-color: transparent;\n' +
' width: calc(100% - 120px);\n' +
' height: calc(100% - 160px);\n' +
' margin: 60px;\n' +
' overflow-y: hidden;\n' +
' }\n' +
' .img-wrapper img {\n' +
' width: 100%;\n' +
' height: auto;\n' +
' }\n' +
' .btn1 {\n' +
' width: 120px;\n' +
' height: 60px;\n' +
' position: absolute;\n' +
' left: 60px;\n' +
' bottom: 30px;\n' +
' background-color: #999;\n' +
' }\n' +
' .btn2 {\n' +
' width: 120px;\n' +
' height: 60px;\n' +
' position: absolute;\n' +
' right: 60px;\n' +
' bottom: 30px;\n' +
' background-color: #999;\n' +
' }\n' +
' .btn-close {\n' +
' width: 80px;\n' +
' height: 40px;\n' +
' position: absolute;\n' +
' right: 0;\n' +
' top: 0;\n' +
' background-color: #999;\n' +
' }\n' +
' .caption {\n' +
' width: calc(100% - 409px);\n' +
' height: 60px;\n' +
' position: absolute;\n' +
' left: 192px;\n' +
' bottom: 30px;\n' +
' color: white;\n' +
' border: 1px dashed #aaa;\n' +
' text-align: center;\n' +
' padding: 0 12px;\n' +
' overflow: hidden;\n' +
' }\n';
const myStyle = document.createElement('style');
myStyle.id = 'myCSS';
myStyle.innerHTML = myCSS;
document.head.appendChild(myStyle);
}
<body>
<div class="gallery">
<div class="img-wrapper">
<img src="https://cdn.londonandpartners.com/visit/general-london/areas/river/76709-640x360-houses-of-parliament-and-london-eye-on-thames-from-above-640.jpg">
</div>
<div class="btn1">.btn1</div>
<div class="btn2">.btn2</div>
<div class="caption">.caption</div>
<div class="btn-close">.btn-close</div>
</div>
</body>

Why does ScriptManager.RegisterStartupScript skip a single script but continues with adjoining scripts

Good day,
This is actually my first question on the site, I actually made an account for this problem alone.
I struggling a lot with this and can't seem to figure out what the cause is.
I'm playing around with dynamically creating html controls and populating them with data from a SQL Database.
As a test application I have been using the concept of a video store rental shop that has an admin site to modify (Insert, Update, Delete) movies, receive reports and statistics about the movies and so on.
So as a control to display the movies I use a html table with my own custom style sheet, with the Movie's detail in a header row, and when you click on the header row the table expands to show the stock of that movie (As a movie can have multiple physical "discs" within the shop that have different stock codes and statuses).
Thus the reason I'm trying to create the table dynamically as the number of movies and the number of "discs" these movies can have can change. I have created a working "Proof of Concept", but a problem occurs on the eleventh movie where the header row (Showing Main Title, Sub Title, Age Restriction, Main Category, Secondary Category, and Rental Amount) isn't created but the data that is shown when you click on the header and it expands is created, but is appended to the tenth movie's expanded data.
The scripts are appended using ScriptManager.RegisterStartupScript. When I check the compiled code in a browser (Chrome's Inspect Tool), the scripts in the Manager are all appended except for the the eleventh movie's header and first data row.
I used breakpoints to check the codebehind (OnPage_Load Event) and the script runs and it isn't a problem with the ScriptManager.RegisterStartupScript's key parameter, as it is created with a loop and I made sure that the controls created dynamically have unique ID tags to call on in the script itself and for later.
I've been stuck on this problem the whole day and can't figure out why all the rows and there expanded data rows are created and works except for the last one and its first data row.
Why is this happening? Is it a problem in the script? (But why are all the other rows created without a problem?)
So far I believe it's a problem in the codebehind of program but still can't figure out why the problem happens.
Here is the C# from the codebehind
namespace WebApplication4
{
public partial class _Default : Page
{
private static String connectionString = #"Data Source=BOARDROOM-PC\SQLEXPRESS;Initial Catalog=Express_Video;Integrated Security=True";
private static SqlConnection connection;
private SqlDataAdapter da1 = null;
private SqlDataAdapter da2 = null;
private SqlCommand command1 = null;
private SqlCommand command2 = null;
private DataSet ds1 = null;
private DataSet ds2 = null;
protected void Page_Load(object sender, EventArgs e)
{
connection = new SqlConnection(connectionString);
connection.Open();
da1 = new SqlDataAdapter();
da2 = new SqlDataAdapter();
command1 = new SqlCommand("sp_EV_AllMoviesForStock", connection);
command1.CommandType = CommandType.StoredProcedure;
ds1 = new DataSet();
da1.SelectCommand = command1;
da1.Fill(ds1, "Movies");
string MovieID;
string MainTitle;
string SecTitle;
string Age_R;
string Cat_M;
string Cat_S;
double Rent_Amount;
string StockCode;
string Status;
string StatusInfo;
string DateCreated;
string script1;
string script2;
string key1;
string key2;
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", "CreatePageConnector();", true);
for (int Outer = 1; Outer <= ds1.Tables["Movies"].Rows.Count; Outer++)
{
MovieID = ds1.Tables["Movies"].Rows[Outer - 1][0].ToString();
MainTitle = ds1.Tables["Movies"].Rows[Outer - 1][1].ToString();
SecTitle = ds1.Tables["Movies"].Rows[Outer - 1][2].ToString();
Age_R = ds1.Tables["Movies"].Rows[Outer - 1][3].ToString();
Cat_M = ds1.Tables["Movies"].Rows[Outer - 1][4].ToString();
Cat_S = ds1.Tables["Movies"].Rows[Outer - 1][5].ToString();
Rent_Amount = Convert.ToDouble(ds1.Tables["Movies"].Rows[Outer - 1][6].ToString());
script1 = "'" + Outer + "','" + MainTitle + "','" + SecTitle + "','" + Age_R + "','" + Cat_M + "','" + Cat_S + "','" + Rent_Amount + "'";
key1 = "text" + Outer.ToString();
if (Outer % 2 == 0)
{
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), key1, "CreateTableRowEven(" + script1 + ");", true);
}
else
{
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), key1, "CreateTableRowOdd(" + script1 + ");", true);
}
command2 = new SqlCommand("sp_EV_StockByMovie", connection);
command2.CommandType = CommandType.StoredProcedure;
command2.Parameters.AddWithValue("#MovieID", MovieID);
ds2 = new DataSet();
da2.SelectCommand = command2;
da2.Fill(ds2, "Stock");
for (int Inner = 1; Inner <= ds2.Tables["Stock"].Rows.Count; Inner++)
{
key2 = "text" + Outer.ToString() + Inner.ToString();
StockCode = ds2.Tables["Stock"].Rows[Inner - 1][0].ToString();
Status = ds2.Tables["Stock"].Rows[Inner - 1][1].ToString();
StatusInfo = ds2.Tables["Stock"].Rows[Inner - 1][2].ToString();
DateCreated = ds2.Tables["Stock"].Rows[Inner - 1][3].ToString();
script2 = "'" + StockCode + "','" + Status + "','" + StatusInfo + "','" + DateCreated + "'";
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), key2, "CreateInnerData('" + Outer + "','" + Inner + "'," + script2 + ");", true);
}
}
}
}
}
Here is the Page html (.aspx file)
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication4._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="container" id="containTable">
<%--Table is Created Here--%>
</div>
</asp:Content>
Here is CreateTable.js
Note: the Odd and Even functions are to change the row's color (I feel it done this why is repetitive and unnecessary but its good enough for now, as a proof of concept)
function CreatePageConnector() {
var TableHolder = document.createElement("table");
TableHolder.setAttribute("class", "table");
TableHolder.setAttribute("id", "TableHolder");
document.getElementById("containTable").appendChild(TableHolder);
}
function CreateTableRowOdd(ID, MainTitle, SubTitle, Age_Restr, Cat_1, Cat_2, Rent_Amount) {
var HeaderRow = document.createElement("tr");
HeaderRow.setAttribute("class", "header");
HeaderRow.setAttribute("id", "HeaderRow_A_" + ID);
document.getElementById("TableHolder").appendChild(HeaderRow);
var InfoHeader = document.createElement("td");
InfoHeader.setAttribute("class", "InfoHeader");
InfoHeader.setAttribute("colspan", "4");
InfoHeader.setAttribute("id", "InfoHeaderData_A_" + ID);
document.getElementById("HeaderRow_A_" + ID).appendChild(InfoHeader);
var contHolder = document.createElement("div");
contHolder.setAttribute("class", "container contHolder");
contHolder.setAttribute("id", "contHolder_A_" + ID);
document.getElementById("InfoHeaderData_A_" + ID).appendChild(contHolder);
var innerTable = document.createElement("table");
innerTable.setAttribute("class", "table innerTable");
innerTable.setAttribute("id", "innerTable_A_" + ID);
document.getElementById("contHolder_A_" + ID).appendChild(innerTable);
var DataHeader = document.createElement("tr");
DataHeader.setAttribute("class", "DataHeaderOdd");
DataHeader.setAttribute("id", "DataHeaderOdd_A_" + ID);
document.getElementById("innerTable_A_" + ID).appendChild(DataHeader);
var DataHolder1 = document.createElement("td");
DataHolder1.setAttribute("id", "DataHolder_A_A_" + ID);
DataHolder1.innerHTML = MainTitle;
var DataHolder2 = document.createElement("td");
DataHolder2.setAttribute("id", "DataHolder_A_B_" + ID);
DataHolder2.innerHTML = SubTitle;
var DataHolder3 = document.createElement("td");
DataHolder3.setAttribute("id", "DataHolder_A_C_" + ID);
DataHolder3.innerHTML = Age_Restr;
var DataHolder4 = document.createElement("td");
DataHolder4.setAttribute("id", "DataHolder_A_D_" + ID);
DataHolder4.innerHTML = Cat_1 + " " + Cat_2;
var DataHolder5 = document.createElement("td");
DataHolder5.setAttribute("id", "DataHolder_A_E_" + ID);
DataHolder5.innerHTML = "R " + Rent_Amount;
document.getElementById("DataHeaderOdd_A_" + ID).appendChild(DataHolder1);
document.getElementById("DataHeaderOdd_A_" + ID).appendChild(DataHolder2);
document.getElementById("DataHeaderOdd_A_" + ID).appendChild(DataHolder3);
document.getElementById("DataHeaderOdd_A_" + ID).appendChild(DataHolder4);
document.getElementById("DataHeaderOdd_A_" + ID).appendChild(DataHolder5);
var InnerHeaderRow = document.createElement("tr");
InnerHeaderRow.setAttribute("class", "innerDataHeader");
InnerHeaderRow.setAttribute("id", "InnerHeaderRow_B_" + ID);
document.getElementById("TableHolder").appendChild(InnerHeaderRow);
var HeaderHolder1 = document.createElement("td");
HeaderHolder1.setAttribute("id", "HeaderHolder_B_A" + ID);
HeaderHolder1.innerHTML = "Stock Code";
var HeaderHolder2 = document.createElement("td");
HeaderHolder2.setAttribute("id", "HeaderHolder_B_B" + ID);
HeaderHolder2.innerHTML = "Status";
var HeaderHolder3 = document.createElement("td");
HeaderHolder3.setAttribute("id", "HeaderHolder_B_C" + ID);
HeaderHolder3.innerHTML = "Status Information";
var HeaderHolder4 = document.createElement("td");
HeaderHolder4.setAttribute("id", "HeaderHolder_B_D" + ID);
HeaderHolder4.innerHTML = "Status Change Date";
document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder1);
document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder2);
document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder3);
document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder4);
}
function CreateTableRowEven(ID, MainTitle, SubTitle, Age_Restr, Cat_1, Cat_2, Rent_Amount) {
var HeaderRow = document.createElement("tr");
HeaderRow.setAttribute("class", "header");
HeaderRow.setAttribute("id", "HeaderRow_A_" + ID);
document.getElementById("TableHolder").appendChild(HeaderRow);
var InfoHeader = document.createElement("td");
InfoHeader.setAttribute("class", "InfoHeader");
InfoHeader.setAttribute("colspan", "4");
InfoHeader.setAttribute("id", "InfoHeaderData_A_" + ID);
document.getElementById("HeaderRow_A_" + ID).appendChild(InfoHeader);
var contHolder = document.createElement("div");
contHolder.setAttribute("class", "container contHolder");
contHolder.setAttribute("id", "contHolder_A_" + ID);
document.getElementById("InfoHeaderData_A_" + ID).appendChild(contHolder);
var innerTable = document.createElement("table");
innerTable.setAttribute("class", "table innerTable");
innerTable.setAttribute("id", "innerTable_A_" + ID);
document.getElementById("contHolder_A_" + ID).appendChild(innerTable);
var DataHeader = document.createElement("tr");
DataHeader.setAttribute("class", "DataHeaderEven");
DataHeader.setAttribute("id", "DataHeaderEven_A_" + ID);
document.getElementById("innerTable_A_" + ID).appendChild(DataHeader);
var DataHolder1 = document.createElement("td");
DataHolder1.setAttribute("id", "DataHolder_A_A_" + ID);
DataHolder1.innerHTML = MainTitle;
var DataHolder2 = document.createElement("td");
DataHolder2.setAttribute("id", "DataHolder_A_B_" + ID);
DataHolder2.innerHTML = SubTitle;
var DataHolder3 = document.createElement("td");
DataHolder3.setAttribute("id", "DataHolder_A_C_" + ID);
DataHolder3.innerHTML = Age_Restr;
var DataHolder4 = document.createElement("td");
DataHolder4.setAttribute("id", "DataHolder_A_D_" + ID);
DataHolder4.innerHTML = Cat_1 + " " + Cat_2;
var DataHolder5 = document.createElement("td");
DataHolder5.setAttribute("id", "DataHolder_A_E_" + ID);
DataHolder5.innerHTML = "R " + Rent_Amount;
document.getElementById("DataHeaderEven_A_" + ID).appendChild(DataHolder1);
document.getElementById("DataHeaderEven_A_" + ID).appendChild(DataHolder2);
document.getElementById("DataHeaderEven_A_" + ID).appendChild(DataHolder3);
document.getElementById("DataHeaderEven_A_" + ID).appendChild(DataHolder4);
document.getElementById("DataHeaderEven_A_" + ID).appendChild(DataHolder5);
var InnerHeaderRow = document.createElement("tr");
InnerHeaderRow.setAttribute("class", "innerDataHeader");
InnerHeaderRow.setAttribute("id", "InnerHeaderRow_B_" + ID);
document.getElementById("TableHolder").appendChild(InnerHeaderRow);
var HeaderHolder1 = document.createElement("td");
HeaderHolder1.setAttribute("id", "HeaderHolder_B_A_" + ID);
HeaderHolder1.innerHTML = "Stock Code";
var HeaderHolder2 = document.createElement("td");
HeaderHolder2.setAttribute("id", "HeaderHolder_B_B_" + ID);
HeaderHolder2.innerHTML = "Status";
var HeaderHolder3 = document.createElement("td");
HeaderHolder3.setAttribute("id", "HeaderHolder_B_C_" + ID);
HeaderHolder3.innerHTML = "Status Information";
var HeaderHolder4 = document.createElement("td");
HeaderHolder4.setAttribute("id", "HeaderHolder_B_D_" + ID);
HeaderHolder4.innerHTML = "Status Change Date";
document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder1);
document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder2);
document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder3);
document.getElementById("InnerHeaderRow_B_" + ID).appendChild(HeaderHolder4);
}
function CreateInnerData(ID1, ID2, StockCode, Status, StatusInfo, DateChanged) {
var InnerData = document.createElement("tr");
InnerData.setAttribute("class", "innerData");
InnerData.setAttribute("id", "InnerData_C_" + ID1 + "_" + ID2);
document.getElementById("TableHolder").appendChild(InnerData);
var innerDataHolder1 = document.createElement("td");
innerDataHolder1.setAttribute("id", "HeaderHolder_C_A_" + ID1 + "_" + ID2);
innerDataHolder1.innerHTML = StockCode;
var innerDataHolder2 = document.createElement("td");
innerDataHolder2.setAttribute("id", "HeaderHolder_C_B_" + ID1 + "_" + ID2);
innerDataHolder2.innerHTML = Status;
var innerDataHolder3 = document.createElement("td");
innerDataHolder3.setAttribute("id", "HeaderHolder_C_C_" + ID1 + "_" + ID2);
innerDataHolder3.innerHTML = StatusInfo;
var innerDataHolder4 = document.createElement("td");
innerDataHolder4.setAttribute("id", "HeaderHolder_C_D_" + ID1 + "_" + ID2);
innerDataHolder4.innerHTML = DateChanged;
document.getElementById("InnerData_C_" + ID1 + "_" + ID2).appendChild(innerDataHolder1);
document.getElementById("InnerData_C_" + ID1 + "_" + ID2).appendChild(innerDataHolder2);
document.getElementById("InnerData_C_" + ID1 + "_" + ID2).appendChild(innerDataHolder3);
document.getElementById("InnerData_C_" + ID1 + "_" + ID2).appendChild(innerDataHolder4);
}
Here is the Javascript for the row dropdown of the table
$(document).ready(function () {
var ua = navigator.userAgent,
event = (ua.match(/iPad/i)) ? "touchstart" : "click";
if ($('.table').length > 0) {
$('.table .header').on(event, function () {
$(this).toggleClass("active", "").nextUntil('.header').css('display', function (i, v) {
return this.style.display === 'table-row' ? 'none' : 'table-row';
});
});
}
})
Here is the Style Sheet
#import url('https://fonts.googleapis.com/css?family=Titillium+Web&display=swap');
body {
color: #6a6c6f;
background-color: #f1f3f6;
margin-top: 30px;
font-family: 'Titillium Web', sans-serif;
}
.container {
max-width: 960px;
}
.contHolder {
height: 100%;
padding: 0;
}
.table {
color: white;
text-align: center;
}
.table tr.header {
font-weight: bold;
cursor: pointer;
-webkit-user-select: none;
/* Chrome all / Safari all */
-moz-user-select: none;
/* Firefox all */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
/* Likely future */
}
.table tr:not(.header) {
display: none;
}
.table tr:nth-child(odd) {
background: #eee;
}
.table .header td:after {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: transform .25s linear;
-webkit-transition: -webkit-transform .25s linear;
}
.table .innerTable {
margin: 0;
}
.table .InfoHeader {
padding: 0;
border-top: none;
}
.table tr.DataHeaderOdd {
background-color: #414141;
display: table-row;
}
.table tr.DataHeaderEven {
background-color: #5b5656;
display: table-row;
}
.table tr.DataHeaderOdd td {
width: 20%;
border: none;
line-height: 30px;
}
.table tr.DataHeaderEven td {
width: 20%;
border: none;
line-height: 30px;
}
.table .innerDataHeader td {
width: 25%;
border: none;
font-size: 14px;
line-height: 25px;
color: white;
background-color: #6c7b95;
}
.table .innerData td {
color: #393e46;
font-size: 10px;
line-height: 20px;
}
Here is a screenshot:

Good day,
I figured out that there are keys that are duplicated and recreated. In the beginning the eleventh data row of the first movie (Avengers Infinity War), the key is "text111", meaning the key of the first row, eleventh datarow. Later at the eleventh row (which should be Zombieland: Double Tap), the key there is "text111", the eleventh row, first datarow. I solved just by adding an underscore between the key's row and datarow identifiers e.g. "text1_11" and "text11_1", it solved the problem and the table is created with all movie items from the database.

JavaScript Issue can not use function with HTML Tag

I have created a JavaScript exercise that changes the ID of an HTML object.
I want to set up a button that will cycle between choices. Right now the button is not executing the function.
Please take a look at the code and let me know what I am doing wrong.
a = 0;
n = 1;
i = 0;
function changexc(a, n) {
document.getElementById('effect00').id = "effect00" + (a + i);
}
function counterxc() {
i = n++;
return n;
}
document.write("<br>" + "a is " + a + "<br>");
document.write(" i is " + i + "<br>");
document.write(" n is " + n + "<br>");
document.write(" n + a is " + (n + a) + "<br>");
changexc(a);
<style>#effect001 {
max-width: 100px!important;
height: 200px;
background-color: red;
display: block;
}
#effect002 {
max-width: 200px!important;
height: 100px;
background-color: blue;
display: block;
}
#effect003 {
max-width: 300px!important;
height: 300px;
border-radius: 50%;
background-color: yellow;
display: block;
}
</style>
<div id="effect00"></div>
<button type="button" id="thatdarnbutton" onclick="counterxc ()">Click Me</button>

This code works - see explanation below
var a = 0;
var n = 1;
var i = 0;
function changexc() {
console.log(" added class : " + "effect00" + (a + i));
document.getElementById("effect00").className = "effect00" + (a + i);
console.log("<br>" + "a is " + a + "<br>");
console.log(" i is " + i + "<br>");
console.log(" n is " + n + "<br>");
console.log(" n + a is " + (n + a) + "<br>");
}
function counterxc() {
i = n + 1;
n++;
if(n >3) {
n = 0;
}
changexc();
}
changexc();
.effect001 {
max-width: 100px!important;
height: 200px;
background-color: red;
display: block;
}
.effect002 {
max-width: 200px!important;
height: 100px;
background-color: blue;
display: block;
}
.effect003 {
max-width: 300px!important;
height: 200px;
border-radius: 50%;
background-color: yellow;
display: block;
}
<div id="effect00">
hello world!
</div>
<button type="button" onClick="counterxc();">Click Me</button>
Its just "use strict"; javascript environment (node, browser etc) would assume/say that you can't use variables before you declare them and I suggest you do that. Its good practise:
However, as other have commented - start from basics, learn how browser uses javascript as well other environments such as node. I am still getting used to the new ES6 and ES7 syntax and all the new build systems. Its a whole lot to mention here but i would recommend the "You don't know JS" series of books

You code work fine, but need a little work.
First of you have to make sure that all element been loaded before you begin your work use setTimeout.
See down i have fixed your problem here and this should now work
a = 0;
n = 1;
i = 0;
var id = "effect00";
function changexc(a, n) {
document.getElementById(id).setAttribute("id", "effect00" + (a + i));
id = "effect00" + (a + i);
}
function counterxc() {
i = n++;
write();
return n;
}
function write() {
var resultDiv = document.getElementById(id);
var resultstring = "<br>" + "a is " + a + "<br>"
resultstring += " i is " + i + "<br>"
resultstring += " n is " + n + "<br>"
resultstring += " n + a is " + (n + a) + "<br>"
resultstring += "id is " + "effect00" + (a + i);
resultDiv.innerHTML = resultstring;
changexc(a)
}
setTimeout(function() { /// this is importent, wait untill elemtns have loaded
changexc(a);
write();
}, 100);
#effect001 {
max-width: 100px!important;
height: 200px;
background-color: red;
display: block;
}
#effect002 {
max-width: 200px!important;
height: 100px;
background-color: blue;
display: block;
}
#effect003 {
max-width: 300px!important;
height: 300px;
border-radius: 50%;
background-color: yellow;
display: block;
}
<button type="button" id="thatdarnbutton" onclick="counterxc()">Click Me</button>
<div id="effect00"></div>

jquery append to DOM does not work as expected

I have a simple question. I have this function:
function buildGallery(assets) {
var $target = $("#assets");
var containerWidth = $target.width();
var overallWidth = 0;
var items = "";
$.each(assets, function (i, asset) {
var percent = 300 / asset.Metadata.ImageHeight;
var width = percent * asset.Metadata.ImageWidth;
var item = "<img src=\"" + asset.ThumbNail + "\" />";
overallWidth += width;
items += item;
if (overallWidth >= containerWidth) {
var $items = $(items);
var padding = overallWidth - containerWidth;
var counter = $items.find("img").length;
var p = padding / counter;
$items.each(function (n, image) {
console.log(image);
var img = "<div style=\"float: left; width: " + p + "px; overflow: auto;\">" + image + "</div>";
$target.append(img);
});
overallWidth = 0; // reset
items = "";
}
});
$target.removeClass("ajax");
}
my problem is that when I try to add the div to my target it just shows [object HTMLDivElement] instead of actually showing the html.
I have seen this before, but whatever I try does not seem to work.
Can someone give me a hand please?

The problem is that you are trying to build the new div element with the image DOM element, rather than its HTML:
var img = "<div style=\"float: left; width: " + p + "px; overflow: auto;\">" + image + "</div>";
// this is a DOM object not a string ^
If you want to use the string form, you need to get the HTML string from the object:
var img = "<div style=\"float: left; width: " + p + "px; overflow: auto;\">" + image.innerHTML + "</div>";
Or you could create a jQuery object of the div and append the image element to it:
var img = $("<div style=\"float: left; width: " + p + "px; overflow: auto;\"></div>").append(image);
Though it might be easier to read if you wrap each of the images in a div in one step and then add all of them to the $target at once:
$items.wrap("<div style=\"float: left; width: " + p + "px; overflow: auto;\"></div>").appendTo($target);
I think that you might have another problem with your code: it looks like the if (overallWidth >= containerWidth) { statement should be outside of the $.each(assets, ...) loop. With it inside, you will be adding each element in the assets list to the DOM length - index times.