Develop Reference

Random loop works as planned but gets stuck on specific random number after a few calls

Using css and html I created 13 objects that look like boxes that each have a unique background color. Then added some random color changing functionality with javascript.
What I wanted to happen: after you click any of the 13 boxes, every box turns a 'new' color. This 'new' color will be randomly chosen from the initially fixed colors for each box. And this would go on forever.
What happened: when clicking boxes they do change color like I wanted, but after clicking only ~5-10 times they would have all turned the exact same color.
How do I get the function to keep on going and not stop at a certain color?
I probably messed up the for loop/all of javascript but can't figure it out. Any help greatly appreciated.
Here's my full code: https://codepen.io/zaemees/pen/roGgGV
Some code:
html:
<div class="aqua1 specs"></div>
<div class="chartreuse1 specs"></div>
<div class="deeppink1 specs"></div>
<div class="dodgerblue1 specs"></div>
<div class="gold1 specs"></div>
<div class="indigo1 specs"> </div>
<div class="lightpink1 specs"></div>
<div class="mediumpurple1 specs"></div>
<div class="coral1 specs"></div>
<div class="springgreen1 specs"></div>
<div class="red1 specs"></div>
<div class="peachpuff1 specs"></div>
<div class="deepskyblue1 specs"></div>
js:
var bloop = document.getElementsByClassName('specs');
for (var i = 0; i < bloop.length; i++){
bloop[i].onclick = function() {
for (var i = 0; i < bloop.length; i++){
bloop[i].style.backgroundColor = window.getComputedStyle(bloop[Math.floor(Math.random()*13)]).getPropertyValue('background-color');
}
}
}

Your code's main problem is that you are not preventing the same color from being selected multiple times. When you run it the first time, there is a high likelihood that at least one of your colors will be chosen twice. Think of it as simply selecting a number between one and ten at random. It is very difficult to randomly choose a different number ten times and never repeat.
Therefore, when you run your function again you have changed the backgroundColor property of each box, and some of them will have the same color, i.e. you do not have 13 different colors to choose from anymore. This means the second time your function runs you have fewer choices, and this continues and continues until you end up with only one or two possible colors to choose and every box ends up with the same color.
One way to prevent this is to have an array of your choices and remove your choice from the array whenever you select it. This will prevent duplicates, and is how most card dealing programs work so two people don't both get dealt a queen of hearts. Try this example:
var bloop = document.getElementsByClassName('specs');
for (var i = 0; i < bloop.length; i++) {
bloop[i].onclick = function() {
var colours = ['aqua','chartreuse','deeppink','dodgerblue','gold','indigo','lightpink','mediumpurple','coral','springgreen','red','peachpuff','deepskyblue'];
for (var i = 0; i < bloop.length; i++) {
var rando = Math.floor(Math.random()*colours.length)
bloop[i].style.backgroundColor = colours[rando];
colours.splice(rando, 1);
}
}
}
.specs{
display:inline-block;
height:100px;
width:100px;
border:3px solid white;
}
.aqua1{
background-color:aqua;
}
.chartreuse1{
background-color:chartreuse;
}
.deeppink1{
background-color:deeppink;
}
.dodgerblue1{
background-color:dodgerblue;
}
.gold1{
background-color:gold;
}
.indigo1{
background-color:indigo;
}
.lightpink1{
background-color:lightpink;
}
.mediumpurple1{
background-color:mediumpurple;
}
.coral1{
background-color:coral;
}
.springgreen1{
background-color:springgreen;
}
.red1{
background-color:red;
}
.peachpuff1{
background-color:peachpuff;
}
.deepskyblue1{
background-color:deepskyblue;
}
<div class="aqua1 specs">
</div>
<div class="chartreuse1 specs">
</div>
<div class="deeppink1 specs">
</div>
<div class="dodgerblue1 specs">
</div>
<div class="gold1 specs">
</div>
<div class="indigo1 specs">
</div>
<div class="lightpink1 specs">
</div>
<div class="mediumpurple1 specs">
</div>
<div class="coral1 specs">
</div>
<div class="springgreen1 specs">
</div>
<div class="red1 specs">
</div>
<div class="peachpuff1 specs">
</div>
<div class="deepskyblue1 specs">
</div>

I'm not sure I completely understand this code, but from what I do comprehend, you are using the variable 'i' twice in both for loops. I don't know if this is intentional, but changing the nested variable 'i' to a 'j' should do the job. I hope that helps!

Why is my code displaying NaN instead of an integer when attempting to display a Math.random value?

I am attempting to append a Math.random function to a data-crystal attribute on an image. When the image is clicked, it will display the randomly assigned number to the HTML page and continue to add upon itself each time it is clicked.
Here is the code code.
let currentScore = 0
let wins = 0
let losses = 0
let targetScore = 0
//function to assign number to crystals
$('#crystal1').append(`
data-crystal=${Math.floor(Math.random() * 25) }
`)
$('#crystal1').on('click', function (){
let crystalValue = $(this).attr('data-crystal')
crystalValue = parseInt(crystalValue)
crystalValue += currentScore
$('.scoreTotal').text(currentScore)
console.log(crystalValue)
})
Also, here is the related HTML.
<div class="row">
<h4 class="scoreTotal"></h4>
</div>
</div>
<div class="row">
<img id="crystal1" src="./assets/images/crystal_1.png" alt="crystal 1">
<img id="crystal2" src="./assets/images/crystal_2.png" alt="crystal 2">
<img id="crystal3" src="./assets/images/crystal_3.png" alt="crystal 3">
<img id="crystal4" src="./assets/images/crystal_4.png" alt="crystal 4">
</div>
</div>
When I console.log crystalValue, I get NaN, even though when I look at the HTML in my dev tools, the data-crystal is being properly appended. I've tried everything I can to fix it, but can't seem to correct it. This my first post on Stack Overflow, I'm sorry if this is a common question or too simple.

The correct way to set data-attributes to with jQuery's .data() method, not jQuery's .append() method which inserts HTML at the end of an Element.
The documentation states that jQuery's .data method will:
Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.
let currentScore = 0
let wins = 0
let losses = 0
let targetScore = 0
//function to assign number to crystals
$('#crystal1').data('crystal', Math.floor(Math.random() * 25));
console.log($('#crystal1').data('crystal'));
$('#crystal1').on('click', function (){
let crystalValue = $(this).data('crystal');
currentScore++;
crystalValue += currentScore;
$('.scoreTotal').text(crystalValue);
})
html, body{
padding: 10px;
}
img{
display: inline-block;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="row">
<h4 class="scoreTotal"></h4>
</div>
<div class="row">
<img id="crystal1" src="./assets/images/crystal_1.png" alt="crystal 1">
<img id="crystal2" src="./assets/images/crystal_2.png" alt="crystal 2">
<img id="crystal3" src="./assets/images/crystal_3.png" alt="crystal 3">
<img id="crystal4" src="./assets/images/crystal_4.png" alt="crystal 4">
</div>
</div>

Your not adding the data attribute correctly.
Using jQuery's append is for inserting content into the end of each element on the set of the matched elements.
You should use jQuery's data method.
$('#crystal1').data('crystal', Math.floor(Math.random() * 25));
This will set the data-crystal attribute on all matched elements with the desired value.
Here's a fiddle with a working code.

clear dynamic collapsible list, empty() html(" ") is not working

<div data-role="page" id="leavebal_page" class="home_page_style" style="position:fixed; overflow:hidden;">
<div data-role="content" id="leavebal_page_content"style="overflow:hidden;margin: 0;
padding: 0;" >
<div id="leavebal_header" style="width: 100%; margin: -2%; height:12.5%;">
<h4 style="text-align: center; color: white;line-height: 3;">AppName</h4>
Menu
Back
</div>
<hr style="width:100%; margin-top:-9%;">
<div id="leave_query" class="open_tab_bckgrnd" style="margin-top: -6%;">
<h6 style="background-color:#D3D3D3;text-align:center;height:6%;color: #C32036;text-shadow: none;font-size: 18px;font-weight: normal;position: relative;top: 2%;">Leave Balance</h6>
<div data-role="collapsible-set" id="leavebalstatus">
</div>
</div>
</div>
</div>
I want to clear previous data every time I left my page. I used .empty() & html('') for this but it is not working. Please help me.
Here is my code -
$("#leavebalstatus").html(" ");
$("#leavebalstatus").empty();
var leaveBallist= '';
for( i=0; i<getLeaveBal.length;i++){
leavebalgrp_name = getLeaveBal[i].find('Leave_Group_Name').text();
leavebal_code = getLeaveBal[i].find('Leave_Type_Code').text();
leavebal_name = getLeaveBal[i].find('Leave_Name').text();
leaveBallist += '<div data-role="collapsible" data-iconpos="right" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" style="background:white;" id="leaveBalMainData"><h3 style="margin-bottom:2%;"><div style="width:100%;" id="leaveBal_contaner"><p style="display:inline-block;width:35%;background: red;text-align:center; color:white;">'+leavebal_name+'</p><p style="display:inline-block;width:60%; margin-left:5%;">'+leavebalgrp_name+'</p></div></h3>';
for(k=0; k<collapseArray.length;k++){
if (i == k){
leaveBallist += '<p style="width:100%;margin-left:5%;"><span style="width:33%; dispaly:inlne-block;float:left;">Entitled</span><span style="width:33%; dispaly:inlne-block;float:left;">Availed</span><span style="width:33%; dispaly:inlne-block;float:left;">Balance</span></p><p style="width:100%;margin-left:5%;"><span style="width:33%; dispaly:inlne-block; float:left;">'+collapseArray[i].find('LeaveEntitled').text()+'</span><span style="width:33%; dispaly:inlne-block; float:left;">'+collapseArray[i].find('LeaveAvailed').text()+'</span><span style="width:33%; dispaly:inlne-block; float:left;">'+collapseArray[i].find('LeaveBal').text()+'</span></p>';
}
}
leaveBallist += '<p style="width:100%;"><hr style="width:100%;"></p><p style="width:100%;"><span style="color:red; width:100%;font-size:16px;margin-left:42%" onclick="applyLeaveForBal('+i+');">APPLY</span></p></div>';
}
$('#leavebalstatus').html(leaveBallist);
// $('#leavebalstatus').collapsible();
$('#leavebalstatus').collapsibleset( "refresh" );
$('#leavebalstatus').trigger("create");
for clearing data from page I tried calling
$(document).on("pagehide", "#leavebal_page", function(event, ui){
alert(event.target);
$('#leavebalstatus').empty();
$('#leavebalstatus').html('');
});
but both is not working.Thanks for help

Its because you are creating the value again even after the value is emptied by the following code in the snippet:
$('#leavebalstatus').collapsibleset( "refresh" );
$('#leavebalstatus').trigger("create");
the value is emptied but at the end again refreshed and created.
You should set a flag to check whether the pagehide event occurred and if not occurred execute above two else not.

You could try with remove this way:
$("#leavebalstatus").children().remove();
I hope this helps you!

document.getElementById("#leavebalstatus").reset();

I can't be sure about what I'll say without testing it but maybe it can help. Last week I was working with Bootstrap and I had troubles with a modal when I tried to clean it in certain cases.
The thing was that in some situations Bootstrap was creating the modal again as a direct child of the body. So when I called the empty function it was pointing somewhere else.
My suggestion is to evaluate the alert($('#leavebalstatus').length) as #AlenaKastsiukavets says in the comments but changing the leavebalstatus id into a class, so that way jQuery doesn't have problems selecting more than one object.
Finally I solved it by putting the modal as a direct child of the body but obviously it's probable that the solution you need may change a bit.

use html5 output tag to display javascript variables?

Sorry if this is a silly question, but I've been trying to use AJAX to display my javascript variables in 'real time' with little luck. I'm definitely a beginner though so this could be the problem haha- When I see the AJAX code, it always seems to require an additional url that it refreshes, but I just want to refresh the javascript variables on click.
http://jsfiddle.net/bagelpirate/m9Pm2/
<script>
var one = 0;
var two = 0;
var three = 0;
</script>
<body>
<div id="div_1">
One: <script>document.write(one)</script> |
Two: <script>document.write(two)</script> |
Three: <script>document.write(three)</script>
</div>
<div id="div_2">
<img id="mine" src="https://si0.twimg.com/profile_images/3170725828/ac1d6621fc3c3ecaa541d8073d4421cc.jpeg" onclick="one++;" />
<img id="forest" src="http://blogs.dallasobserver.com/sportatorium/No.%202.png" onclick="two++;" />
<img id="farm" src="https://si0.twimg.com/profile_images/3732261215/bd041d1f0948b6ea0493f90507d67ef2.png" onclick="three++;" />
</div>
</body>
As you can see in the above code, when a user clicks one of the images, I want to increment the count and display it at the top of the page. I found the HTML5 output tag, and was wondering if it's possible to use this to display the javascript variable in real time? Everything I've read seems to imply it can't be done because the output tag only works on forms? Anyway, I figured it couldn't hurt to ask!
Thanks for your time!

You shouldn't use document.write to write to the DOM after it's finished loading. You have tagged your question with jQuery, so I'll assume you can use that to update things. Instead, update the DOM from within your script block. Here is an example that might help you get started.
http://jsfiddle.net/prxBb/
<script type="text/javascript">
$(function() {
var one = 0;
var two = 0;
var three = 0;
$('img#mine').click(function() {
one++;
$('span#one').html(one);
});
$('img#forest').click(function() {
two++;
$('span#two').html(two);
});
$('img#farm').click(function() {
three++;
$('span#three').html(three);
});
});
</script>
<body>
<div id="div_1">
One: <span id="one"></span> |
Two: <span id="two"></span> |
Three: <span id="three"></span>
</div>
<div id="div_2">
<img id="mine" src="https://si0.twimg.com/profile_images/3170725828/ac1d6621fc3c3ecaa541d8073d4421cc.jpeg" />
<img id="forest" src="http://blogs.dallasobserver.com/sportatorium/No.%202.png" />
<img id="farm" src="https://si0.twimg.com/profile_images/3732261215/bd041d1f0948b6ea0493f90507d67ef2.png" />
</div>
</body>

Maybe you should try putting all your variables inside a named object, iterating through it at predefined interval and displaying the values.
var varContainer = {
one:0,
two:0,
three:0
};
jQuery("#div_2 img").on('click',function(){
jQuery.each(varContainer,function(key,value){
//Add key + value to the DOM
if(jQuery("."+key+value).length<1)
jQuery("#div_2").append("<div class='"+key+value+"'></div>");
var newHtmlVal= "<p><span>Var name: "+key+"</span><br><span>Value: "+value+"</span>";
jQuery("."+key+value).html();
});
});
HTML
<div id="div_2">
</div>
Of course the script could be upgraded to look through each variable recursivley in case of nested objects/arrays...
Hope this helps!

How to tell a javascript function what element to manipulate?

I am so very new to asp.net and javascript, and I am supposed to do the following task in a couple of days. I know I have to learn all the basics, before asking, but really don't know where to get what I need in short time. Thanks a lot in advance!
Here's a number cities, which will be shown on a country map:
Each city has it's own style (since city positions are different), defined in a css.
<div class="node">
<div class="taxonomy">
</div>
<div class="content">
<div id="contact_map" runat="server">
<ul>
<li id="city1" onmouseover= "onmouseoveragent(this)"
onmouseout="onmouseoutagent(this)">
<a href="someAddress"><span class="hideme">Some City Name</span>
</a>
<p class="hideme">Some City Name<strong class="tel">0123456789</strong>
</p>
</li>
<%-- other cities here, with different city name and tel --%>
</ul>
</div>
</div>
</div>
I will probably try to figure out how to create these city items dynamically later.
Below is a hint box, to be shown when mouse is over the city. It has to be repeated for all the cities. (Question1: How can I create these hint boxes dynamically, and somehow fill them with the information associated with the right city? Maybe I have to create the previous list dynamically, too..)
<div id="agentVisit" class="floating-tip-wrapper" style="margin: 0px; padding: 0px; position:
absolute; display:none; opacity: 1;">
<div class="floating-tip" style="margin: 0px;">Some City Name
<strong class="tel">0123456789</strong>
</div>
</div>
And this is tha javascript code for onmouseover and onmouseout of each city:
(Question 2: How can I tell the function which agentVisit to get? )
<script language="javascript" type="text/javascript">
function onmouseoveragent(e) {
var hint = document.getElementById("agentVisit");
console.log(hint);
hint.style.display = 'block';
hint.style.top = Math.max(e.offsetTop - hint.offsetHeight, 0) + "px";
hint.style.left = e.offsetLeft + "px";
};
function onmouseoutagent(e) {
var hint = document.getElementById("agentVisit");
hint.style.display = 'none';
}
</script>
I would appreciate it if you provide an idea (or just a general hint) of how to do it. Or just a link to a quick tutorial. Thanks!

I think you are making this way more complicated than it has to be, because you can leverage data dash (data-) attributes of DOM elements and then use something like jQueryUI Tooltip.