Var wont display [duplicate] - javascript

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>

Related

Local Storage not fetching more than 6 item

I am working on a Resume builder website in django. what I wanted is when a user tries to edit prebuild resume template I want to store data in local storage. So that users stay on the page even after refresh. What I have done is created an object which is storing every value of HTML then I have set it to local storage.
but when I getItem then It is fetching only a max 5 elements after that when I change any content in the template it is storing into local storage but not fetching it. Please help me.
<!DOCTYPE html>
<html>
<head>
<title>Resume Template!</title>
<style>
.template
{
background-color:#fafdfc;
height:650px;
width:550px;
border:3px solid blue;
box-shadow:1px 1px 6px;
padding:10px;
float:left;
}
#temp
{
margin:35px 168px;
}
#media print{
body *{
visibility: hidden;
}
.print-container, .print-container *{
visibility: visible;
}
}
</style>
</head>
<body>
<div id="temp" class = "print-container" >
<div class="template" style="float:left; margin-right:15px;">
<div style="float:left;padding:2px;" id="edit0" contenteditable="true" class = "save">
</div>
<div>
<img src="images/resume%20pic.jpg" style="height:100px; width:100px; margin-left:56px; margin-right:20px; margin-top:8px">
</div>
<div style="float:none">
<p style="border-top:1px solid black;"></p>
<p style="font-size:12px; background-color:lightgrey; padding:3px" contenteditable="true">
<b id="edit1" style="padding:3px;" class = "save">CAREER OBJECTIVE</b>
</p>
<p style="font-size:11px;padding:2px;" contenteditable="true" id="edit2" class ="save">To associate myself with a reputed organization where I can utilize my skills to fulfil the goals & objectives of the organization and could enhance my competencies and potential.</p>
<p style="font-size:12px; background-color:lightgrey; padding:3px">
<b contenteditable="true" id="edit3" style="padding:3px;" class = "save">EDUCATIONAL QUALIFICATION</b>
</p>
<table style="font-size:11px; border:1px solid black;padding:4px;" contenteditable="true" id="edit4" class = "save">
<tr>
<td><b id ='course'>Course</b> </td>
<td><b id = 'Board'>Board/University </b></td>
<td><b id = 'Clg-Name'>Name Of Institute </b></td>
<td><b id = 'yearofpassing'>Year Of Passing  </b></td>
<td><b id = 'percentage'>Percentage/CGPA</b></td>
</tr>
<tr>
</tr>
</table>
<p style="font-size:12px; background-color:lightgrey; padding:3px">
<b contenteditable="true" id="edit5" style="padding:3px;" class = "save">TECHNICAL SKILLS</b>
</p>
<ul style="font-size:11px; padding-left:15px;padding-bottom:2px;padding-right:2px;padding-top:2px;" contenteditable="true" id="edit6" class = "save">
<li id = 'tech-skill0'>Beginner of Jquery, Bootstrap, Nodejs, Reactjs, Express, Mongodb.</li>
<li id = 'tech-skill1'>Proficient in C, Python, HTML, CSS.</li>
<li id = 'tech-skill2'>Sufficient Knowledge of C++, SQL, Data Structure, DBMS, Javascript.</li>
</ul>
<p style="font-size:12px; background-color:lightgrey; padding:3px">
<b contenteditable="true" id="edit7" style="padding:3px;" class = "save">TRAININGS ATTENDED</b>
</p>
<ul style="font-size:11px; padding-left:15px;padding-bottom:2px;padding-right:2px;padding-top:2px;" contenteditable="true" id="edit8" class = "save">
<li id = 'training-attended0'>Attended 40 days training on "C++" at "WEBCOM Technologies, Yamunanagar" (June 2019 to July 2019).</li>
<li id = 'training-attended1'>Attended 21.5 hours training on "Python" from "Udemy" (July 2020 to Aug 2020).</li>
</ul>
<p style="font-size:12px; background-color:lightgrey; padding:3px">
<b contenteditable="true" style="padding:3px;" id="edit9" class = "save">ACADEMIC PROJECTS UNDERTAKEN</b>
</p>
<ul style="font-size:11px; padding-left:15px">
<li contenteditable="true" style="padding:2px;" id="edit10" class = "save">
<div style="float:left">
<b id = 'project-name0'>TRAVEL MANIA - </b>
</div>
<div style="font-style:italic; float:right; margin-right:40px" id = 'project-duration0'>(Duration - 2 months)</div>
<div style="float:none">
<br>
<p id = 'project-description0'>(It is a travelling website that enables users to plan their travel without any hassle. It is a team project in which I worked as a front-end developer.)</p>
</div>
<br>
<br>
</li>
</ul>
</div>
</div>
<div class="template">
<ul style="font-size:11px; padding-left:15px">
<li id="edit11" contenteditable="true" style="padding:2px;" class = "save">
<div style="float:left">
<b id = 'project-name1'>JARVIS - PERSONAL ASSISTANT - </b>
</div>
<div style="font-style:italic; float:right; margin-right:48px" id = 'project-duration1'>(Duration - 1 week)</div>
<div style="float:none">
<br>
<p id = 'project-description1'>(This project assists the end-user with day to day activities like searching queries in Google, finding locations, sending emails, playing songs, searching instagram profiles, opening webcam and many more.)</p>
</div>
<br>
</li>
<li id="edit12" contenteditable="true" style="padding:2px;" class = "save">
<div style="float:left">
<b id = 'project-name2'>RESPRO - </b>
</div>
<div style="font-style:italic; float:right; margin-right:40px" id = 'project-duration2'>(Duration - 2 months)</div>
<div style="float:none">
<br>
<p id = 'project-description2'>(It is a website that provides a simple and efficient way of creating resume and cover letter for individuals. It is a team project in which I worked as a front-end developer.)</p>
</div>
</li>
</ul>
<p style="font-size:12px; background-color:lightgrey; padding:3px">
<b id="edit13" contenteditable="true" style="padding:3px;" class = "save">SOFT SKILLS</b>
</p>
<ul style="font-size:11px; padding-left:15px;padding-bottom:2px;padding-right:2px;padding-top:2px;" contenteditable="true" id="edit14" class = "save">
<li id = 'softskill0'>Teamwork</li>
<li id = 'softskill1'>Leadership</li>
<li id = 'softskill2'>Communication skills</li>
<li id = 'softskill3'>Time management</li>
</ul>
<p style="font-size:12px; background-color:lightgrey; padding:3px">
<b contenteditable="true" id="edit15" style="padding:3px;" class = "save">ACHIEVEMENTS</b>
</p>
<ul style="font-size:11px; padding-left:15px;padding-bottom:2px;padding-right:2px;padding-top:2px;" contenteditable="true" id="edit16" class = "save">
<li id = 'Achievement0'>Won third position in FashP competition (2019).</li>
<li id = 'Achievement1'>Won first position in Flower Arrangement competition (2012).</li>
<li id = 'Achievement2'>Won second position in Drawing competition (2012).</li>
<li id = 'Achievement3'>Won certificate for best entry in group D of All India Camel Color Contest (2011).</li>
<li id = 'Achievement4'>Participated in Snacks Making competition (2011).</li>
<li id = 'Achievement5'>Participated in many Dance competitions.</li>
</ul>
<p style="font-size:12px; background-color:lightgrey; padding:3px">
<b contenteditable="true" id="edit17" style="padding:3px;" class = "save">PERSONAL PROFILE</b>
</p>
<p style="font-size:12px;padding:2px;" contenteditable="true" id="edit18" class = "save">
</p>
</div>
</div>
<button id = "safe">Save</button>
<input type="button" id = 'print' onclick = "window.print();" value = "print">
<script src ="script.js" charset="utf-8"></script>
</body>
</html>
Here Is my template I have deleted some private information.
My javaScript File :
window.stop();
document.getElementById("safe").addEventListener("click", function(){
var x = document.querySelectorAll(".save");
for(var i =0; i<x.length; i++)
{
x[i].removeAttribute("contenteditable");
}
});
document.getElementById("temp").addEventListener("click", function(){
var x = document.querySelectorAll(".save");
for(var i = 0; i<x.length; i++){
x[i].setAttribute('contenteditable', "true");
}
});
const element = document.getElementById('temp');
if (typeof Storage !== 'undefined'){
element.addEventListener("keypress", function(event){
const myObject ={
'name': document.getElementById('name').innerText,
'address': document.getElementById('address').innerText,
'mobile': document.getElementById('mobile').innerText,
'e-mail': document.getElementById('e-mail').innerText,
'linkedin': document.getElementById('linkedin-id').innerText,
'career': document.getElementById('edit1').innerText,
'text': document.getElementById('edit2').innerText,
'education': document.getElementById('edit3').innerText,
'course': document.getElementById('course').innerText,
'Board': document.getElementById('Board').innerText,
'Clg-name': document.getElementById('Clg-Name').innerText,
'yearofpassing': document.getElementById('yearofpassing').innerText,
'percentage': document.getElementById('percentage').innerText,
'class0' : document.getElementById('class0').innerText,
'uni-name0': document.getElementById('uni-name0').innerText,
'college0': document.getElementById('college0').innerText,
'year0': document.getElementById('year0').innerText,
'percent0': document.getElementById('percent0').innerText,
'class1': document.getElementById('class1').innerText,
'uni-name1': document.getElementById('uni-name1').innerText,
'college1': document.getElementById('college1').innerText,
'year1': document.getElementById('year1').innerText,
'percent1': document.getElementById('percent1').innerText,
'class2': document.getElementById('class2').innerText,
'uni-name2': document.getElementById('uni-name2').innerText,
'college2': document.getElementById('college2').innerText,
'year2': document.getElementById('year2').innerText,
'percent2': document.getElementById('percent2').innerText,
'edit5': document.getElementById('edit5').innerText,
'tech-skill0': document.getElementById('tech-skill0').innerText,
'tech-skill1': document.getElementById('tech-skill1').innerText,
'tech-skill2': document.getElementById('tech-skill2').innerText,
'edit7': document.getElementById('edit7').innerText,
'training-attended0': document.getElementById('training-attended0').innerText,
'training-attended1': document.getElementById('training-attended1').innerText,
'edit9': document.getElementById('edit9').innerText,
'project-name0': document.getElementById('project-name0').innerText,
'project-duration0': document.getElementById('project-duration0').innerText,
'project-description0': document.getElementById('project-description0').innerText,
'project-name1': document.getElementById('project-name1').innerText,
'project-duration1': document.getElementById('project-duration1').innerText,
'project-description1': document.getElementById('project-description1').innerText,
'project-name2': document.getElementById('project-name2').innerText,
'project-duration2': document.getElementById('project-duration2').innerText,
'project-description2': document.getElementById('project-description2').innerText,
'edit13': document.getElementById('edit13').innerText,
'softskill0': document.getElementById('softskill0').innerText,
'softskill1': document.getElementById('softskill1').innerText,
'softskill2': document.getElementById('softskill2').innerText,
'softskill3': document.getElementById('softskill3').innerText,
'edit15': document.getElementById('edit15').innerText,
'Achievement0': document.getElementById('Achievement0').innerText,
'Achievement1': document.getElementById('Achievement1').innerText,
'Achievement2': document.getElementById('Achievement2').innerText,
'Achievement3': document.getElementById('Achievement3').innerText,
'Achievement4': document.getElementById('Achievement4').innerText,
'Achievement5': document.getElementById('Achievement5').innerText,
'edit17': document.getElementById('edit17').innerText,
'father': document.getElementById('father').innerText,
'father-Name': document.getElementById('father-Name').innerText,
'mother': document.getElementById('mother').innerText,
'mother-Name': document.getElementById('mother-Name').innerText,
'dof': document.getElementById('dof').innerText,
'date': document.getElementById('date').innerText,
'martial-status': document.getElementById('martial-status').innerText,
'status': document.getElementById('status').innerText,
'hobbies': document.getElementById('hobbies').innerText,
'hobby': document.getElementById('hobby').innerText,
};
localStorage.setItem("Content",JSON.stringify(myObject));
})
}
const mysessionData = JSON.parse(localStorage.getItem("Content"));
document.getElementById('edit1').innerText = mysessionData.career
document.getElementById('edit2').innerText = mysessionData.text
document.getElementById('edit3').innerText = mysessionData.education
document.getElementById('course').innerText = mysessionData.course
document.getElementById('Board').innerText = mysessionData.Board
document.getElementById('Clg-name').innerText = mysessionData.Clg-Name
document.getElementById('yearofpassing').innerText = mysessionData.yearofpassing
document.getElementById('percentage').innerText = mysessionData.percentage
document.getElementById('class0').innerText = mysessionData.class0
document.getElementById('uni-name0').innerText = mysessionData.uni-name0
document.getElementById('college0').innerText = mysessionData.college
document.getElementById('year0').innerText = mysessionData.year0
document.getElementById('percent0').innerText = mysessionData.percent0
document.getElementById('class1').innerText = mysessionData.class1
document.getElementById('uni-name1').innerText = mysessionData.uni-name1
document.getElementById('college1').innerText = mysessionData.college1
document.getElementById('year1').innerText = mysessionData.year1
document.getElementById('percent1').innerText = mysessionData.percent1
document.getElementById('class2').innerText = mysessionData.class2
document.getElementById('uni-name2').innerText = mysessionData.uni-name2
document.getElementById('college2').innerText = mysessionData.college2
document.getElementById('year2').innerText = mysessionData.year2
document.getElementById('percent2').innerText = mysessionData.percent2
document.getElementById('edit5').innerText = mysessionData.edit5
document.getElementById('tech-skill0').innerText = mysessionData.tech-skill0
document.getElementById('tech-skill1').innerText = mysessionData.tech-skill1
document.getElementById('tech-skill2').innerText = mysessionData.tech-skill2
document.getElementById('edit7').innerText = mysessionData.edit7
document.getElementById('training-attended0').innerText = mysessionData.training-attended0
document.getElementById('training-attended1').innerText = mysessionData.training-attended1
document.getElementById('edit9').innerText = mysessionData.edit9
document.getElementById('project-name0').innerText = mysessionData.project-name0
document.getElementById('project-duration0').innerText = mysessionData.project-duration0
document.getElementById('project-description0').innerText = mysessionData.project-description0
document.getElementById('project-name1').innerText = mysessionData.project-name1
document.getElementById('project-duration1').innerText = mysessionData.project-duration1
document.getElementById('project-description1').innerText = mysessionData.project-description1
document.getElementById('project-name2').innerText = mysessionData.project-name2
document.getElementById('project-duration2').innerText = mysessionData.project-duration2
document.getElementById('project-description2').innerText = mysessionData.project-description2
document.getElementById('edit13').innerText = mysessionData.edit13
document.getElementById('softskill0').innerText = mysessionData.softskill0
document.getElementById('softskill1').innerText = mysessionData.softskill1
document.getElementById('softskill2').innerText = mysessionData.softskill2
document.getElementById('softskill3').innerText = mysessionData.softskill3
document.getElementById('edit15').innerText = mysessionData.edit15
document.getElementById('Achievement0').innerText = mysessionData.Achievement0
document.getElementById('Achievement1').innerText = mysessionData.Achievement1
document.getElementById('Achievement2').innerText = mysessionData.Achievement2
document.getElementById('Achievement3').innerText = mysessionData.Achievement3
document.getElementById('Achievement4').innerText = mysessionData.Achievement4
document.getElementById('Achievement5').innerText = mysessionData.Achievement5
document.getElementById('edit17').innerText = mysessionData.edit17
document.getElementById('father').innerText = mysessionData.father
document.getElementById('father-name').innerText = mysessionData.father-Name
document.getElementById('mother').innerText = mysessionData.mother
document.getElementById('mother-name').innerText = mysessionData.mother-Name
document.getElementById('dof').innerText = mysessionData.dof
document.getElementById('date').innerText = mysessionData.date
document.getElementById('martial-status').innerText = mysessionData.martial-status
document.getElementById('status').innerText = mysessionData.status
document.getElementById('hobbies').innerText = mysessionData.hobbies
document.getElementById('hobby').innerText = mysessionData.hobby
I know I have written very weird javascript but please Help me.
Or suggest some other way to do the same thing. I don’t know much I am just a beginner in web development.

You can not read properties containing hyphens in the property name like this :
'-', '+', '*' etc. are operands. You can understand why they will not work.
document.getElementById('Clg-name').innerText = mysessionData.Clg-Name
Try this :
document.getElementById('Clg-name').innerText = mysessionData['Clg-Name'];

Image gallery dosen't fuction properly on webpage

Brand new to web development.
I was following this tutorial: https://www.youtube.com/watch?v=cVyhH3t49fs
Having trouble getting the at the end of index.html to function properly, despite having copied it exactly (my 'images' folder is called 'imgs' instead). Specifically, nothing happens when I click on the numbered buttons to swap images in the gallery.
Project files: https://drive.google.com/drive/folders/1R32WhB-oWDybyNZ3NtAVRMp370QKXJiX?usp=sharing
<div class="container">
<div class="navbar">
<img src="./imgs/logo.png" class="logo" />
<nav>
<ul>
<li>Home</li>
<li>Office</li>
<li>Hotels</li>
<li>Contact Us</li>
</ul>
</nav>
<img src="./imgs/menu.png" class="menu-icon" />
</div>
<div class="row">
<div class="col">
<div class="text-box">
<h5>Our Products</h5>
<h1>
<b>Simplicity</b> <br />
is the <b>ultimate</b> sophistication
</h1>
</div>
<img src="./imgs/circle.png" class="small-icon1" />
<img src="./imgs/circle.png" class="small-icon2" />
<img src="./imgs/square.png" class="small-icon3" />
</div>
<div class="col" class="col-right">
<div class="gallery-box">
<img src="./imgs/pic2.jpg" id="gallery" />
<ul>
<li class="btn">01</li>
<li class="btn active">02</li>
<li class="btn">03</li>
<li class="btn">04</li>
</ul>
</div>
</div>
</div>
<img src="./imgs/circle.png" class="small-icon4" />
<img src="./imgs/square.png" class="small-icon5" />
</div>
<script>
var btn = document.getElementsByClassName('btn');
var gallery = document.getElementById('gallery');
var imgs = new Array(
'imgs/pic1.jpg',
'imgs/pic2.jpg',
'imgs/pic3.jpg',
'imgs/pic4.jpg',
);
for (let i = 0; i < btn.legnth; i++) {
btn[i].onclick = function () {
gallery.src = imgs[i];
let current = document.getElementsByClassName('active');
current[0].className = current[0].className.replace('active', '');
this.className += 'active';
};
}
</script>
Any help would be apprecaited. Thanks!

I was reading you code and find the mistake. You write 'length' wrong in the loop. Here how te right code looks like:
for (let i = 0; i < btn.length; i++) {
btn[i].onclick = function () {
gallery.src = imgs[i];
let current = document.getElementsByClassName('active');
current[0].className = current[0].className.replace('active', '');
this.className += 'active';
};
}

How to change style on other element using Javascript with nodelist

Need help with using js script.
<ul class="producers-links">
<li class="section_All active-producer">A-Z</li>
<li class="section_0-9">0-9</li>
<li class="section_A">A</li>
<li class="section_B">B</li>
<li class="section_C">C</li>
</ul>
And
<div class="producers-list">
<div class="producers-container" id="producers-0-9">
<div class="break-producers">0-9</div>
</div>
<div class="producers-container" id="producers-A">
<div class="break-producers">A</div>
Producer 1
</div>
<div class="producers-container" id="producers-B">
<div class="break-producers">B</div>
Producer 2
</div>
<div class="producers-container" id="producers-C">
<div class="break-producers">C</div>
Producer 3
</div>
</div>
How to make js script that will allow user click on list element then all divs from producers-list will get display:none without this one which was clicked at list.
var producersList = document.querySelectorAll('ul.producers-links>li');
var producersLists = document.querySelectorAll('div.producers-list>div.producers-container');
for (var i = 0; i < producersList.length; i++) {
producersList[i].addEventListener('click', function () {
document.querySelector('.active-producer').classList.remove('active-producer');
this.classList.add('active-producer');
var index = 0,
length = producersList.length;
for (; index < length; index++) {
producersLists[index].style.display = "none";
}
});
}
This allow me to hide all elements from producers-container but i don't know how to show only one element clicked before at list.

First of all you should use classes instead of id in the second list in order to have the ability to add more procedures in the future
try this:
<ul class="producers-links">
<li id="section_All" class="active-producer">A-Z</li>
<li id="section_0-9">0-9</li>
<li id="section_A">A</li>
<li id="section_B">B</li>
<li id="section_C">C</li>
</ul>
<div class="producers-list">
<div class="producers-container section_0-9 section_All">
<div class="break-producers">0-9</div>
</div>
<div class="producers-container section_A section_All">
<div class="break-producers">A</div>
Producer 1
</div>
<div class="producers-container section_B section_All">
<div class="break-producers">B</div>
Producer 2
</div>
<div class="producers-container section_C section_All">
<div class="break-producers">C</div>
Producer 3
</div>
</div>
var producersList = document.querySelectorAll('ul.producers-links > li');
var producersLists = document.querySelectorAll('.producers-container');
for (var i = 0; i < producersList.length; i++) {
producersList[i].addEventListener('click', function () {
document.querySelector('.active-producer').classList.remove('active-producer');
this.classList.add('active-producer');
for (var index = 0; index < producersLists.length ; index++) {
var currElement = producersLists[index];
var hide = !currElement.classList.contains(this.id);
producersLists[index].style.display = hide? "none" : "block";
}
});
}

On click, you can sequentially:
- hide all
- select the one having the same end of id than the textContent of the clicked item (or select all if text is A-Z)
var producersList = document.querySelectorAll('ul.producers-links>li');
var producersLists = document.querySelectorAll('div.producers-list>div.producers-container');
// add eventlistener...
producersList.forEach(x => {
x.addEventListener("click", x => {
hideAll();
document.querySelector('.active-producer').classList.remove('active-producer');
x.target.classList.add('active-producer');
const txt = x.target.textContent;
selectForText(txt);
});
});
// hide/show all...
function hideAll(bShow) {
const cl = bShow === true?"block":"none";
producersLists.forEach(x => x.style.display = cl);
}
// select for text...
function selectForText(txt) {
if(txt === "A-Z") {
// select all...
hideAll(true);
return;
}
// the [...nodelist] part allows to 'cast' to proper array, and to have access to find() function...
const found = [...producersLists].find(q => q.id.split("producers-")[1] === txt);
if(found) {
found.style.display = "block";
}
else {
// ???
}
}
.active-producer {
color: #19f;
}
<ul class="producers-links">
<li class="section_All active-producer">A-Z</li>
<li class="section_0-9">0-9</li>
<li class="section_A">A</li>
<li class="section_B">B</li>
<li class="section_C">C</li>
</ul>
And
<div class="producers-list">
<div class="producers-container" id="producers-0-9">
<div class="break-producers">0-9</div>
</div>
<div class="producers-container" id="producers-A">
<div class="break-producers">A</div>
Producer 1
</div>
<div class="producers-container" id="producers-B">
<div class="break-producers">B</div>
Producer 2
</div>
<div class="producers-container" id="producers-C">
<div class="break-producers">C</div>
Producer 3
</div>
</div>

Rendering HTML table inside <div> using javascript function

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

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