We Keep Coding

Multiple uses of the same script causing functionality errors

Sorry for the lack of knowledge but I don't know where else to turn. I had been working on the CSS for a project while the javascript was handled by a colleague. That colleague has now left the company and I have to finish his work to hit a deadline with very little knowledge of javascript. He had created a simple function (show/hide) that allowed us to show and hide content with an unordered list. Namely when you click on a list item, the corresponding div shows and the rest hides.
This was working fine, however I have since been asked to duplicate this so that multiple (show/hides) can be used on the page. When I did this the first one works ok, but the next scripts intefere with eachother and also hide content in the other divs. I've tried to fix this using my non-existent knowledge of javascript but to know avail (attempt is below). Any help here would be massively appreciated. Thanks in advance!
function toggle(target) {
var artz = document.getElementsByClassName('history');
var targ = document.getElementById(target);
var isVis = targ.style.display == 'block';
// hide all
for (var i = 0; i < artz.length; i++) {
artz[i].style.display = 'none';
}
// toggle current
targ.style.display = isVis? 'none' : 'block';
return false;
}
function toggle2(target) {
var artz2 = document.getElementsByClassName('vision');
var targ2 = document.getElementById(target2);
var isVis2 = targ.style.display == 'block';
// hide all
for (var i = 0; i < artz2.length; i++) {
artz2[i].style.display = 'none';
}
// toggle current
targ2.style.display = isVis2? 'none' : 'block';
return false;
}
jQuery(document).ready(function($) {
$('.slide-menu li a').on('click', function(){
$(this).parent().addClass('current').siblings().removeClass('current');
});
});
.container {
float: left;
}
.display-item {
display: none;
}
.display-item:first-of-type {
display: block;
}
.slide-menu li.current a {
color: #75aaaf;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="container">
<ul class="slide-menu" id="first">
<li class="current">1348</li>
<li>1558</li>
<li>1590</li>
</ul>
<div class="display-item history" id="1348" style="display:block;">History Content</div>
<div class="display-item history" id="1558">History Content2</div>
<div class="display-item history" id="1590">History Content3</div>
</div>
<div class="container">
<ul class="slide-menu" id="second">
<li class="current">Introduction</li>
<li>Highways</li>
<li>Transport</li>
</ul>
<div class="display-item vision" id="base" style="display:block;">Vision Content</div>
<div class="display-item vision" id="highways">Vision Content2</div>
<div class="display-item vision" id="transport">Vision Content3</div>
</div>

I think your code is okay if you intend duplicating the first toggle function in toggle2 function all you have to do is
Change the onclick event function from toggle to toggle2
<div class="container">
<ul class="slide-menu" id="second">
<li class="current"><a href="#/"
onclickk="toggle2('base');">Introduction</a></li>
<li><a href="#/"
onclick="toggle2('highways');">Highways</a></li>
<li><a href="#/"
onclick="toggle2('transport');">Transport</a></li>
</ul>
<div class="display-item vision" id="base"
style="display:block;">Vision Content</div>
<div class="display-item vision" id="highways">Vision
Content2</div>
<div class="display-item vision" id="transport">Vision
Content3</div>
</div>

This really isn't the way to set this up as it just causes the code to grow as more items need to be shown/hidden and the new code is largely the same as the old code. The original code also is more complex than it need be.
The following code will work no matter how many container structures you put on the page as long as you keep the structure the same as it is now. No ids are needed. No JQuery is needed either. You'll never need to touch the JavaScript, just add/remove HTML containers as you see fit.
See comments inline for details on what's happening.
.container {
float: left;
border:1px solid #e0e0e0;
margin:10px;
width:25%;
padding:3px;
}
/* Don't use hyperlinks <a></a> when you aren't
navigating anywhere. If you just need something
to click on, any element will do.
We'll just style the clickable elements to look like links
*/
.slide-menu > li {
text-decoration:underline;
cursor:pointer;
color: #75aaaf;
}
.hidden { display: none; } /* This class will be toggled upon clicks */
<!--
Don't use hyperlinks <a></a> when you aren't
navigating anywhere. If you just need something
to click on, any element will do.
The elements that should be hidden by default
will be so because of the "hidden" class that
they start off with.
No JQuery needed for this. Keep the HTML clean and
do all the event binding in JavaScript (no onclick="...")
-->
<div class="container">
<ul class="slide-menu">
<li class="current">1348</li>
<li>1558</li>
<li>1590</li>
</ul>
<div class="history" id="1348">History Content</div>
<div class="history hidden" id="1558">History Content2</div>
<div class="history hidden" id="1590">History Content3</div>
</div>
<div class="container">
<ul class="slide-menu">
<li class="current">Introduction</li>
<li>Highways</li>
<li>Transport</li>
</ul>
<div class="vision" id="base">Vision Content</div>
<div class="vision hidden" id="highways">Vision Content2</div>
<div class="vision hidden" id="transport">Vision Content3</div>
</div>
<!-- The following function will run automatically when this script element
is reached. Always keep the script just before the closing body tag (</body>). -->
<script>
(function(){
// Get any/all slide-menu elements into an array
let menus =Array.prototype.slice.call(document.querySelectorAll(".slide-menu"));
// Loop over the menus
menus.forEach(function(menu){
// Loop over the list items in the menu
Array.prototype.slice.call(menu.querySelectorAll("li")).forEach(function(item, index){
let idx = index;
// Set up a click event handler for each item
item.addEventListener("click", function(){
// Get all the <div> items in this menu into an Array
let divs = Array.prototype.slice.call(menu.parentElement.querySelectorAll("div"));
// Hide any item that was previously showing
divs.forEach(function(div){ div.classList.add("hidden"); });
// Query the parent element (the container) for all the
// corresponding <div> items and make it visible
divs[idx].classList.remove("hidden");
});
});
});
}());
</script>

Style for loop with CSS

Im supposed to make 8 boxes and style them each, make the boxes with for loop. Every odd box should look different then the others. I have tried to make an id, but when i use the id in CSS, it wont do anything. Can someone help?
Here is the code i have:
var text = "";
var i;
for (i = 1; i < 10; i++) {
text += "Box number " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
.demo {
border: black;
}
<p id="demo"></p>

As volodymyr says use css nth-child property.
In javascript you can accomplish this in the following manner:
for(let i = 0; i < document.querySelectorAll('.class').length; i += 2){
document.querySelectorAll('.class')[i].style.color = 'red';
}
<div class="class">1</div>
<div class="class">2</div>
<div class="class">3</div>
<div class="class">4</div>
<div class="class">5</div>
<div class="class">6</div>
<div class="class">7</div>
<div class="class">8</div>
<div class="class">9</div>
<div class="class">10</div>
This uses a for loop which iterates over every odd element, and then applies styles via javascript. Usually a pure CSS implementation would be preferable though.

You can use css nth-clild property
.class:nth-child(odd) {background: red}
<div class="class">1</div>
<div class="class">2</div>
<div class="class">3</div>
<div class="class">4</div>
<div class="class">5</div>
<div class="class">6</div>
<div class="class">7</div>
<div class="class">8</div>
<div class="class">9</div>
<div class="class">10</div>

Your css references the "class" demo selector but your HTML uses an "id" property id='demo'. Change either one to match the other.

Repeat block of text for each DIV instance

I am trying to get text to showup after each post in my Tumblr theme, and the javascript works in the jsfiddle, but not when I include it into the theme. Am I missing something?
http://jsfiddle.net/KP3uw/70/
HTML
<div id="wrapper">
<div class="post">
<div class="stat-wrap"></div>
</div>
<div class="post">
<div class="stat-wrap"></div>
</div>
<div class="post">
<div class="stat-wrap"></div>
</div>
<div class="post">
<div class="stat-wrap"></div>
</div>
<div class="post">
<div class="stat-wrap"></div>
</div>
<div id="counter"></div>
</div>
JAVSCRIPT
/*global */
function statwrap() {
var count;
var counter;
var bob;
count = document.getElementsByTagName('div').length;
counter = document.getElementById('counter').innerHTML = count;
bob = document.getElementsByClassName('stat-wrap');
var i;
for (i = 0; i < counter; i++) {
bob[i].innerHTML = "jkfdgdff14";
}
}
window.onload = statwrap();
Here's my tumblr theme I have pasted the javascript into btw. (http://lgbtvee.tumblr.com/) I've tried both just above </head> and </body> ending tags but it didn't work either place.

I think you have made this wayy to complicated.
Try using jQuery and using the append() function:
$( ".stat-wrap" ).append( "<p>Test</p>" );
Example:
http://jsfiddle.net/KP3uw/74/

maybe it's not exactly answer to your question but you can add some content to all elements with css :after.
.stat-wrap:after {
content: "jkfdgdff14";
display: block;
}
demo: http://jsfiddle.net/t0ro94dz/

I would have made this a comment, but don't have enough reputation to do it yet.
Your loop's condition i < counter is off, I think. The variable counter is tied to innerHTML, which I believe is a string (not a number). Try changing it to i < count.
--edit--
I also noticed that your theme is throwing 2 of the same errors:
Uncaught TypeError: Cannot set property 'innerHTML' of null
since you don't actually have any elements with the ID of counter on the page. Also, in the page source, your script is repeated twice.

I dont know what is not working but there are so many divs. Maybe you want limit and say
count = document.getElementsByClassName('post').length;
Also can you check if you need to parse innerHTML into int using parseInt, some JS compilers can scream
document.getElementById('counter').innerHTML = count;
count = parseInt(document.getElementById('counter').innerHTML);
OR simply
document.getElementById('counter').innerHTML = count
counter = count

Uncaught TypeError: Cannot read property 'length' of undefined on json_encode()

So I am trying for 2 hours now, and I am still not able to get what's wrong with my code. I have created a simple XMLHttpRequest which gets information from a PHP page which is some data from the database. This is what I have done:
var xhr2 = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xhr2.open('GET', 'admin/images_data.php');
xhr2.onreadystatechange = function (e) {
var album_photos = eval(xhr2.responseText);
console.log(album_photos);
for (var i = 0; i < album_photos.length; i++) {
var td = document.createElement('td');
var imagewrap = document.createElement('div');
imagewrap.className = "image-wrap";
var imagemenu = document.createElement('div');
imagemenu.className = "image-menu";
var imagemenuimg1 = document.createElement('img');
imagemenuimg1.src = "img/edit_img.png";
var imagemenuimg2 = document.createElement('img');
imagemenuimg2.src = "img/close.png";
var imagewrapimg = document.createElement('img');
imagewrapimg.className = "thumbnail";
imagewrapimg.src = "admin/album_photos/" + album_photos[i].Image_Path;
document.getElementById("tiare").appendChild(td);
td.appendChild(imagewrap);
imagewrap.appendChild(imagemenu);
imagemenu.appendChild(imagemenuimg1);
imagemenu.appendChild(imagemenuimg2);
imagewrap.appendChild(imagewrapimg);
}
}
xhr2.send(null);
What I get is this in the console:
Uncaught TypeError: Cannot read property 'length' of undefined
xhr2.onreadystatechange
[Object, Object]
[Object, Object]
This is my HTML on which the elements are appended:
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- <div class="big_image" id="drop_zone">
<img src="" id="big_img" />
</div -->
<div class="images_holder">
<div class="header">Album Name - Photo Album <span class="close"><img src="img/close.png" /></span>
</div>
<div class="body">
<table width="80%">
<tr id="tiare">
<td>
<div class="image-wrap">
<div class="image-menu">
<img src="img/edit_img.png" />
<img src="img/close.png" />
</div>
<img src="img/anger.jpg" class="thumbnail" />
</div>
</td>
</tr>
</table>
</div>
</div>
<div id="drop_zone">Drag/Drop images to upload.</div>
<div style="height: 30px; width: 80%; color: white; text-align: center; margin: 0 auto;">
<p id="progress_bar" style="width: 0%; background-color: red;"></p>
</div>
<script src="js/script.js"></script>
</body>
</html>
Another problem that's occurring is that their are 2 objects coming with 2 more objects in them where as it should show only 1 object with 2 more objects in it.
HOw can I solve this problem?
Note: I have to use pure Javascript no jQuery allowed :P.

there are two possible reasons for this error as far as I recall, or generally, errors with appendChild.
the DOM has not finished load ---> try putting your code, (any code that appends to the DOM rendered via HTML) inside jQuery's document ready. or window.onload (for pure javascript even in the controller.
the second reason is that something other than an html node is being passed.
I had this happen when I had a function which returned an array of nodes to be inserted. Therefore, when it returned an array of only one item, I mistakingly thought of it as a node and could not figure out why

Seriously, use jQuery.
If not, use at least NOT eval, it can be spoofed and FUBAR things too easily.
Should be using this:
var album_photos = JSON.parse(xhr2.responseText);

Document.write alternatives examples

I have been using document.write to generate the HTML part of my page, populating it using a loop. For example I need to create 10 of the following things on my page:
<div class=" normal" id="1"
style="text-align:left;
top: 13px;
left: 5px;
height: 10em;
width: 12em;">
<div class = "wrap">
<div class = "show">
<strong>New York City
<p>Status: Cold</p>
</strong>
</div>
<div class = "noshow">
<P>0001: Normal</P>
</div>
<div class = "here">
<P>0001: online</P>
<P>0002: online</P>
</div>
</div>
</div>
I been doing :
<script>
document.write("<div class=\"");
.. you get the idea</script>
What is another way to do this with jquery or just not-document.write? Could you also provide short example applied onto the code I have above.

Jquery .html() Could be good for this purpose.
<script>
$(function() {
var htmlString = "<div>.. you get the idea</div>";
$("body").html(htmlString);
});
</script>
or this will append html:
.append()
<script>
$(function() {
var htmlString = "<div>.. you get the idea</div>";
$("body").append($(htmlString));
});
</script>

Put the entire thing in a variable :
say : var html_content = "<div class=.....";
and in your loop you can simply use .append(html_content);

You could use DOM manipulation to directly query and add node elements to the DOM.
http://www.howtocreate.co.uk/tutorials/javascript/dombasics