Develop Reference

I am having trouble getting my h3 tags and p tags in my section tag?

I am reading data from a javascript file and then importing them into the HTML file. The issue I am having is that I am unable to get my p tags and h3 tags in my section tag. This is what it looks like when I load it up:
The following code is what I have tried. I have used inner HTML to create the tags and I am not sure what I can do to fix this.
// create a box class section for whole thing
containerElement.innerHTML += "<section class='flight-info'> ";
// another class for top part of box
containerElement.innerHTML += "<div class='topBox' ";
// add all the elements such as destination and code
containerElement.innerHTML += "<h3 class='destination'> " + FlightInfo[i].destination + " </h3>";
containerElement.innerHTML += "<p class='departTime'> Depart time: " + FlightInfo[i].departTime + " </p>";
// have to check for # of stops to format. if its not 0, we can add the # of stops and time, otherwise its Non-stop, time
if (FlightInfo[i].stops != 0) {
containerElement.innerHTML += "<p class='timeStop'>" + FlightInfo[i].stops + ", " + FlightInfo[i].time + " min </p>";
} else if (FlightInfo[i].stops == 0) {
containerElement.innerHTML += "<p class='timeStop'> Non-Stop" + ", " + FlightInfo[i].time + " min </p>";
}
// end the topBox class
containerElement.innerHTML += "</div>"
containerElement.innerHTML += "</section>"

It's because you keep adding everything to the container.
containerElement.innerHTML +=
You only need the code above one time (at least the way you're doing it now), and add everything in one long string.
Otherwise, add the section, then select the section and add everything to the section's innerHTML. Same idea with the div.

textarea clears when using innerhtml [duplicate]

I have a problem concerning multiple file uploads in javascript. I am trying to create my own multiple file upload by dynamically adding inputs. This is all easy as pie, but the problem is that whenever I add a new , my previous input-fields of the type "file" get reset.
If I remove the last lines of code where I alter the innerHTML of my parent div, the values of my do not get reset. Does anyone know how this problem can be solved? The javascript code can be found below. Thanks in advance.
if(document.getElementById("upload_queue").innerHTML.indexOf(_item) == -1)
{
var _row = "<tr id='queue_row_" + items_in_queue + "'>";
_row += "<td>";
_row += "<div class='remove_uploaded_image' onclick='remove_from_queue(" + items_in_queue + ")'></div>";
_row += "</td>";
_row += "<td>";
_row += _item;
_row += "</td>";
_row += "</tr>";
document.getElementById("upload_queue").innerHTML += _row;
document.getElementById("upload_image_" + items_in_queue).style.display = "none";
items_in_queue++;
document.getElementById("uploader_holder").innerHTML +=
'<input id="upload_image_' + items_in_queue +
'" name="upload_image_' + items_in_queue + '" accept="image/jpeg" type="file"' +
'onchange="add_to_upload_queue()" style="display: inline;" />';
}

Yeah... you're going to want to use appendChild instead of modifying the inner HTML:
var myInput = document.createElement("INPUT");
// do stuff to my input
var myContainer = document.getElementById("uploader_holder");
myContainer.appendChild(myInput);
That's the general gist of what you have to do - let me know if you need somethign more specific, but it looks like you've got a good hold on JS already... You're going to want to do that in almost all cases rather than setting inner HTML... So, building your TR as well... you'll have to append the TD to the TR, you'll have to append the TD with your input, you'll have to append your targeted table with the TR, etc.

JavaScript onclick Function call not working

text += "<button id=next onclick=calendar(nextDate)>"
text += "<button id=next onclick=calendar(prevDate)>"
This code does not seem to run normally.
I do not know what the problem is.
function calendar(date) {
...........
text += "<tr>"
text += "<td colspan=7>"
text += "<button id=prev onclick=calendar(prevDate)>"
text += "◀"
text += "</button>"
text += "<button id=next onclick=calendar(nextDate)>"
text += "▶"
text += "</button>"
text += "</tr>"
text += "</td>"
text += "</table>";
document.getElementById("cal").innerHTML = text;
}
calendar();

Assuming you have set the onClick function to this function, you are missing semicolons at the ends of your lines ";"

Problems
text += "<button id=prev onclick=calendar(prevDate)>"
text += "<button id=next onclick=calendar(nextDate)>"
You do not use quotes to surround the values of the attributes
You pass the strings prevDate and nextDate instead of their values, but since they don't have any quotes surrounding them, javascript will try to find these two variables, but it won't be able to (unless they're in the global scope)
You don not use any semicolons (;), this probably won't cause a problem but it's still a good idea to use them
Here are a couple of ways that allow you to properly pass the previous and next date:
String Concatenation
Interpolation
Event Listeners
String Concatenation
text += "<button id='prev' onclick='calendar(" + prevDate + ")'>";
text += "<button id='next' onclick='calendar(" + nextDate + ")'>";
Interpolation (ES6)
text += `<button id="prev" onclick="calendar('${prevDate}')">`;
text += `<button id="next" onclick="calendar('${nextDate}')">`;
Event Listeners
text += "<button id='prev'>";
text += "<button id='next'>";
// This goes after document.getElementById("cal").innerHTML = text;
document.getElementById("prev").addEventListener("click", function (event) {
calendar(prevDate);
});
document.getElementById("next").addEventListener("click", function (event) {
calendar(nextDate);
});

Chaging innerHTML of DIV changes table properties

I have to show dynamically checkboxes in a HTML page and get their value from database.
The trick I used is to create the whole table HTML in java and then using AJAX I do this
var div = document.getElementByID("div").innerHTML = htmlCode;
but issue is
in htmlCode variable, the html is like
<table width="100%">
<tr>
<td width="50%">......
but when I check div.innerHTML it shows like
<TABLE width="100%">
<TBODY>
<TR>
<TD width="50%">
<?xml:namespace prefix = ....
Why they become uppercase and why is xml:namaesapce prefix added ?
This causes issue as table is not properly displayed.
Is there any other better way to do this without using innerHTML ?
The code for generation of table is
String html = "<table width=\"100%\">";
for (Iterator it = lookupList.iterator (); it.hasNext ();)
{
HashTree lookupElement = (HashTree) it.next ();
String code = lookupElement.getChildTagValue ("CODE");
String text = lookupElement.getChildTagValue ("TEXT");
String labelText = "";
if(indexLookupElement == 0)
labelText = "First Checkbox label";
html = html + "<tr><td width=\"50%\" >" +
+
"<input type=\"checkbox\" id=\"item" + code + "\" />" +
"<html:label " +
"id=\"_Description\"" +
"name=\"_Description\"" +
">" + text +
"</html:label>" +
"<td width=\"50%\" >" +
"</td></tr>";
indexLookupElement += 1;
}
html = html + "</table>";
Thanks,
Aiden

It's not a best practice to create the HTML code server-side. If you are sure you'll have the table in your document it's better to make it part of the structure of the document and feed only the variables from your Java code. Even if the table is conditional you may consider hide/unhide it with a variable. I believe this approach will solve your problem if the HTML code of your webpage is correct.
Update
Test it like this:
html = html + "<tr><td width=\"50%\"><input type=\"checkbox\" id=\"item" + code + "\" /><label id=\"_Description\" name=\"_Description\">" + text + "</label></td><td width=\"50%\"></td></tr>";
In your code you have missing TD closing tag and I made some changes. See if this will fix your problem.

applying image using innerHtml Method but its not working

Hello friends here's my code
function dropItems(idOfDraggedItem,targetId,x,y)
{
var html = document.getElementById('dropContent').innerHTML;
if(html.length<=0){
html.innerHTML='<img src="images/drag.jpg" alt=" " />'
}
if(html.length>0)html = html + '<br>';
html = html + document.getElementById(idOfDraggedItem).innerHTML;
document.getElementById('dropContent').innerHTML = html;
}
I want to to show a image in div when its empty.. but when it receive any data i want to remove that image by using this script .but its not working plz help me

function dropItems(idOfDraggedItem,targetId,x,y)
{
html = document.getElementById('dropContent');
if(html.innerHTML.length<=0){
html.innerHTML='<img src="images/drag.jpg" alt=" " />'
}
if(html.innerHTML.length>0)html = html + '<br>';
html = html + document.getElementById(idOfDraggedItem).innerHTML;
document.getElementById('dropContent').innerHTML = html;
}

function dropItems(idOfDraggedItem,targetId,x,y)
{
var html = document.getElementById('dropContent');
if(html.innerHTML.length<=0){
html.innerHTML='<img src="images/drag.jpg" alt=" " />'
}
if(html.innerHTML.length>0)html+='<br>';
html += document.getElementById(idOfDraggedItem).innerHTML;
document.getElementById('dropContent').innerHTML = html;
}

var html = document.getElementById('dropContent').innerHTML;
Here your passing the value to 'html'. not the reference of 'dropContent'. So you can't call 'innerHTML' on variables.
//Modified code
function dropItems(idOfDraggedItem,targetId,x,y)
{
var html = document.getElementById('dropContent').innerHTML;
if(html.length<=0){
html = '<img src="images/drag.jpg" alt=" " />'
}
if(html.length>0)html = html + '<br>';
html = html + document.getElementById(idOfDraggedItem).innerHTML;
document.getElementById('dropContent').innerHTML = html;
}

The problem is that the dropContent may not be empty even if it shows nothing; because, Javascript does not ignore the White-Spacing so there may be a white-space that keep the length bigger than zero.
Here is the solution, using the jQuery library as it has the needed methods to Trim the contents and other things:
function dropItems(idOfDraggedItem, targetId, x, y) {
var html = $("#dropContent").html();
html = $.trim(html);
if (html.length <= 0) {
var imageContent = $('<img src="images/drag.jpg" alt="" /><br />' + $("#" + idOfDraggedItem).html());
$("#dropContent").html(imageContent);
}
}
It worked for me in a test page I created.
The first line gets the html out of the element, second line trims it and thirth line checks if it is empty.
Forth line creates an element with the html string and the html content of the idOfDraggedItem element.
Fifth line sets the html content of the dropContent to the html content of the recently created element.
That's it.
Hope this works for you too.
PS the .html() method of jQuery extracts the innerHtml of the element, if you want the outerHtml, wrap the element in a div and get the .html() from div to get the outHtml of the wrapped element.