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';
}

Making one div visible at a time

I'm trying to make when some presses a button that only one div is visible at a time. So when they click another button, that corresponding div pops up and the last one hides.
I've tried a for loop:
function display(x) {
for (i=0; i<content.length; i++){
content[i].style.display = 'none';
}
if(x = content[i]){
x.style.display = 'inline';
}
}
This didn't do anything.
I tried nesting the if statement inside the loop, but it caused all to be visible.
I've linked the jsfiddle below.
Please no jQuery answers as I'm trying to learn pure javascript first.
Thanks in advance.
https://jsfiddle.net/ethacker/rp59g9cf/

You are not putting the if inside the loop. Therefore, it will only check the last value of i. Also, the equals should be ==. You should do it like this:
function display(x) {
for (i=0; i<content.length; i++){
if(x == content[i]){
x.style.display = 'inline';
} else {
content[i].style.display = 'none';
}
}
}

see this fiddle example code I slightly modified your code
var currDisplayElm;
//function
function display(content) {
if(currDisplayElm)
currDisplayElm.style.display = 'none';
currDisplayElm = content;
content.style.display = 'inline';
}

As I understand.
Ithink If you call function on click of button then set div Id in sequence and you should pass thet div no which you want to display.
And div name must be same then you can hide other div.
I hope you understand ..

Hide numbers with javascript, without using jQuery

I have the following fiddle.
When you click the Hide button the numbers 2, 3 and 1 are hidden. All works great using this Jquery code:
$( "#hide" ).click(function() {
$('span').each(function(){
if($(this).text().match(/^([1-9])$/))$(this).hide()
});
});
Now I want the same thing, but with using a good old javascript function instead of the jQuery solution given above. How to do this? See my (not working) attempt here.
Many thanks

Here is a simple vanilla JS version:
function hide() {
var spans = document.getElementsByTagName('span'), i = 0;
for(i=0; i<spans.length; i++) {
spans[i].style.display = (spans[i].innerText.match(/^[1-9]+$/) ? 'none' : '');
}
}
Note: I've corrected your regex to match numbers with more than 1 digit in it.
Updated fiddle: http://jsfiddle.net/WnLUu/6/

In plain javascript you could access the style attribute, so instead of $(this).hide() you could call
this.style.visibility = "hidden"

Maybe something like this.
function buttonClicked(evt) {
var spans = document.getElementsByTagName("span");
for (var i = 0, length = spans.length; i < length; ++i) {
if (/^([1-9])$/.test(spans[i].innerHTML)) {
spans[i].style.display = "none";
}
}
};
document.getElementById("hide").addEventListener("click", buttonClicked, false);

Please try this (works on IE and other browsers, .innerText is IE specific):
function hide() {
var spans = document.getElementsByTagName('SPAN');
for (var i=0; i < spans.length; i++) {
alert(spans[i].textContent);
if (spans[i].textContent !== undefined && spans[i].textContent.match(/^[1-9]$/))
spans[i].style.display = 'none';
else if (spans[i].innerText !== undefined && spans[i].innerText.match(/^[1-9]$/)) // IE
spans[i].style.display = 'none';
}
}

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!

simple hover and hover out issue in javascript

I am trying to create hover and hover out via javascript.
I have
test.prototype.build = function(){
other codes...
link.href = '#';
link.innerHTML += 'test'
link.onmouseover = hover
link.onmouseout = hoverOut
other codes...
}
function hover(){
var div = document.createElement('div');
div.class='testDiv';
div.innerHTML = 'test';
$(this).prepend(div);
}
function hoverOut(){
var div = document.getElementsByClassName('testDiv');
div.style.display='none';
}
My task is to create a hover and hover out function. My problem is I am not sure how to hide the testDiv when the user hover out of the link.
getElementsByClassName doesn't seem to work in my case. Are there better way to do this in javascript? Thanks a lot!

document.getElementsByClassName('testDiv') returns an collection, not a single object, but you can probably just use this to refer to the current object. Since you showed some jQuery in your original code, I assume that is OK here.
function hoverOut(){
$(this).find(".testDiv").hide();
}
or, in plain javascript, it could be:
function hoverOut(){
var elems = this.getElementsByClassName("testDiv");
for (var i = 0; i < elems.length; i++) {
elems[i].style.display = "none";
}
}
Your hover and hoverOut code don't match though because you're creating a new div on hover every time in hover and then only hiding it in hoverOut so they will accumulate.
If you want to remove the div you added in hoverOut(), you can do that like this:
function hoverOut(){
$(this).find(".testDiv").remove();
}
or in plain javascript:
function hoverOut(){
var elems = this.getElementsByClassName("testDiv");
for (var i = 0; i < elems.length; i++) {
elems[i].parentNode.removeChild(elems[i]);
}
}