We Keep Coding

JavaScript/CSS Show respective div on click from grid

I have a working grid that show a cell for every title in the json:
async function loop_iteration(json, i, arr) {
arr.push(`<a onClick="show()" class="cell" id=${i}"><div >${json[i].title}</div> </a>`)
arr.push(`<div class="info" id=${i}>${json[i].title}<br><br><br><br><br>Game Size: ${json[i].size}<br><br>Last Update: ${json[i].date}</div>`)
}
I want to show on click of the class info.
The problem is that it gives always the same title(first), it's like is always the first cell to be clicked
I show the info div like this:
<script>
function showinfo() {
var node = document.querySelector('.cell.info')
var visibility = node.style.visibility;
node.style.visibility = visibility == "visible" ? 'hidden' : "visible"
}
</script>
while if i show the div using this:
function show(){
var divsToHide = document.getElementsByClassName("info");
for(var i = 0; i < divsToHide.length; i++)
{
divsToHide[i].style.visibility="visible";
}
//document.getElementsByClassName('info')['${i}'].style.visibility = 'visible';
}
happen something strange, the div showed is not the first but is like it show all the div
Thanks for any help.

I find out the problem.
It was the javascript, so i extract the id and then iterate the class with the id
function show(clicked_id){
clicked_id = parseFloat(clicked_id);
document.getElementsByClassName('info')[clicked_id].style.visibility = 'visible';
}

make div appear when var is bigger than 14. otherwise keep it hidden

<script>var div = document.getElementById('demo');
if (totaal > 14) {
div.style.display = 'block';
div.style.visibility='visible';
}
else {
div.style.display = 'none';
div.style.visibility='hidden';
}</script>
when using this script the div stays hidden and doesnt become bigger. Anyone know what i can do to make the div appear when var 'totaal' is bigger than 14?
Thanks
Edit1: var totaal is already set earlier in the script. Its a large script with adding and subtracting 1 from 'totaal'. That part isn't neccesary so I didn't include it.

You can use function to toggle your div based on the value of totaal :
function toggleDiv(totaal) {
var div = document.getElementById('demo');
if (totaal > 14) {
div.style.display = 'block';
} else {
div.style.display = 'none';
}
}
Now, all the time you change tootal, you can call this function with totaal as parameter to toggle the div

Display: Hidden and block

I'm trying to have a login / create account on 1 page, stacked ontop of eachother.
But when you click on the button for "login" or "create account", then it has to hide the opposing one.
So far, I've tried this, without succes.
<script>
var toggle = function() {
var mydiv1 = document.getElementById('leftContent');
var mydiv3 = document.getElementById('leftTitle');
mydiv2.style.display = 'hidden';
mydiv4.style.display = 'hidden';
mydiv3.style.display = 'block';
mydiv1.style.display = 'block';
}
var toggle2 = function() {
var mydiv2 = document.getElementById('leftContent2');
var mydiv4 = document.getElementById('leftTitle2');
mydiv2.style.display = 'block';
mydiv4.style.display = 'block';
mydiv3.style.display = 'hidden';
mydiv1.style.display = 'hidden';
}
</script>
the mydivs equal 4 divs with 2 of each subject "login" & "create account".
you'd say, why 4 instead of 2, it's because there are also 2 different divs for the titles above them.
I hope you guys can help me out :)
I don't mind trying something entirely different, but i'm hoping to stay away from jquery, and keep it # just pure js.

Use display:none
or
style.display = 'none'
Then it will get work !

Replace instead of append based on user input?

This function currently works for appending an img in a div. But I need a replace method instead of multiple img divs stacking on top of each other.
I'm open to solutions in jQuery as well.
function getImg(){
var url=document.getElementById('txt').value;
var div=document.createElement('div');
var img=document.createElement('img');
img.className="img-responsive";
img.src=url;
div.appendChild(img);
document.getElementById('gif-btn').innerHTML=""; <!-- Correct answer -->
document.getElementById('gif-btn').appendChild(div);
return false;
}
Thanks in advance for any and all help. Much appreciated!

Before you append, you can clear out the div, then append the new one
function getImg(){
var url=document.getElementById('txt').value;
var div=document.createElement('div');
var img=document.createElement('img');
img.className="img-responsive";
img.src=url;
div.appendChild(img);
document.getElementById('gif-btn').innerHTML = ""; // <-- Clears the gif-btn div
document.getElementById('gif-btn').appendChild(div);
return false;
}

Using jQuery
var url = $("#txt").val();
var image = $("<img>").attr("src", url).addClass("img-responsive");
var container = $("<div></div>");
// add the image to the <div> container
container.append(image);
// set the contents of gif-btn
$("#gif-btn").html(container);
... or better yet, you could do a simple fade-out, fade-in...
// replace the last line with this
$("#gif-btn").fadeOut("fast", function() {
$("#gif-btn").html(container); $("#gif-btn").fadeIn();
});

JavaScript - Toggle function

Im trying to hide/show a JS function I have defined in a chrome extension.
What I have so far:
The span classes I am trying to hide are label:
dspan.className = "cExtension";
//Create toggle button:
function createToggleButton(){
var toggleButton = document.createElement("button");
toggleButton.innerHTML = "Toggle Overlay";
toggleButton.id = "Toggle"
var header = document.getElementById("header");
header.appendChild(toggleButton);
toggleExtension();
}
// find all spans and toggle display:
function toggleExtension(){
var spans = document.getElementsByTagName('span');
var toggle = function() {
for (var i = 0, l = spans.length; i < l; i++) {
if (spans[i].getAttribute('class') == 'cExtension')
if (spans[i].style.display == 'none') spans[i].style.display = '';
else spans[i].style.display = 'none';
}
}
document.getElementById('Toggle').onclick = toggle;
}
The button shows on the header, however it is unclickable. If I change document.getElementById('Toggle').onclick = toggle; to document.getElementById('Toggle').onclick = alert{"Hello"); the alert is triggered on page load on not onclick. I am trying to get this done in pure JS. Where am I going wrong?

First of all, document.getElementById("Toggle").onclick = alert("Hello"); will set the onclick event to whatever the alert function returns, not the alert function itself. So the alert function happens at page load so it can figure out what to return. So you could do this: document.getElementById("Toggle").onclick = function(){alert("Hello");}; and that might work.
Edit: Scratch everything that was here: I missed that toggle variable set to a function in toggleExtension.
I haven't tested all this so I can't guarantee that it'll all work in your specific case.

if visible is set remove it, otherwise add it
div.classList.toggle("visible");
add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );
Make sure browser support: http://caniuse.com/#feat=classlist

Why not use jQuery?
It will do all hard job for you.
http://api.jquery.com/toggle/
Cheers!