Can anyone help me to get this (https://jsfiddle.net/hmatrix/v3jncqac/) code to work?
Inentention: I want to create a counter that increases in increments.
My HTML:
<body onload="incrementCount(10)">
<div class="main_container" id="id_main_container">
<div class="container_inner" id="display_div_id">
</div>
</div>
</body>
My JS:
var counter_list = [10,10000,10000];
var str_counter_0 = counter_list[0];
var str_counter_1 = counter_list[1];
var str_counter_2 = counter_list[2];
var display_str = "";
var display_div = document.getElementById("display_div_id");
function incrementCount(current_count){
setInterval(function(){
// clear count
while (display_div.hasChildNodes()) {
display_div.removeChild(display_div.lastChild);
}
str_counter_0++;
if (str_counter_0 > 99) {
str_counter_0 = 0; // reset count
str_counter_1++; // increase next count
}
if(str_counter_1>99999){
str_counter_2++;
}
display_str = str_counter_2.toString() + str_counter_1.toString() + str_counter_0.toString();
for (var i = 0; i < display_str.length; i++) {
var new_span = document.createElement('span');
new_span.className = 'num_tiles';
new_span.innerText = display_str[i];
display_div.appendChild(new_span);
}
},1000);
}
<body onload="incrementCount(10)">
<div class="main_container" id="id_main_container">
<div class="container_inner" id="display_div_id">
</div>
</div>
</body>
<script>
var counter_list = [10,10000,10000];
var str_counter_0 = counter_list[0];
var str_counter_1 = counter_list[1];
var str_counter_2 = counter_list[2];
var display_str = "";
var display_div = document.getElementById("display_div_id");
function incrementCount(current_count){
setInterval(function(){
// clear count
while (display_div.hasChildNodes()) {
display_div.removeChild(display_div.lastChild);
}
str_counter_0++;
if (str_counter_0 > 99) {
str_counter_0 = 0; // reset count
str_counter_1++; // increase next count
}
if(str_counter_1>99999){
str_counter_2++;
}
display_str = str_counter_2.toString() + str_counter_1.toString() +
str_counter_0.toString();
for (var i = 0; i < display_str.length; i++) {
var new_span = document.createElement('span');
new_span.className = 'num_tiles';
new_span.innerText = display_str[i];
display_div.appendChild(new_span);
}
},1000);
}
</script>
JSFIDDLE: https://jsfiddle.net/v3jncqac/32/
Your onload function cannot find the function because your js is in a different file. you need to add script src on top of html or do it as shown above.
Here is the error I get:
Here is the code:
<html>
<head>
</head>
<body>
<p> Please enter a series of numbers, each separated by a new line.<br><p>
<textarea id="myTextArea" rows = "7" cols = "50"></textarea><br>
<button onclick="processData()">Done</button>
<p id = "mean"></p>
<p id = "median"></p>
<p id = "count"></p>
<p id = "summation"></p>
<p id = "mode"></p>
<p id = "variance"></p>
<p id = "sd"></p>
<script type = "text/javascript">
function processData()
{
var arrayOfLines = document.getElementById('myTextArea').value.split('\n');
var length = arrayOfLines.length;
var modeArr = {};
var sum = 0;
var mean = 0;
var median = 0;
var count = length;
var mode = 0;
var variance = 0;
var standard deviation = 0;
var modeCounter = {};
var meanOutput = document.getElementById('mean');
var medianOutput = document.getElementById('median');
var modeOutput = document.getElementById('mode');
var countOutput = document.getElementById('count');
var summationOutput = document.getElementById('summation');
var varianceOutput = document.getElementById('variance');
var sdOutput = document.getElementById('sd');
alert("hi");
alert(arrayOfLines[0]);
sum(arrayOfLines);
mean(arrayOfLines);
median(arrayOfLines);
mode(arrayOfLines);
variance(arrayOfLines);
standardDeviation(arrayOfLines);
variance(arrayOfLines);
}
function sum(array)
{
for (var a = 0; a < length; a++)
{
sum += arrayOfLines[a];
}
alert(sum);
summationOutput.innerHTML = sum;
}
function mode (array)
{
for (var a = 0; a < length; a++)
{
for (var b = 0; b < modeArr.length; b++)
{
if (arr[a] == arr[b])
{
modeCounter[a]++;
}
}
arr[a] = arrayOfLines[a];
}
moedOutput.innerHTML = mode;
}
function mean (array)
{
mean = sum/length;
meanOutput.innerHTML = mean;
}
function median (array)
{
if (length % 2 == 1)
{
median = sortedArrayOfLines[((length - 1)/2)+1]
}
else
{
median = (sortedArrayOfLines[length/2] + sortedArrayOfLines[(length/2)+1])/2
}
medianOutput.innerHTML = median;
}
function variance (array)
{
var mean = mean(array);
return mean(array.map(function(num)
{
varianceOutput.innerHTML = Math.pow(num - mean, 2);
}));
}
function standardDeviation (array)
{
medianOutput.innerHTML = Math.sqrt(variance(array));
}
</script>
</body>
</html>
problem is here
var standard deviation = 0;
^^
replace it with
var standard_deviation = 0;
I want to create a card matching game but I have an issue showing the images that are supposed to be hidden. When I click on a card, the path of the image shows instead of the actual image.
Here are all the codes that I have written:
div#card_board {
background: #ccc;
border: #999 1px solid;
width: 710px;
height: 600px;
padding: 24px;
margin: 0px auto;
}
div#card_board>div {
background: url(cardQtion.jpg) no-repeat;
background-size: 100%;
border: #000 1px solid;
width: 114px;
height: 132px;
float: left;
margin: 10px;
padding: 20px;
font-size: 64px;
cursor: pointer;
text-align: center;
}
<script>
var cardArray = new Array();
cardArray[0] = new Image();
cardArray[0].src = 'cardA.jpg';
cardArray[1] = new Image();
cardArray[1].src = 'cardA.jpg';
cardArray[2] = new Image();
cardArray[2].src = 'cardB.jpg';
cardArray[3] = new Image();
cardArray[3].src = 'cardB.jpg';
cardArray[4] = new Image();
cardArray[4].src = 'cardC.jpg';
cardArray[5] = new Image();
cardArray[5].src = 'cardC.jpg';
cardArray[6] = new Image();
cardArray[6].src = 'cardD.jpg';
cardArray[7] = new Image();
cardArray[7].src = 'cardD.jpg';
cardArray[8] = new Image();
cardArray[8].src = 'cardE.jpg';
cardArray[9] = new Image();
cardArray[9].src = 'cardE.jpg';
cardArray[10] = new Image();
cardArray[10].src = 'cardF.jpg';
cardArray[11] = new Image();
cardArray[11].src = 'cardF.jpg';
var cardVal = [];
var cardIDs = [];
var cardBackFace = 0;
Array.prototype.cardMix = function() {
var i = this.length,
j, temp;
while (--i > 0) {
j = Math.floor(Math.random() * (i + 1));
temp = this[j];
this[j] = this[i];
this[i] = temp;
}
}
function newBoard() {
cardBackFace = 0;
var output = "";
cardArray.cardMix();
for (var i = 0; i < cardArray.length; i++) {
output += '<div id="card_' + i + '" onclick="cardBackcard(this,\'' + cardArray[i].src + '\')"></div>';
}
document.getElementById('card_board').innerHTML = output;
}
function cardBackcard(tile, val) {
if (tile.innerHTML == "" && cardVal.length < 2) {
tile.style.background = '#FFF';
tile.innerHTML = val;
if (cardVal.length == 0) {
cardVal.push(val);
cardIDs.push(tile.id);
} else if (cardVal.length == 1) {
cardVal.push(val);
cardIDs.push(tile.id);
if (cardVal[0] == cardVal[1]) {
cardBackFace += 2;
cardVal = [];
cardIDs = [];
if (cardBackFace == cardArray.length) {
alert("Board cleared... generating new board");
document.getElementById('card_board').innerHTML = "";
newBoard();
}
} else {
function card2Back() {
var card_1 = document.getElementById(cardIDs[0]);
var card_2 = document.getElementById(cardIDs[1]);
card_1.style.background = 'url(cardQtion.jpg) no-repeat';
card_1.innerHTML = "";
card_2.style.background = 'url(cardQtion.jpg) no-repeat';
card_2.innerHTML = "";
cardVal = [];
cardIDs = [];
}
setTimeout(card2Back, 700);
}
}
}
}
</script>
<body>
<div id="card_board"></div>
<script>
newBoard();
</script>
</body>
You have some less than optimal code and frankly mine is only a refactor of that and has much that can be improved - study up.
Given that, here is the refactor:
I really dislike event in markup SO I moved that click handler invocation right into the code.
I saw two sets of JavaScript in your page why? I simply put them both in one.(see the last line of this).
Your array of images thing was not working and verbose so I used an array of names and created an array of images from that.
Insertion of an element is different than text so I used tile.appendChild(cardArray[cardIndex]); instead
Code:
// create an array of card images
var cardArray = [];
var cards = ['cardA.jpg', 'cardB.jpg', 'cardC.jpg', 'cardD.jpg', 'cardE.jpg', 'cardF.jpg'];
for (var i = 0; i < cards.length; i++) {
var im = new Image();
im.src = cards[i];
im.alt = cards[i];
cardArray.push(im);
cardArray.push(im);
}
var cardVal = [];
var cardIDs = [];
var cardBackFace = 0;
Array.prototype.cardMix = function() {
var i = this.length,
j, temp;
while (--i > 0) {
j = Math.floor(Math.random() * (i + 1));
temp = this[j];
this[j] = this[i];
this[i] = temp;
}
}
function newBoard() {
cardBackFace = 0;
var output = "";
cardArray.cardMix();
for (var i = 0; i < cardArray.length; i++) {
output += '<div id="card_' + i + '" class="cardcontainer" data-card="' + i + '"></div>';
}
document.getElementById('card_board').innerHTML = output;
var classname = document.getElementsByClassName("cardcontainer");
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', cardBackcard, false);
}
}
function card2Back() {
var card_1 = document.getElementById(cardIDs[0]);
var card_2 = document.getElementById(cardIDs[1]);
card_1.style.background = "url('cardQtion.jpg') no-repeat";
card_1.innerHTML = "";
card_2.style.background = "url('cardQtion.jpg') no-repeat";
card_2.innerHTML = "";
cardVal = [];
cardIDs = [];
}
function cardBackcard() {
// these used to be in the HTML as parameters, I refactored to pass `this`
// and then use the attribute which is the index of the card it had
var tile = this;
//multiply by 1 to get number, could use parseInt but I did not
var cardIndex = this.getAttribute("data-card") *1;
if (!(tile.innerHTML == "" && cardVal.length < 2)) return;
tile.style.background = '#FFF';
tile.appendChild(cardArray[cardIndex]);
if (!(cardVal.length == 0 && cardVal[0] == cardVal[1])) return;
cardVal.push(cardIndex);
cardIDs.push(tile.id);
if (cardVal.length == 1) {
if (cardVal[0] == cardVal[1]) {
cardBackFace += 2;
cardVal = [];
cardIDs = [];
if (cardBackFace == cardArray.length) {
alert("Board cleared... generating new board");
document.getElementById('card_board').innerHTML = "";
newBoard();
}
} else {
setTimeout(card2Back, 700);
}
}
}
newBoard();
Actually I'm trying to count the number of User Stories and its associated QA Task (TaskType) for each projects based upon Release and Iteration filter. I'm able to achieve it using SDK 1.32., but Release and Iteration dropdown are not working properly in IE browser.
also please let me know whether it's advisable to upgrade current SDK version to 2.0 or is there any workaround to resolve it.
Thanks in advance
Script :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta name="Name" content="Project Board" />
<script type="text/javascript" src="/apps/1.32/sdk.js">
</script>
<script type="text/javascript">
function ReleaseDependencies() {
var rallyDataSource;
var cardBoard;
var releaseDropdown;
var table;
var header;
var task_count = 0;
var data = new Array();
var taskData = new Array();
var iterDropdown;
function buildHeaders() {
var tableConfig = {
sortingEnabled: false,
columnKeys: [
'module', 'totstories', 'totcompleted', 'totinprogress',
'totqa', 'totblocked'
],
columnHeaders: [
'MODULE', 'STORIES', 'COMPLETED', 'IN-PROGRESS', 'QA TASKS', 'BLOCKED'
],
columnWidths: ['16%', '16%', '16%', '16%', '16%', '16%']
};
table = new rally.sdk.ui.Table(tableConfig);
}
function destroyTables() {
if (table) {
table.destroy();
}
}
function onReleaseSelected(releases, eventArgs) {
if (iterDropdown) {
iterDropdown.destroy();
destroyTables();
}
var queryConfig = {
label: "Select Iteration "
};
iterDropdown = new rally.sdk.ui.IterationDropdown(queryConfig, rallyDataSource);
iterDropdown.display(document.getElementById("releaseDiv2"), onIterationSelected);
releaseDropdown.addEventListener("onChange", display);
}
function onIterationSelected(releases, eventArgs) {
if (table) {
table.destroy();
}
var queryConfig = {};
findProjects();
iterDropdown.addEventListener("onLoad", findProjects);
iterDropdown.addEventListener("onChange", findProjects);
}
this.display = function() {
destroyTables();
rallyDataSource = new rally.sdk.data.RallyDataSource('1283334',
'2013244650',
'false',
'true');
rally.sdk.ui.AppHeader.showPageTools(true);
releaseDropdown = new rally.sdk.ui.ReleaseDropdown({}, rallyDataSource);
releaseDropdown.display(document.getElementById("releaseDiv"), onReleaseSelected);
};
function findProjects() {
buildHeaders();
var targetReleaseName = releaseDropdown.getSelectedName();
var relCond = '(Release.Name = "_REL_TARGET_")'.replace('_REL_TARGET_', targetReleaseName);
var targetIterationName = iterDropdown.getSelectedName();
var iterCond = '(Iteration.Name = "_ITER_TARGET_")'.replace('_ITER_TARGET_', targetIterationName);
var storyCriteria = '(' + relCond + ' AND ' + iterCond + ')';
rallyDataSource.find({
key: "stories",
type: "hierarchicalrequirement",
query: storyCriteria,
fetch: 'FormattedID,Name,Project,Parent,ScheduleState,Tasks,TaskType'
}, onProjectsRetrieved);
}
function onProjectsRetrieved(results) {
var rowCount = 0;
var proCount = 0;
var proName;
var stateCount = 0;
var progCount = 0;
var n;
var fields;
var fieldLength = 0;
var queryConfigs;
var task_count = 0;
var blocked = 0;
for (var j = 0; j < results.stories.length; j++) {
var abc = results.stories[j].Project.Name;
data.push(abc);
data.sort();
}
data = unique(data);
for (var i = 0; i < data.length; i++) {
table.setCell(rowCount, 'module', data[i]);
var pr = data[i];
rally.forEach(results.stories, function(proj) {
story = proj;
if (proj.Project.Name == pr) {
proCount++;
n = n + proj.Name + "~";
fields = n.split('~');
fieldLength = fields.length - 1;
proName = proj.Project.Name
if (proj.ScheduleState == "Completed") {
stateCount++;
} else if (proj.ScheduleState == "In-Progress") {
progCount++;
}
if (proj.blocked == true) {
blocked++;
}
for (var q = 0; q < story.Tasks.length; q++) {
if (story.Tasks.length > 0) { //if(pr == story.Tasks[q].Project.Name)
if (story.Tasks[q].TaskType == "QA") {
task_count++;
break;
}
}
}
}
});
table.setCell(rowCount, 'totstories', fieldLength);
table.setCell(rowCount, 'totcompleted', stateCount);
table.setCell(rowCount, 'totinprogress', progCount);
table.setCell(rowCount, 'totqa', task_count);
table.setCell(rowCount, 'totblocked', blocked);
rowCount++;
proCount = 0;
stateCount = 0;
progCount = 0;
fieldLength = 0;
task_count = 0;
n = null;
if (blocked > 0) {
blocked = 0;
}
}
table.display(document.getElementById('projects'));
}
var unique = function(origArr) {
var newArr = [],
origLen = origArr.length,
found,
x, y;
for (x = 0; x < origLen; x++) {
found = undefined;
for (y = 0; y < newArr.length; y++) {
if (origArr[x] === newArr[y]) {
found = true;
break;
}
}
if (!found) newArr.push(origArr[x]);
}
return newArr;
}
} //rally.addOnLoad(onLoad);
</script>
<style type="text/css">
#header {
margin-bottom: -22px;
}
</style>
<script type="text/javascript">
function onLoad() {
var releaseDependencies = new ReleaseDependencies();
releaseDependencies.display();
}
rally.addOnLoad(onLoad);
</script>
</head>
<body>
<div id="releaseDiv">
</div>
<div id="releaseDiv2">
</div>
<br/>
<br/>
<div id="projects">
</div>
</body>
</html>
App SDK 1 is based on dojo 1.6, which officially supported IE 6, 7 and 8. App SDK 1 has been deprecated for some time in favor of App SDK 2.0. If you can upgrade that would be the ideal solution. Otherwise, if you can give some more insight into what exactly is not working correctly and what specific IE version you're having trouble with maybe a workaround can be found.
I Have multi select pick list which work fine however it now contains around 70 options to select from with around 12 categories - I have searched around the internet to find a solution that could make the list a little more user friendly.
It would be perfect if I was able to have the pick list with the 12 categories and on select of them they cascade in to their sub options. However the tricky part is this has to be done from within the same field.
Has anyone had a similar request or know of anyway to make this possible?
Thank You
here is the code for the multi select pick list I have currently:
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title>
<script src="sc_json2.js" type="text/javascript"></script>
<meta charset="utf-8"></head>
<body style="margin: 0px; border: 0px currentColor; font-family: Segoe UI; font-size: 11px; background-color: rgb(246, 248, 250);" onload="onload()">
<div id="MultiSelectField"></div>
<script type="text/javascript">
var FORM_TYPE_CREATE = 1;
var FORM_TYPE_UPDATE = 2;
var FORM_TYPE_READ_ONLY = 3;
var FORM_TYPE_DISABLED = 4;
var FORM_TYPE_QUICK_CREATE = 5;
var FORM_TYPE_BULK_EDIT = 6;
var var_sc_optionset;
var var_sc_optionsetvalue;
var options;
var checkedValues;
var isDirty = false;
var html = "";
function onload() {
var formType = parent.Xrm.Page.ui.getFormType();
if (formType == FORM_TYPE_BULK_EDIT) {
displayMessage();
}
else {
init();
}
}
function init() {
getParameters();
getOptionSetValues();
getCheckedValues();
convertToMultiSelect();
}
function displayMessage() {
MultiSelectField.innerHTML = "This field cannot be displayed or edited in this form mode.";
}
function getParameters() {
var querystring = unescape(window.location.search.replace('?', '').replace('data=', ''));
var params = querystring.split(',');
for (var i = 0; i < params.length; i++) {
if (i == 0) {
var_sc_optionset = params[i];
}
else if (i == 1) {
var_sc_optionsetvalue = params[i];
}
}
}
//populate option-set values and integers
function getOptionSetValues() {
options = parent.Xrm.Page.getAttribute(var_sc_optionset).getOptions();
}
function getCheckedValues() {
var dirtyCheckedOptions = parent.Xrm.Page.getAttribute(var_sc_optionsetvalue).getValue();
if (dirtyCheckedOptions != null) {
checkedValues = dirtyCheckedOptions.split(';');
}
else {
checkedValues = '';
}
}
//Method to convert an optionset to multi select Option Set
function convertToMultiSelect() {
for (var i = 0; i < options.length - 1; i++) {
var pOption = options[i];
if (!isChecked(pOption.text))
html += "<input type='checkbox' class='multiselect_cb' onclick='makeDirty()' style='border:none; width:25px; align:left;' title='" + pOption.text + "'/>";
else
html += "<input type='checkbox' class='multiselect_cb' checked='checked' onclick='makeDirty()' style='border:none; width:25px; align:left;' title='" + pOption.text + "'/>";
html += "<label>" + pOption.text + "</label>";
if (i != options.length - 2) {
html += "<br/>"; //it's a 'br' flag
}
}
MultiSelectField.innerHTML = html;
}
function makeDirty() {
isDirty = true;
}
function isChecked(ptext) {
for (var i = 0; i < checkedValues.length; i++) {
if (checkedValues[i] == ptext)
return true;
}
return false;
}
function saveMultiSelect() {
if (isDirty) {
var divElement = document.getElementById("MultiSelectField");
var result = '';
for (var i = 0; i < divElement.childNodes.length; i++) {
if (divElement.childNodes[i].type == "checkbox" && divElement.childNodes[i].checked) {
result += divElement.childNodes[i].title + ";";
}
}
//clear out the previous results from the field
parent.Xrm.Page.getAttribute(var_sc_optionsetvalue).setValue("");
//populate var_sc_optionsetvalue with the checked values
parent.Xrm.Page.getAttribute(var_sc_optionsetvalue).setValue(result);
isDirty = false;
}
}
</script>
</body></html>