Develop Reference

How to change from document to "this" in javascript

I am trying to wrap my head around prototype in javascript as well as getting used to the value of this. Currently I have this set to .cf--modal but when I use this to set a variable it does not seem to work. As this is my first of many functions I really don't want to hit the document and would rather target "this" within the Modal Toggle function.
How can I change the modal_toggle function so that document.getElementById and document.getElementsByClassname can be replaced with this.find or something along those lines.
$(function(){
$('.cf--modal').each(function(){
let cf = new ContactForm($(this));
});
});
var ContactForm = function(this$obj){
this.$obj = this$obj;
this.init();
}
ContactForm.prototype.init = function init(){
this.modal_toggle();
};
ContactForm.prototype.modal_toggle = function modal_toggle(){
let cfCTA = document.getElementsByClassName("modal-trigger")[0];
let cfModal = document.getElementsByClassName("cf--modal")[0];
let cfModalClose = document.getElementsByClassName("close-cf-modal")[0];
cfCTA.onclick = function () {
cfModal.style.display = "block";
}
cfModalClose.onclick = function(){
cfModal.style.display = "none";
}
}
.cf{
width:1000px;
margin:40px auto;
}
.inner-container{
padding:12px 24px;
border:1px solid grey;
border-radius:5px;
display:flex;
align-items:center;
justify-content:center;
}
.cf-block{
flex:1
}
/* Modal Styling */
.cf--modal{
width:375px;
height:200px;
position:absolute;
right:36px;
bottom:0;
border:1px solid grey;
display:none;
}
.close-cf-modal{
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Contact Us
<section class="cf">
<div class="cf-container">
<form>
<div class="inner-container">
<div class="cf-block">
<div class="cf-label">First Name</div>
</div>
<div class="cf-block">
<div class="cf-label">Last Name</div>
</div>
<div class="cf-block">
<div class="cf-label">Email</div>
</div>
<div class="cf-block">
<div class="cf-label">Message</div>
</div>
<div class="cf-block">
<div class="cf-label">Submit</div>
</div>
</div>
</form>
</div>
</section>
<section class="cf--modal">
<span class="close-cf-modal">close</span>
</section>

You should use this.$obj to refer to the modal element for the current ContactForm
ContactForm.prototype.modal_toggle = function modal_toggle() {
let cfModal = this.$obj;
let cfCTA = $(".modal-trigger");
let cfModalClose = cfModal.find(".close-cf-modal");
cfCTA.on("click", function() {
cfModal.show();
})
cfModalClose.on("click", function() {
cfModal.hide();
});
}

How to remove random div js

http://prntscr.com/p9u6f9
I create random divs using:
let div1 = 'div_list';
let div2 = div1 + [Math.floor(Math.random()*24)];
node.setAttribute('id', div2);
And I want remove div using button, but how can I remove this, not having ID? Because the ID is random.
function remove() {
console.log(div);
let remove = document.getElementById(??????????);
remove.remove();
}

Add an eventListener upon the creation of the node and call remove with the generated id :
let div1 = "div_list";
let div2 = div1 + [Math.floor(Math.random() * 24)];
node.setAttribute("id", div2);
node.addEventListener("click", () => remove(div2)); // add the event listener for the button of deletion if you're creating it with the div
function remove(id) {
console.log(id);
let remove = document.getElementById(id);
remove.remove();
}

Just try this example, it's 100% working.
function randRemove() {
var divCount = 5;
var randNumber = Math.floor(Math.random() * divCount) + 1;
var randSelect = document.getElementById("div-" + randNumber);
randSelect.remove();
alert("Div Removed: " + "div-" + randNumber);
}
.just-style {
display: inline-block;
width: 300px;
height: 100px;
margin: 20px;
}
<button id="randRemove" onclick="randRemove()">Remove Random Div</button>
<div id="main-div">
<div id="div-1" class="just-style" style="background-color: red;"></div>
<div id="div-2" class="just-style" style="background-color: blue;"></div>
<div id="div-3" class="just-style" style="background-color: aqua;"></div>
<div id="div-4" class="just-style" style="background-color: violet;"></div>
<div id="div-5" class="just-style" style="background-color: forestgreen;"></div>
<!--AND MORE DIV ... -->
</div>
Enjoy and good luck =D

Background image swap animation

I have a grid and each div has a background image. I am trying to create a fade out/in image swapping effect. Currently I'm getting two random divs and inserting one background-image URL into the other. Problem is, after a while all the images wind up the same. I think I need to reset the background URL to the original value (image) each time, but I'm not sure how to do that.
So the order would be:
original image fades out,
new image fades in,
new image fades out,
original image fades in
Any help greatly appreciated!
Currently I have this fiddle:
JS:
var $squares = $('.box');
function imgFade() {
var square1 = $squares.eq([Math.floor(Math.random()*$squares.length)])
var square2 = $squares.eq([Math.floor(Math.random()*$squares.length)])
var square1Url = square1.css('background-image').replace(/(url\(|\)|")/g, '');
var square2Url = square2.css('background-image').replace(/(url\(|\)|")/g, '');
$(square1).fadeOut(1500, function() {
$(this).css("background-image", "url(" + square2Url + ")");
$(this).fadeIn(1500);
});
timeoutId = setTimeout(imgFade, 1500);
}
imgFade();
HTML:
<div class="grid-container">
<div class="box" style="background-image: url('https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg')"></div>
<div class="box" style="background-image: url('https://r.hswstatic.com/w_907/gif/tesla-cat.jpg')"></div>
<div class="box" style="background-image: url('https://r.ddmcdn.com/s_f/o_1/cx_462/cy_245/cw_1349/ch_1349/w_720/APL/uploads/2015/06/caturday-shutterstock_149320799.jpg')"></div>
<div class="box" style="background-image: url('https://www.shelterluv.com/sites/default/files/animal_pics/464/2016/11/25/22/20161125220040.png')"></div>
<div class="box" style="background-image: url('https://r.ddmcdn.com/w_830/s_f/o_1/cx_0/cy_66/cw_288/ch_162/APL/uploads/2014/10/cat_5-1.jpg')"></div>
<div class="box" style="background-image: url('https://cdn.theatlantic.com/assets/media/img/mt/2017/06/shutterstock_319985324/lead_720_405.jpg?mod=1533691890')"></div>
</div>
CSS:
body {margin:0}
.grid-container {width:100%;}
.box {
width:20vw;
height:33.33vh;
float:left;
border:1px solid white;
background-size: cover;
background-position:center;
}

Since you are changing the background-image url in a random element, each time you are going to potentially lose a url if the other url is a copy of one of the others.
You could parse all the urls and keep them in an array and grab the urls randomly from that array instead of the elements themselves since you will be changing the elements.
var $squares = $('.box');
//create an array from all the backgroundImage values
var urls = $squares.map(function(){
return this.style.backgroundImage;
});
Then in imgFade
var square1 = $squares.eq([Math.floor(Math.random()*$squares.length)])
//get random urls from the array instead of the elements
var square1Url = urls[Math.floor(Math.random()*$squares.length)];
var square2Url = urls[Math.floor(Math.random()*$squares.length)];
Demo
var $squares = $('.box');
var urls = $squares.map(function() {
return this.style.backgroundImage;
});
function imgFade() {
var square1 = $squares.eq([Math.floor(Math.random() * $squares.length)])
var square1Url = urls[Math.floor(Math.random() * $squares.length)];
var square2Url = urls[Math.floor(Math.random() * $squares.length)];
$(square1).fadeOut(1500, function() {
$(this).css("background-image", square2Url);
$(this).fadeIn(1500);
});
timeoutId = setTimeout(imgFade, 1500);
}
imgFade();
body {
margin: 0
}
.grid-container {
width: 100%;
}
.box {
width: 20vw;
height: 33.33vh;
float: left;
border: 1px solid white;
background-size: cover;
background-position: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid-container">
<div class="box" style="background-image: url('https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg')">
</div>
<div class="box" style="background-image: url('https://r.hswstatic.com/w_907/gif/tesla-cat.jpg')">
</div>
<div class="box" style="background-image: url('https://r.ddmcdn.com/s_f/o_1/cx_462/cy_245/cw_1349/ch_1349/w_720/APL/uploads/2015/06/caturday-shutterstock_149320799.jpg')">
</div>
<div class="box" style="background-image: url('https://www.shelterluv.com/sites/default/files/animal_pics/464/2016/11/25/22/20161125220040.png')">
</div>
<div class="box" style="background-image: url('https://r.ddmcdn.com/w_830/s_f/o_1/cx_0/cy_66/cw_288/ch_162/APL/uploads/2014/10/cat_5-1.jpg')">
</div>
<div class="box" style="background-image: url('https://cdn.theatlantic.com/assets/media/img/mt/2017/06/shutterstock_319985324/lead_720_405.jpg?mod=1533691890')">
</div>
</div>
Side note you dont need to do the url() replace since you are just adding it back in when setting the new background.
Also you will end up with multiple duplicates since it is random. But you won't end up just having a single url being used. If you don't want multiple duplicates, eg more than 2 duplicates at a time, you would need to write a check to see if that url has been used more than once and if so get a different one until you get one that hasn't been.
If you want no duplicates at all you would have to swap 2 backgrounds at once instead of just one at a time. This would be a bit easier code wise but does require changing two at a time.
In this one you would do as you were but add in the change to the second element as well
var square1 = $squares.eq([Math.floor(Math.random()*$squares.length)])
//modified to not select square1
var square2 = var square2 = $squares.not(square1).eq([Math.floor(Math.random() * $squares.length-1)])
var square1Url = square1.css('background-image').replace(/(url\(|\)|")/g, '');
var square2Url = square2.css('background-image').replace(/(url\(|\)|")/g, '');
$(square1).fadeOut(1500, function() {
$(this).css("background-image", "url(" + square2Url + ")");
$(this).fadeIn(1500);
});
$(square2).fadeOut(1500, function() {
$(this).css("background-image", "url(" + square1Url + ")");
$(this).fadeIn(1500);
});
You would also need to increase the timeout to 3000 so that you don't accidently trigger a new transition while one is already taking place.
var $squares = $('.box');
var urls = $squares.map(function() {
return this.style.backgroundImage;
});
function imgFade() {
var square1 = $squares.eq([Math.floor(Math.random() * $squares.length)])
//modified to make sure we dont accidently
//select square1
var square2 = $squares.not(square1).eq([Math.floor(Math.random() * $squares.length-1)])
var square1Url = square1.css('background-image');
var square2Url = square2.css('background-image');
$(square1).fadeOut(1500, function() {
$(this).css("background-image", square2Url);
$(this).fadeIn(1500);
});
$(square2).fadeOut(1500, function() {
$(this).css("background-image", square1Url)
$(this).fadeIn(1500);
});
//change timing so it doesnt get called
//in the middle of a transition
timeoutId = setTimeout(imgFade, 3000);
}
imgFade();
body {
margin: 0
}
.grid-container {
width: 100%;
}
.box {
width: 20vw;
height: 33.33vh;
float: left;
border: 1px solid white;
background-size: cover;
background-position: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid-container">
<div class="box" style="background-image: url('https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg')">
</div>
<div class="box" style="background-image: url('https://r.hswstatic.com/w_907/gif/tesla-cat.jpg')">
</div>
<div class="box" style="background-image: url('https://r.ddmcdn.com/s_f/o_1/cx_462/cy_245/cw_1349/ch_1349/w_720/APL/uploads/2015/06/caturday-shutterstock_149320799.jpg')">
</div>
<div class="box" style="background-image: url('https://www.shelterluv.com/sites/default/files/animal_pics/464/2016/11/25/22/20161125220040.png')">
</div>
<div class="box" style="background-image: url('https://r.ddmcdn.com/w_830/s_f/o_1/cx_0/cy_66/cw_288/ch_162/APL/uploads/2014/10/cat_5-1.jpg')">
</div>
<div class="box" style="background-image: url('https://cdn.theatlantic.com/assets/media/img/mt/2017/06/shutterstock_319985324/lead_720_405.jpg?mod=1533691890')">
</div>
</div>

Can't make 2 Player Tic Tac Toe game work JavaScript

HTML
<div class="container"> <-- div container -->
<div id="div1" onclick="canvasClicked(1);"></div>
<div id="div2" onclick="canvasClicked(2);"></div>
<div id="div3" onclick="canvasClicked(3);"></div>
<div id="div4" onclick="canvasClicked(4);"></div>
<div id="div5" onclick="canvasClicked(5);"></div>
<div id="div6" onclick="canvasClicked(6);"></div>
<div id="div7" onclick="canvasClicked(7);"></div>
<div id="div8" onclick="canvasClicked(8);"></div>
<div id="div9" onclick="canvasClicked(9);"></div>
</div> <-- div container end -->
Css
.container{ /*some css*/
border: 2px solid red;
width: 400px;
height: 400px;
margin: 0 auto;
margin-top: 10%;
}
.container div{
float: left;
height: 132px;
width: 131.3px;
border: 1px solid black;
}
JavaScript
var painted; //global variables
var content;
var winningCombinations;
var theCanvas;
var c;
var cxt;
var w;
var y;
var turn = 0;
var squaresFilled = 0; //global variables end
window.onload = function(){ //instantiating variables
painted = new Array(); //to check if the canvas contains something already
content = new Array(); //to see what the canvas contains 'X' or 'O'
winningCombinations = [[1,2,3],[4,5,6],[7,8,9],[1,4,7],[2,5,8],[3,6,9],
[1,5,9],[3,5,7]]; //all possible combinations :P
for(var i=0; i<=8; i++){
painted[i] = false;
content[i]=false;
}
}
function canvasClicked(number){
theCanvas = "div" + number; //takes the div Id from html
c = document.getElementById(theCanvas);
if(painted[number-1]==false){
if(turn%2==0){ //use X here
c.innerHTML = '<img src="cross image" alt="x" width=100%
height=100%>';
content[number-1] = 'X'; //storing value in content array
}else{ // user O here
c.innerHTML = '<img src=" O image" height="100%"
width="100%" alt="O">';
content[number-1] = 'O'; //storing value in content array
}
}
else{
alert('This block is already occupied, try another block');
turn--;
squaresFilled--;
}
turn++;
painted[number-1]= true;
squaresFilled++;
checkForWinner(content[number-1]);
if(squaresFilled == 9){
alert('It is a TIE');
playAgain();
}
}
function checkForWinner(symbol){ // This functions seems to be the problem
for(var a = 0; a < winningCombinations.length; a++){
if(content[winningCombinations[a][0]]==symbol &&
content[winningCombinations[a][1]]==symbol && content[winningCombinations[a]
[2]]==symbol){
console.log(symbol + ' won!!');
}
}
}
function playAgain(){ // just another function to reset the game
y=confirm("PLAY AGAIN?");
if(y==true){
location.reload(true);
}else{
alert('Good Bye Then!!');
}
}
It runs normally but the results are not expected. It sometimes randomly make anyone winner(i guess), i can't seem to find the bug, i used debugger as well but i just can't find the problem...any help would be appreciated.
Thanks

In the function checkForWinner change:
if(content[winningCombinations[a][0]]==symbol &&
content[winningCombinations[a][1]]==symbol &&
content[winningCombinations[a][2]]==symbol){
to:
if(content[winningCombinations[a][0]-1]==symbol &&
content[winningCombinations[a][1]-1]==symbol &&
content[winningCombinations[a][2]-1]==symbol){
It would make things easier if you numbered everything from 0 instead of 1. Then you don't need all those -1.

Check your indices.
Either content[0-8] or content[1-9]
winningCombination uses 1-9
but canvasClicked uses 0-8
That's why you getting some strange results

I know I should help you with your code, but I decided to use parts of your code and suggest you an approach:
HTML :
<div class="turnInfo" id="turnInfo">Turn : O</div>
<div class="container">
<div id="div1" cell="1" onclick="canvasClicked(this);"></div>
<div id="div2" cell="2" onclick="canvasClicked(this);"></div>
<div id="div3" cell="3" onclick="canvasClicked(this);"></div>
<div id="div4" cell="4" onclick="canvasClicked(this);"></div>
<div id="div5" cell="5" onclick="canvasClicked(this);"></div>
<div id="div6" cell="6" onclick="canvasClicked(this);"></div>
<div id="div7" cell="7" onclick="canvasClicked(this);"></div>
<div id="div8" cell="8" onclick="canvasClicked(this);"></div>
<div id="div9" cell="9" onclick="canvasClicked(this);"></div>
</div>
CSS :
.turnInfo{
text-align:center;
font-size:40px;
font-weight:bold;
margin-top: 6%;
margin-bottom:10px;
}
.container{ /*some css*/
border: 2px solid red;
width: 400px;
height: 400px;
margin: 0 auto;
}
.container div{
float: left;
height: 102px;
width: 131.3px;
border: 1px solid black;
text-align:center;
padding-top:30px;
font-size:50px;
}
JS :
Variables
var cells = [0,0,0,0,0,0,0,0,0,0]; // make it 10 for the sake of array index
var turn = 'O'; // first turn : O
var infoDiv = document.getElementById('turnInfo');
Toggle the Trun
function toggleTurn(){
turn = turn == 'O' ? 'X' : 'O';
infoDiv.innerHTML = 'Turn : '+turn;
return turn;
}
Canvas Click Handler
function canvasClicked(cell){
var cellIndex = cell.getAttribute('cell');
if(!cells[cellIndex]){
cells[cellIndex] = toggleTurn();
cell.innerHTML = turn; // you can add image here.
checkWinner();
}
}
Check Result function
function checkWinner(){
winningCombinations = [
[1,2,3],
[4,5,6],
[7,8,9],
[1,4,7],
[2,5,8],
[3,6,9],
[1,5,9],
[3,5,7]
]; //all possible combinations :P
for(var index=0; index < winningCombinations.length;index++){
winCond = winningCombinations[index];
if(cells[winCond[0]] != 0 &&
cells[winCond[0]] == cells[winCond[1]] &&
cells[winCond[1]] == cells[winCond[2]])
{
alert(turn + ' is winner');
playAgain();
return;
}
}
var allCellsFilled = 1;
for(var index =1; index < cells.length; index++){
if(!cells[index]){
allCellsFilled = 0;
break;
}
}
if(allCellsFilled){
alert('Game is draw!');
playAgain();
}
}
New Game function
function playAgain(){ // just another function to reset the game
y=confirm("PLAY AGAIN?");
if(y==true){
location.reload(true);
}else{
alert('Good Bye Then!!');
}
}
You can see it here : https://codepen.io/FaridNaderi/pen/awROjY
Hope it helps.

i am trying to create tabbed content in javascript but its working only once

this is my html with css and javascript all in one place
JS
var links = document.getElementsByTagName("a"); //get the links
var len = links.length;
for(var i = 0; i<len; i++) {
links[i].onclick = handleClick; // add onclick handler
}
function handleClick(e){
var target = e.target;
var id = target.id + "content";
document.getElementById(id).style.zIndex = 10;
}
HTML
<div id="tabbed">
Tabe1
<div class="section" id="tabe1content">
<div>
<p> content1 </p>
</div>
</div>
Tabe2
<div class="section" id="tabe2content">
<div>
<p> content2 </p>
</div>
</div>
Tabe3
<div class="section" id="tabe3content">
<div>
<p> content3 </p>
</div>
</div>
</div>
CSS
.section{
position:absolute;
float:left;
width:500px;
background-color:gray;
left:0;
top:0;
height:300px;
margin-top:30px;
}
#tabbed{
position:relative;
}
a {
margin-right:10px;
float:left;
display:block;
}
When I test it, it only works once. The second time when I click on table 1 it still shows table 3. Please take a look at what is wrong and is there any other way which is better then mine?

delegate on parent
track the biggest z-index value
http://jsfiddle.net/3LuC4/6/
.section{
position:absolute;
float:left;
width:500px;
background-color:gray;
left:0;
top:0;
height:300px;
margin-top:30px;
z-index: 1;
}
#tabbed{
position:relative;
}
a {
margin-right:10px;
float:left;
display:block;
}
<div id="tabbed">
Tabe1
<div class="section" id="tabe1content">
<div>
<p> content1 </p>
</div>
</div>
Tabe2
<div class="section" id="tabe2content">
<div>
<p> content2 </p>
</div>
</div>
Tabe3
<div class="section" id="tabe3content">
<div>
<p> content3 </p>
</div>
</div>
</div>
var root = document.getElementById("tabbed");
var veryTop = 2;
root.onclick = handleClick;
function handleClick(e){
var target = e.target;
if ( target.tagName !== 'A' ) { e.preventDefault(); return; }
var tab = document.getElementById( target.id + 'content' );
tab.style.zIndex = ( veryTop++ ).toString();
e.preventDefault();
}
PS. Should solve your 'works once' problem.

When you click on a tab, near the end of your JS, you set the z-index of each tab to 10. After you've done this, they do NOT change back.
Inside the onclick handler you need to build a string that sets all OTHER z-indexes to a lower number; I'm not sure of the exact way to do this, but you seem to know enough to complete that part.

You can iterate over your section class, reset the z-index for all, then set your new one:
var elems = document.getElementsByClassName("section");
for (var i = 0; i < elems.length; i++) {
elem[i].style.zIndex = 0; //or whatever your default is
}
var target = e.target;
var id = target.id + "content";
document.getElementById(id).style.zIndex = 10;

Your z-indexes all end up the same. Add a little function to sort them:
function sortZindex(){
for(var i = 0; i<len; i++) {
var id = links[i].id + "content";
document.getElementById(id).style.zIndex = 9;
}
}
http://jsfiddle.net/U2qfj/