Develop Reference

How to add different images in three divs using the same class

I have this code:
<div class="main_flex">
<div class="flex_items">
</div>
<div class="flex_items">
</div>
<div class="flex_items">
</div>
</div>
javascript:
function shoe_images () {
for (var i = 0; i < shoes.length; i++){
var getFlexItems = document.querySelector('.flex_items');
var createImgTag = document.createElement('img');
createImgTag.src = shoes[i].imageUrl;
getFlexItems.appendChild(createImgTag);
}
};
And i have an array of object with different images. I want to add different images to the
class="flex_items"
How do i do that? I used a for loop, but all the images shows in the first class="flex_items".

The problem is in the querySelector() method. This method return only the first element. It is the reason for this.
See: https://www.w3schools.com/jsref/met_document_queryselector.asp
You need to use querySelectorAll()
See: https://www.w3schools.com/jsref/met_document_queryselectorall.asp
Rewrited your code:
function shoe_images () {
var getFlexItems = document.querySelectorAll('.flex_items');
for (var i = 0; i < shoes.length; i++){
var createImgTag = document.createElement('img');
createImgTag.src = shoes[i].imageUrl;
getFlexItems[i].appendChild(createImgTag);
}

you can do this by css or by js
this for CSS
.flex_items:nth-of-type(2) {
background: #ff0000;
}
.flex_items:nth-of-type(1) {
background: #324445;
}
to used js
var elements = document.getElementsByClassName('flex_items');
it will return arry contain 3 elment [0,1,2]
elements[0].innerHTML ='<img src="path">';
elements[1].innerHTML ='<img src="path">';

You can select the flex_items then append the element image like this:
const images = [{
src: "https://picsum.photos/id/284/200/300"
}, {
src: "https://picsum.photos/id/284/200/300"
}, {
src: "https://picsum.photos/id/284/200/300"
}]
document.querySelectorAll(".flex_items").forEach((el, index) => {
const image = document.createElement("img");
image.setAttribute("src", images[index].src);
el.appendChild(image);
})
<div class="main_flex">
<div class="flex_items">
</div>
<div class="flex_items">
</div>
<div class="flex_items">
</div>
</div>

Creating parent and child elements wit Js/jQuery

I'm beginner at js/jquery.
I want to code this structure with js/jquery:
<div class="box">
<p>1</p>
<div class="content"><span>Lorem</span></div>
</div>
<div class="box">
<p>2</p>
<div class="content"><span>Ipsum</span></div>
</div>
<div class="box">
<p>3</p>
<div class="content"><span>Dolor</span></div>
</div>
<div class="box">
<p>4</p>
<div class="content"><span>Sit</span></div>
</div>
<div class="box">
<p>5</p>
<div class="content"><span>Amet</span></div>
</div>
I have this code:
function addDivs(n) {
for(var i=1; i<=n; i++) {
var parentP = $("<p>"+i+"</p>");
var parentContent = $("<div class='content'></div>");
var boxClassDiv = document.createElement("div");
document.body.appendChild(boxClassDiv);
boxClassDiv.setAttribute("class", "box");
$("body").prepend(boxClassDiv, [parentP, parentContent]);
}
}
window.onload = function getFuncs() {
addDivs(16);
}
Here is fiddle: https://jsfiddle.net/ds6wj38k/2/
I found a few similar questions like this and tried to add to my code but i can't adjust.
Thanks.

So first of all you need a div with class box:
var box = $('<div>').addClass('box');
Then you want a p with a number:
var p = $('<p>').text(1);
And finally a div with class content and span inside:
var content = $('<div>').addClass('content');
var span = $('<span>').text('any');
content.append(span);
So you created elements you need. Time to combine them:
var listItem = box.append(p).append(content);
And add to body!
$('body').append(listItem);
The final code:
function addDivs(n) {
for (var i = 1; i <= n; i++) {
var box = $('<div>').addClass('box');
var p = $('<p>').text(i);
var content = $('<div>').addClass('content');
var span = $('<span>').text('any');
content.append(span);
var listItem = box.append(p).append(content);
$('body').append(listItem);
}
}
window.onload = function getFuncs() {
addDivs(16);
}
Check out code online: http://jsbin.com/xeyugubefu/edit?js,output

Here is how I would suggest to do it:
function addDivs(words) {
words.forEach( function (word, i) {
$('body')
.append($('<div>').addClass('box')
.append($('<p>').text(i+1))
.append($("<div>").addClass('content').append($('<span>').text(words[i]))));
});
};
$(function getFuncs() {
var words = 'Lorem ipsum dolor sit amet'.split(' ');
addDivs(words);
});
jQuery is designed to support method chaining, which the above code demonstrates.
Note that apart from building the content with jQuery, you should also replace window.onload with a jQuery.ready call, which you can write as $(callback).

Add rel="nofollow" to facebook comments

Does somebody know, how we can add the rel="nofollow" attribute to all links in the comments plugin from facebook.
<div id ="comments" style="margin-left: 510px; width: 550px" >
<div class="fb-comments" data-href="http://my.net/" data-width="550" data-numposts="5" data-colorscheme="light"></div>
</div>
</div>
window.addEventListener("load", func, false);
function func() {
var div = document.getElementById("comments");
var elements = div.getElementsByTagName("*");
for (var i = 0; i < elements.length; i++)
{
if (elements [i].tagName == "a") {
elements[i].rel = "nofollow";
}
}
}
Array elements do not contain all tags that facebook adds in my .

if (elements[i].tagName.toLowerCase() == "a")
{
elements[i].setAttribute('rel', 'nofollow');
}
And you must paste your code after FB init, not on window.load.

How to reference elements without assigning Id's?

So, the following works - but can I replace the references 'img11', 'name11' and 'prof11' with something like 'this' so I don't have to assign id's every time I use this code?
<div onclick="changeStored(img11); changeName(name11); changeProf(prof11) ">
<div style="float:left">
<img id="img11" style="max-height:80px;" src="Pictures/Smiley.png">
</div>
<div style="float:left;">
<p id="name11">Name: Jane Doe</p>
<p id="prof11">Profession: Something</p>
</div>
</div>
I will post the functions just for completeness:
function changeStored(img){
storeOnClick = img.src;
alert(storeOnClick);
}
function changeName(img){
name = document.getElementById("name11").innerHTML;
alert(name);
}
function changeProf(img){
prof = document.getElementById("prof11").innerHTML;
alert(prof);
}
And no I can't just put the onclick event in the img or p because I need all 3 values to pass back to the functions when the user clicks anywhere in the div.

I think you can do something like this:
html
<div class="info">
<div style="float:left">
<img class="myimg" style="max-height:80px;" src="Pictures/Smiley.png">
</div>
<div style="float:left;">
<p class="myname">Name: Jane Doe</p>
<p class="myprof">Profession: Something</p>
</div>
</div>
js
var _divs = document.querySelectorAll('.info');
function changeAll() {
for (var i = 0; i < _divs.length; i++) {
var myimg = _divs[i].querySelector('.myimg'),
myname = _divs[i].querySelector('.myname'),
myprof = _divs[i].querySelector('.myprof')
// img
var storeOnClick = myimg.src;
alert(storeOnClick);
// name
var name = myname.innerHTML;
alert(name);
// profession
var prof = myprof.innerHTML;
alert(prof);
}
}
EDIT
To make this happen on 'click':
window.onload = function () {
var _divs = document.querySelectorAll('.info');
for (var i = 0; i < _divs.length; i++) {
_divs[i].addEventListener("click", function () { changeInfo(this) }, false);
}
}
function changeInfo(el) {
var myimg = el.querySelector('.myimg'),
myname = el.querySelector('.myname'),
myprof = el.querySelector('.myprof')
// img
var storeOnClick = myimg.src;
alert(storeOnClick);
// name
var name = myname.innerHTML;
alert(name);
// profession
var prof = myprof.innerHTML;
alert(prof);
}
You could still use the changeAll() if you wanted to do this for all info divs on page..
of course run your js after html has loaded..

container hasChildNodes() showing null value. Why

<div id="history">
<div id="histheading" class="pull-left">History</div>
<div id='hist'><canvas id="test"></canvas></div>
</div>
var left=100;
var t=-150;
function doHistory_double()
{
var data = localStorage.getItem('HTML5TTT');
data = JSON.parse(data);
data.reverse();
var container = document.getElementById('hist');
// Clear the container
while (container.hasChildNodes())
{
container.removeChild(container.firstChild);
}
// Loop through the data
canvID = 0;
for(x in data)
{
var i=1;
var hist = data[x];
if(hist.datetime == undefined)
break;
var elem = document.createElement('div');
elem.style.marginLeft=lef + "px";
if(i==1){
elem.style.marginTop=t + "px";
}
else
elem.style.marginTop="0px";
i++;
elem.innerHTML = "<p><strong>"+hist.datetime+"</strong><br>Winner: "+hist.winner+"<br><canvas id='can"+canvID+"' width='100px' height='100px' ></canvas>";
container.appendChild(elem);
drawMiniBoard_double(document.getElementById("can"+canvID),hist.board);
canvID++;
lef+=310;
}
}
This is my javscript code. hist is a div showing history of the game.I am getting error as Cannot call method 'hasChildNodes' of null.I am getting this error after i did something using the variable left and t i.e margin-top and margin-left. Help me to solve this.

write it in a function and call it onload of document.
function deleteChildren() {
var container = document.getElementById('hist');
// Clear the container
while (container.hasChildNodes())
{
container.removeChild(container.firstChild);
}
}
<body onload="deleteChildren()">
<div id="history">
<div id="histheading" class="pull-left">History</div>
<div id='hist'><canvas id="test"></canvas></div>
</div>
</body>

its working perfectly.. check the fiddle
I have bind the click method then calling the code you provided and alert to show either we got a child inside the container or not..
--HTML--
<div id="history">
<div id="histheading" class="pull-left">History</div>
<div id='hist' onclick=f()><canvas id="test"></canvas></div>
</div>
-- JS --
function f()
{
var container = document.getElementById('hist');
// Clear the container
alert(container.hasChildNodes());
while (container.hasChildNodes())
{
container.removeChild(container.firstChild);
}
}
http://jsfiddle.net/FLC3R/