Rendering HTML table inside <div> using javascript function - javascript

I'm trying to get my javascript function that creates a html table in my content div on my website. The problem is, that it is not displayed inside the div but under it. How can I put it inside?
<div id="tab-container" class='tab-container'>
<ul class='etabs'>
<li class='tab'>Start</li>
<li class='tab'>Schichtplan</li>
<li class='tab'>Rechnung</li>
<li class='tab'>Kontakt</li>
</ul>
<div class='panel-container'>
<div id="tabs1-start">
Test page 1
</div>
<div id="tabs1-schicht">
<script type"text/javascript">
tableCreate();
</script>
</div>
<div id="tabs1-rechnung">
Test page3
</div>
<div id="tabs1-kontakt">
Test page4
</div>
</div>
</div>
This is my basic website with the navigationbar. When I run it with xampp the js function tableCreate(); is displayed after the panel-container div closes.
Here is my js code:
function tableCreate(){
//var schicht=["datum","schicht","schicht","schicht","dispo","schicht","schicht","schicht","schicht","schicht","schicht","dispo"];
var body=document.getElementsByTagName('body')[0];
var tbl=document.createElement('table');
tbl.style.width='100%';
tbl.setAttribute('border','1');
var tbdy=document.createElement('tbody');
for(var i=0;i<28;i++){
var tr=document.createElement('tr');
for(var j=0;j<12;j++){
if(i==27 && j==12){
break
} else {
var td=document.createElement('td');
td.appendChild(document.createTextNode('schicht'))
tr.appendChild(td)
}
}
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl)
Thanks in advance.

Use document.getElementById('tabs1-schicht'); instead of document.getElementsByTagName('body')[0];

Replace
body.appendChild(tbl)
with
var div4=document.getElementById("tabs1-kontakt");
div4.appendChild(tbl);

You code should be something like this:
<html>
<head>
<script>
function tableCreate() {
//var schicht=["datum","schicht","schicht","schicht","dispo","schicht","schicht","schicht","schicht","schicht","schicht","dispo"];
var body = document.getElementById('tabs1-schicht');
var tbl = document.createElement('table');
tbl.style.width = '100%';
tbl.setAttribute('border', '1');
var tbdy = document.createElement('tbody');
for (var i = 0; i < 28; i++) {
var tr = document.createElement('tr');
for (var j = 0; j < 12; j++) {
if (i == 27 && j == 12) {
break
} else {
var td = document.createElement('td');
td.appendChild(document.createTextNode('schicht'))
tr.appendChild(td)
}
}
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl)
}
</script>
</head>
<body>
<div id="tab-container" class='tab-container'>
<ul class='etabs'>
<li class='tab'>Start</li>
<li class='tab'>Schichtplan</li>
<li class='tab'>Rechnung</li>
<li class='tab'>Kontakt</li>
</ul>
<div class='panel-container'>
<div id="tabs1-start">
Test page 1
</div>
<div id="tabs1-schicht">
<script>
tableCreate();
</script>
</div>
<div id="tabs1-rechnung">
Test page3
</div>
<div id="tabs1-kontakt">
Test page4
</div>
</div>
</div>
</body>
</html>

#astro I looked up your suggestion. I changed my table creation to something simular to stackoverflow.com/a/1413984/4344444. It works now. thanks a lot =D

Related

Var wont display [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
So I'm bored so I decided to learn javascript an I came across this weird bug where one of my variables wont display even though it is the same code for both of them.
var wheatFields = 0;
var numWheat = 0;
var wheat = 0;
window.onload = function() {
document.getElementById("wheatFarms").innerHTML = wheatFields;
document.getElementById("numWheat").innerHTML = numWheat;
document.getElementById("wheatNum").innerHTML = wheat;
};
function addWheatFarm() {
wheatFields++;
document.getElementById("wheatFarms").innerHTML = wheatFields;
//wheatHandler();
}
function wheatHandler() {
var lifespan = Math.floor(Math.Random() * 50) + 10;
for (var i = 0; i <= lifespan; i++) {
wheat++;
document.getElementById("wheatNum").innerHTML = wheat;
}
}
<div data-role="page" id="start">
<div class="header">
<h1>Farming Game</h1>
</div>
<div data-role="main" class="ui-content">
<button id="wheatButton" onclick="addWheatFarm()">
Add a wheat farm.
</button>
</br>
<br>
<div id="fieldContainer" class="containers">
<ul data-role="listview" id="farms" data-count-theme="b" data-insert="true">
<br>
<li id="fieldCounter">
<p>Wheat Fields
<var id="wheatFarms"></var>
</p>
</li>
</ul>
</br>
</br>
</div>
<div id="inventoryContainer" class="containers">
<ul data-role="listview" id="inventory" data-count-theme="b" data-insert="true">
<li id="wheatCounter">
<p>Wheat <span id="wheatNum"></span>
<!--<p id = "wheatNum"></p>-->
</p>
</li>
</ul>
</div>
</div>
</div>
I'm not quite sure where I am going wrong. I did the same thing for both of them and I don't know why it works for one and not the other. The number of wheat farms displays and will update when I click the button. but the number of wheat wont even show the 0 starting value.
You should check out the console, when it says on this line:
document.getElementById("numWheat").innerHTML = numWheat;
Throws this error because there's no element there with id="numWheat":
Uncaught TypeError: Cannot set property 'innerHTML' of null
So all the code after that got stopped working. Remove that line and everything works.
Also, Math.Random() is not right. It's Math.random().
Fully Corrected Code
var wheatFields = 0;
var numWheat = 0;
var wheat = 0;
window.onload = function(){
document.getElementById("wheatFarms").innerHTML = wheatFields;
document.getElementById("wheatNum").innerHTML = wheat;
};
function addWheatFarm() {
wheatFields++;
document.getElementById("wheatFarms").innerHTML = wheatFields;
wheatHandler();
}
function wheatHandler(){
var lifespan = Math.floor(Math.random() * 50) + 10;
for (var i = 0; i <= lifespan; i++) {
wheat++;
document.getElementById("wheatNum").innerHTML = wheat;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<script type="text/javascript" src="Scripts.js"></script>
</head>
<body>
<div data-role = "page" id = "start">
<div class = "header">
<h1>Farming Game</h1>
</div>
<div data-role = "main" class = "ui-content">
<button id = "wheatButton" onclick = "addWheatFarm()">
Add a wheat farm.
</button>
</br>
<br>
<div id = "fieldContainer" class = "containers">
<ul data-role = "listview" id = "farms" data-count-theme = "b" data-insert = "true">
<br>
<li id = "fieldCounter">
<p>Wheat Fields
<var id = "wheatFarms"></var>
</p>
</li>
</ul>
</br>
</br>
</div>
<div id = "inventoryContainer" class = "containers">
<ul data-role = "listview" id = "inventory" data-count-theme = "b" data-insert = "true">
<li id = "wheatCounter">
<p>Wheat <span id = "wheatNum"></span>
<!-- <p id = "wheatNum"></p> -->
</p>
</li>
</ul>
</div>
</body>
</html>
Try this it will work
https://jsfiddle.net/debashishkumar/4mf1mvkc/
<div data-role="page" id="start">
<div class="header">
<h1>Farming Game</h1>
</div>
<div data-role="main" class="ui-content">
<button id="wheatButton" onclick="addWheatFarm(12)">
Add a wheat farm.
</button>
<br>
<div id="fieldContainer" class="containers">
<ul data-role="listview" id="farms" data-count-theme="b" data-insert="true">
<br>
<li id="fieldCounter">
<p>Wheat Fields
<var id="wheatFarms"></var>
</p>
</li>
</ul>
<div id="inventoryContainer" class="containers">
<ul data-role="listview" id="inventory" data-count-theme="b" data-insert="true">
<li id="wheatCounter">
<p>Wheat <span id="wheatNum"></span>
<p id = "wheatNum"></p>
</p>
</li>
</ul>
</div>
</div>
</div>
<script>
var wheatFields = 0;
var numWheat = 0;
var wheat = 0;
window.onload = function() {
document.getElementById("wheatFarms").innerHTML = wheatFields;
document.getElementById("numWheat").innerHTML = numWheat;
document.getElementById("wheatNum").innerHTML = wheat;
};
function addWheatFarm() {
wheatFields++;
document.getElementById("wheatFarms").innerHTML = wheatFields;
wheatHandler();
}
function wheatHandler() {
var lifespan = Math.floor(Math.random() * 50) + 10;
for (var i = 0; i <= lifespan; i++) {
wheat++;
document.getElementById("wheatNum").innerHTML = wheat;
}
}
</script>

get multiple element li with javascript

What I need to get all value of multiple li from the HTML code.
<div class="row">
<div style="margin-left:11px">
<strong>Detail Product</strong>
</div>
<div class="col-sm-12">
<ul class="item-highlights">
<li>4G LTE</li>
<li>Dual Sim</li>
<li>RAM 1GB</li>
</ul>
</div>
<div class="col-sm-12">
<ul class="item-highlights">
<li>ROM 8GB</li>
<li>Screen 5.5</li>
<li>Warranty 1 Year</li>
</ul>
</div>
This how i get with javascript:
var test = document.getElementById('block-system-main').getElementsByClassName('item-highlights item-highlights')[0].innerHTML;
and i get the answer:
<li>4G LTE</li><li>Dual Sim</li><li>RAM 1GB</li>
Heres an easy to understand answer.
var items = document.querySelectorAll( ".item-highlights li");
var values = [];
for( var n = 0; n < items.length; n++)
values.push( items[n].innerHTML);
If you know css then its simple to change the call to "querySelectorAll" as it is only comparing things through the same way css does, So you can change it however you like.
Expanding on #Tushar comment:
var test = '';
[].forEach.call( document.querySelectorAll('#block-system-main .item-highlights'), function(item) { return test += item.innerText; })
Check demo - Fiddle.
You should be able to select every li using querySelectorAll and then map those values. It would look like this:
var listItems = Array.prototype.slice.call(document.querySelectorAll('li'));
var vals = listItems.map(function (item) {
return item.innerHTML;
});
Example:
http://jsbin.com/zumewidoyo/edit?html,js,console
If you want to select every li element you can do something like this:
Live Preview
HTML
<div class="row">
<div style="margin-left:11px">
<strong>Detail Product</strong>
</div>
<div class="col-sm-12">
<ul class="item-highlights">
<li>4G LTE</li>
<li>Dual Sim</li>
<li>RAM 1GB</li>
</ul>
</div>
<div class="col-sm-12">
<ul class="item-highlights">
<li>ROM 8GB</li>
<li>Screen 5.5</li>
<li>Warranty 1 Year</li>
</ul>
</div>
JavaScript
//store the list elements
var lists = document.getElementsByTagName('li');
//array to hold the li elements
var liElements = [];
//loop through the lists
for (var i = 0; i < lists.length; i++) {
//add the li element values to the array
liElements.push(lists[i].innerHTML);
}
//show the results
alert(liElements.join("\n"));
The function getElementsByClassName return an array. Just iterate over it instead of using the "[0]" to get only the first element.
function getValue() {
var test = document.getElementById('block-system-main').getElementsByClassName('item-highlights');
var array = [];
for (var i = 0; i < test.length; i++) {
var liList = test[i].getElementsByTagName('li');
for (var j = 0; j < liList.length; j++)
array.push(liList[j].innerHTML);
}
return array;
}
alert(getValue());
<div id="block-system-main">
<div class="row">
<div style="margin-left:11px">
<strong>Detail Product</strong>
</div>
<div class="col-sm-12">
<ul class="item-highlights">
<li>4G LTE</li>
<li>Dual Sim</li>
<li>RAM 1GB</li>
</ul>
</div>
<div class="col-sm-12">
<ul class="item-highlights">
<li>ROM 8GB</li>
<li>Screen 5.5</li>
<li>Warranty 1 Year</li>
</ul>
</div>
</div>
</div>

JavaScript. Sorting ements by value of children

Need a bit of help with JS. I'm trying to figure out how to sort a pile of div's, using values of their children elements. I'v found a solution here on stack and tried to modify it a bit but with no luck so far.
Please, give me some advise. Thank you
The idea is to sort div.person according to their "age" element.
<!DOCTYPE html>
<html>
<head>
<title>Sort list items alphabetically with Javascript</title>
<script type="text/javascript">
function sortUnorderedList(div, sortDescending) {
if(typeof div == "number")
div = document.getElementById(div);
var lis = div.getElementsByClassName("person");
var vals = [];
for(var i = 0, l = lis.length; i < l; i++)
vals.push(lis[i].innerHTML);
vals.sort();
if(sortDescending)
vals.reverse();
for(var i = 0, l = lis.length; i < l; i++)
lis[i].innerHTML = vals[i];
}
window.onload = function() {
var desc = false;
document.getElementById("test").onclick = function() {
sortUnorderedList("list", desc);
desc = !desc;
return false;
}
}
</script>
</head>
<body>
<input type="button" id="test" value="Sort List"/>
<div id="list">
<div class="person">
<div>Jack</div>
<div>Plumber</div>
<div class="info">
<span class="age">24</span>
<span class="hair-color">Blonde</span>
</div>
</div>
<div class="person">
<div>Jill</div>
<div>Actress</div>
<div class="info">
<span class="age">18</span>
<span class="hair-color">Gray</span>
</div>
</div>
<div class="person">
<div>John</div>
<div>Driver</div>
<div class="info">
<span class="age">37</span>
<span class="hair-color">Brown</span>
</div>
</div>
</ul>
</body>
</html>
I changed the code a bit to make it more readable for myself.
First I get all the htmlNode by class name "person", though this will return a htmlCollection which is array-ish but not an array.
Therefore I convert it to an array on the next line so I can perform array-methods on it like 'sort'.
You can swap out the different compareFunctions I wrote for different kind of sorting.
After sorting I empty the existing content of the list-element, and fill it up again with for-loop.
function sortUnorderedList(list, sortDescending) {
var htmlCollection = list.getElementsByClassName("person"),
elements = [].slice.call(htmlCollection); //convert htmlCollection to array
//sort by ...
//elements.sort(compareNames);
//elements.sort(compareJobs);
elements.sort(compareAges);
if (sortDescending) elements.reverse();
list.innerHtml = ''; //remove current contents
for (var i = 0; i < elements.length; i++) {
list.appendChild(elements[i]); //add them again in different order
}
function compareNames(el1, el2) {
//innerText of the first child of each element is the name
if (el1.children[0].innerText < el2.children[0].innerText) return -1;
if (el1.children[0].innerText > el2.children[0].innerText) return 1;
return 0;
}
function compareJobs(el1, el2) {
//innerText of the second child of each element is the job
if (el1.children[1].innerText < el2.children[1].innerText) return -1;
if (el1.children[1].innerText > el2.children[1].innerText) return 1;
return 0;
}
function compareAges(el1, el2) {
var age1 = parseInt(el1.children[2].children[0].innerText),
age2 = parseInt(el2.children[2].children[0].innerText);
if(isNaN(age1))age1=-1;
if(isNaN(age2))age2=-1;
return age1 - age2;
}
}
window.onload = function() {
var desc = false;
document.getElementById("test").onclick = function() {
sortUnorderedList(document.getElementById('list'), desc);
desc = !desc;
return false;
};
};
<!DOCTYPE html>
<html>
<head>
<title>Sort list items alphabetically with Javascript</title>
</head>
<body>
<input type="button" id="test" value="Sort List" />
<div id="list">
<div class="person">
<div>Jack</div>
<div>Plumber</div>
<div class="info">
<span class="age">24</span>
<span class="hair-color">Blonde</span>
</div>
</div>
<div class="person">
<div>Jill</div>
<div>Actress</div>
<div class="info">
<span class="age">0</span>
<span class="hair-color">Gray</span>
</div>
</div>
<div class="person">
<div>John</div>
<div>Driver</div>
<div class="info">
<span class="age"></span>
<span class="hair-color">Brown</span>
</div>
</div>
</ul>
</body>
</html>

how to use for loop to cycle through lists of elements and set an elements style dynamically?

I have implemented a for loop to highlight the colour widget choices upon clicking one, however would like to only highlight the one that is clicked, the rest being without any border highlight. How would i go about this with just slight alterations to my code below? It is imperative to implement a for loop and pure javascript.
<html>
<head>
<meta charset="utf8" />
<title></title>
<script>
function changeColor(e) {
document.getElementById("page").className = e;
var i;
var x = document.getElementById("page");
for (i = 0; i < 5; i++)
if (document.getElementById("page").className = e ){
x.getElementsByTagName("li")[i].style.borderColor = "red";
}
}
</script>
</head>
<body>
<div id="page" class=""><!-- start page wrapper -->
<hr />
<div id="theme-picker">
<h2>Theme Picker</h2>
<p>Select a theme from the options below:</p>
<div id="palette">
<ul>
<li class="midnight" onClick="changeColor('midnight')">Midnight</li>
<li class="matrix" onclick="changeColor('matrix')">Matrix</li>
<li class="peardrop" onclick="changeColor('peardrop')">Peardrop</li>
<li class="skylight" onclick="changeColor('skylight')">Skylight</li>
<li class="sunset" onclick="changeColor('sunset')">Sunset</li>
</ul>
<div class="clearfix"></div>
<hr />
</div><!-- /page -->
</body>
</html>
Change the loop to this:
var i;
var x = document.getElementById("palette");
var items = x.getElementsByTagName("li");
for (i = 0; i < items.length; i++){
var item = items[i];
item.style.borderColor = item.className == e ? "red" : "";
}

toggle div while hiding other divs

I have a side nav on the left hand side with different types of surgeries. They are all in an ul.
When you click on a surgery (ul li), a div will show up on the right hand side, displaying FAQ's for that specific surgery. Clicking on another link in the ul will hide the currently open div and display the one you've just clicked on.
I've managed to do this, but I would also like to toggle the visibility of the FAQ div when I click the same ul li link again.
<html>
<head>
<style>
#popup div { display:none; }
#popup div.show { display:block; }
ul#links li { cursor:pointer;}
</style>
</head>
<body>
<div class="sidenav">
<ul id="links">
<li id="armlift">Arm Lift</li>
<li id="liposuction">Liposuction</li>
<li id="tummytuck">Tummy Tuck</li>
<li id="postgastric">Post-Gastric Bypass Surgery</li>
</ul>
</div>
<div id="popup">
<div id="a_armlift">
<span class="faq_header">Arm Lift</span>
<p class="treatment_question">What is a an Arm Lift?</p>
<div class="treatment_answer">This surgery removes excess...</div>
<p class="treatment_question">What should I know?</p>
<div class="treatment_answer">An incision is made...</div>
</div>
<div id="a_liposuction">
<span class="faq_header">Liposuction Lift</span>
<p class="treatment_question">What is a Liposuction?</p>
<div class="treatment_answer">Liposuction is the removal...</div>
<p class="treatment_question">What should I know?</p>
<div class="treatment_answer">Ideal candidates for...</div>
</div>
<div id="a_tummytuck">
<span class="faq_header">Tummy Tuck</span>
<p class="treatment_question">What is a Tummy Tuck?</p>
<div class="treatment_answer">A tummy tuck tightens...</div>
<p class="treatment_question">What is a Mini Tummy Tuck?</p>
<div class="treatment_answer">A mini-tuck is a...</div>
</div>
<div id="a_postgastric">
<span class="faq_header">Post-Gastric Bypass Surgery</span>
<p class="treatment_question">What is a Post-Gastric Bypass Surgery?</p>
<div class="treatment_answer">Gastric bypass surgery removes...</div>
<p class="treatment_question">What should I know?</p>
<div class="treatment_answer">Each patient has...</div>
</div>
</div>
<script type="text/javascript">
var links_ul = document.getElementById('links');
for (var i = 0; i < links_ul.children.length; i++) {
links_ul.children[i].onclick = function(ev) {
s = document.getElementById('a_' + this.id);
popup = document.getElementsByClassName('show');
for (var j = 0; j < popup.length; j++) {
popup[j].className = '';
}
s.className = 'show';
};
}
</script>
</body>
</html>
I would recommend looking into doing this differently. There are many plugins available that do this sort of thing.
But, here's the answer to your question: http://jsfiddle.net/6Vku8/1/
for (var i = 0; i < links_ul.children.length; i++) {
links_ul.children[i].onclick = function(ev) {
s = document.getElementById('a_' + this.id);
popup = document.getElementsByClassName('show');
var shown = s.className == 'show';
for (var j = 0; j < popup.length; j++) {
popup[j].className = '';
}
s.className = shown ? '' : 'show';
};
}​
You need to find out whether or not the div is "shown" before hiding all of the divs.

Categories