I'm trying to avoid horizontal and vertical lines.
It stopped working with the Javascript array and for the rest of it.
I don't know how to create Javascript to randomly generate the first line and don't overlap with daeumjul. Please let me know. The code has been raised to jsfiddle.
Screenshot:
Javascript
var arr_person = ["#B22222","#0000cd","#FF00FF","#DAA520","#008000","#FF69B4","#4B0082","#E6E6FA","#ADD8E6","#90EE90"];
var arr_date = ['mon', 'tue', 'wed', 'thu','fri'];
var arr_subject = ['subject1','subject2','subject3','subject4','subject5'];
var arr_subject_check = new Array();
for(m=0; m < arr_subject.length; m++){
arr_subject_check[m] = new Array();
}
var arr_time = ['morning','after'];
var str = "";
function pickFromPool() {
var r = Math.floor(Math.random() * arr_pool.length);
return arr_pool.splice(r,1)[0];
}
str += "<table>";
for(var i=0; i < arr_date.length; i++){ // arr_date
var arr_pool = arr_person.slice();
str += "<tr>";
for(var j=0; j < arr_subject.length; j++ ){ //arr_subject
var arr_subject_check_cur = arr_subject_check[j].slice();
for(var n=0; n < arr_subject_check_cur.length; n++) {
var dup_index = arr_pool.indexOf(arr_subject_check_cur[n]);
if(dup_index < 0) {
} else {
arr_pool.splice(dup_index,1);
}
}
for(var k=0; k < arr_time.length; k++ ){
var pickedValue = pickFromPool();
arr_subject_check[j].push(pickedValue);
if(k == 0){
str += "<td style='border-left:#fff 4px solid;background-color:" + pickedValue + "'></td>";
} else {
str += "<td style='background-color:" + pickedValue + "'></td>";
}
}
for(var m=0; m < arr_subject_check_cur.length; m++) {
if(arr_subject_check_cur[m] !== '') {
arr_pool.push(arr_subject_check_cur[m]);
}
}
}
str += "</tr>";
}
str += "</table>";
jQuery('body').html(str);
https://jsfiddle.net/ipadorusa/vx8t25ts/1/
I'm trying to avoid horizontal and vertical lines.
Related
I am having little problem on JavaScript. What I am doing is copying data from a grid and pasting into another. I was able to access the value from the cell, but problem comes as I try to format those value to string.
my code:
var colseperator = '~';
var rowseperator = ' ';
var clipStr = "";
if(selecttype = "area")
{
for (var i = startrow; i <= endrow; i++)
{
for (var j = startcol; j <= endcol; j++)
{
var cellValue = objGrid.getCellValue(i,j);
if(this.gfn_isNull(cellValue))
{
cellValue = "Null";
}
clipStr = clipStr + cellValue;
if(j != endcol)
{
clipStr = clipStr + colseperator;
}
}
if(i != endrow)
{
clipStr = clipStr + rowseperator;
}
}
}
From code above, my intention is copy the data into string format and separate each data with separator(in my case '~' for columns and 'indent' for rows). However, when I select one column(multi rows) and copy it, it would add column separators to all the rows.
I was thinking that if(j != endcol){clipStr = clipStr + colseperator;} would stop it from adding unnecessary separator. Am I doing something wrong here? And any tips on iterating the selected grid cells or formatting string?
example:
When I select those three lines,
row
data
1
a
2
b
3
c
Output:
a~ b~ c~
My expected output:
a b c
You could add a variable for a cols and add the separator if not iteratng the first item.
var colseperator = '~',
rowseperator = ' ',
clipStr = "";
if (selecttype = "area") {
for (var i = startrow; i <= endrow; i++) {
var cols = "";
for (var j = startcol; j <= endcol; j++) {
var cellValue = objGrid.getCellValue(i, j);
if (this.gfn_isNull(cellValue)) cellValue = "Null";
if (j !== startcol) cols += colseperator;
cols += cellValue;
}
if (j !== startcol) clipStr += rowseperator;
clipStr += cols;
}
}
I have code like that https://jsfiddle.net/Lcfnxxtv/ and i'd like to labels look like that eg.
Number of children
ages 5 - 18"
I want it in two separate lines and NOT all in one line(of course, if it's possible) 'Number of children ages 5 - 18' but i don't know how to do this in my code.
jQuery(document).ready(function() {
var array1 = [];
var array2 = [];
var array_typ = [];
var array_dla = [];
var array_wie = [];
var array_cen = [];
var array_licz = [];
var str = jQuery("#all_str").val();
array1 = str.split('#');
var size = array1.length;
var str1 = "Tax A - child";
var str2 = "Tax A - elder";
var str1w = "Number of children";
var str2w = "Number of elders";
var html = "</div>";
var html2 = "";
for (i = 0; i < size; i++) {
array2 = array1[i].split('#');
array_typ[i] = array2[0];
array_dla[i] = array2[1];
array_wie[i] = array2[2];
array_cen[i] = array2[3];
}
for (j = 0; j < size; j++) {
if (array_dla[j] == str1) {
if (jQuery.inArray(str1w, array_licz) == -1) {
array_licz[j] = str1w;
}
}
if (array_dla[j] == str2) {
if (jQuery.inArray(str2w, array_licz) == -1) {
array_licz[j] = str2w;
}
}
}
var size2 = array_licz.length;
for (k = 0; k < size2; k++) {
html += ' <label for="field[' + k + ']">' + array_licz[k] + ' ages ' + array_wie[k] + ' </label> ';
}
for (l = 0; l < size2; l++) {
html2 += '<input type="text" id="field' + l + '" value=""></input> ';
}
html += '</br>';
html += html2;
html += '</div>';
jQuery("#addon").append(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addon"></div>
<input type="hidden" id="all_str" value="XYZ#Tax A - elder#65-99#1#XYZ#Tax A - child#5-18#2#">
Please help
You have invalid tags. Input is a void element and does not needs a closing </input> tag.
<br>, <br/> are valid. </br> is not.
You have one useless for(l=0; l<size2; l++){
Use only the first k one.
Than in CSS set your label to display: block;
jQuery(function( $ ) {
var array1 = [];
var array2 = [];
var array_typ = [];
var array_dla = [];
var array_wie = [];
var array_cen = [];
var array_licz = [];
var str = $("#all_str").val();
array1 = str.split('#');
var size = array1.length;
var str1 = "Tax A - child";
var str2 = "Tax A - elder";
var str1w = "Number of children";
var str2w = "Number of elders";
var html = ""; // </div> ?? You mean Start of a <div>. BTW you have <label> already so ""
// html2 why??
for (i = 0; i < size; i++) {
array2 = array1[i].split('#');
array_typ[i] = array2[0];
array_dla[i] = array2[1];
array_wie[i] = array2[2];
array_cen[i] = array2[3];
}
for (j = 0; j < size; j++) {
if (array_dla[j] == str1) {
if ($.inArray(str1w, array_licz) == -1) {
array_licz[j] = str1w;
}
}
if (array_dla[j] == str2) {
if ($.inArray(str2w, array_licz) == -1) {
array_licz[j] = str2w;
}
}
}
var size2 = array_licz.length;
// Why loop twice size2. Loop once
for (k = 0; k < size2; k++) {
html += '<label for="field[' + k + ']">' +
array_licz[k] + '<br>ages ' + array_wie[k] +
'<br><input type="text" id="field' + k + '" value="">'+
' </label>';
}
$("#addon").append(html);
});
label{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addon"></div>
<input type="hidden" id="all_str" value="XYZ#Tax A - elder#65-99#1#XYZ#Tax A - child#5-18#2#">
The other part of your code can be also improved, but I have no idea what you're after with all those arrays...
$(document).ready(function() {
var array1 = [];
var array2 = [];
var array_typ = [];
var array_dla = [];
var array_wie = [];
var array_cen = [];
var array_licz = [];
var str = $("#all_str").val();
array1 = str.split('#');
var size = array1.length;
var str1 = "Tax A - child";
var str2 = "Tax A - elder";
var str1w = "Number of children";
var str2w = "Number of elders";
var html = "</div>";
var html2 = [];
var html3 = [];
for(i=0; i<size; i++){
array2= array1[i].split('#');
array_typ[i] = array2[0];
array_dla[i] = array2[1];
array_wie[i] = array2[2];
array_cen[i] = array2[3];
}
for(j=0; j<size; j++){
if(array_dla[j]==str1){
if($.inArray(str1w, array_licz) == -1){
array_licz[j]=str1w;
}
}
if(array_dla[j]==str2){
if($.inArray(str2w, array_licz) == -1){
array_licz[j]=str2w;
}
}
}
var size2 = array_licz.length;
for(k=0; k<size2; k++){
html3[k]='<label for="field['+ k +']">'+array_licz[k]+' ages <br>' +array_wie[k] +' </label> <br>';
}
for(l=0; l<size2; l++){
html2[l]='<input type="text" id="field'+l+'" value=""</input> <br></br>';
}
for(var j=0;j<size2;j++){
html += html3[j]+html2[j];
}
//html+='</br>';
//html+=html2;
html+='</div>';
$("#addon").append(html);
});
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addon">
</div>
<input type="hidden" id="all_str" value="XYZ#Tax A - elder#65-99#1#XYZ#Tax A - child#5-18#2#">
Your problem was the way you put the strings together. An easy solution is to use arrays and in the end you can manipulate them more easily
I'm just learning now. Can you please help me, why am I not getting the correct output. This is my code:
//ask questions
var quiz = [
["When is Bulgaria established?", 681],
["What year was it before 16 years?", 2000],
["When does WWII ends?", 1945]
];
//variables
var answer = [];
var correct = [];
var wrong = [];
var correctAns = 0;
var wrongAns = 0;
var oList = "<ol>";
//function to print the result in ordered list
function printResult(result){
for(var j = 0; j < result.length; j++){
oList += "<li>" + result[i] + "</li>";
}
oList += "</ol>";
return oList;
}
function print(message) {
document.getElementById('output').innerHTML = message;
}
//looping, adding correct and wrong answeres
for(var i = 0; i < 3; i++) {
answer[i] = prompt(quiz[i][0]);
if(parseInt(answer[i]) == quiz[i][1]){
correct.push(quiz[i][0]);
correctAns++;
} else {
wrong.push(quiz[i][0]);
wrongAns++;
}
}
//print logic
if(correct.length < 1 || correct == undefined){
print("You did not guess any of the quiestions!");
} else if (correct.length >= 1){
print("You have guessed " + correctAns + " questions.");
print(printResult(correct));
print("You have " + wrongAns + " wrong answeres.");
if(wrongAns > 0){
print(printResult(wrong));
}
}
I have watched this code over and over again and I still can't understand why am I getting undefined as a result. In the debugger, after the loop I check my vars and everything seems ok.
In your printResult function you are using var i instead of j,
Also you better use innerHtml+=message;
//ask questions
var quiz = [
["When is Bulgaria established?", 681],
["What year was it before 16 years?", 2000],
["When does WWII ends?", 1945]
];
//variables
var answer = [];
var correct = [];
var wrong = [];
var correctAns = 0;
var wrongAns = 0;
//function to print the result in ordered list
function printResult(result){
//HERE:
var oList = "<ol>";
for(var j = 0; j < result.length; j++){
oList += "<li>" + result[j] + "</li>";
}
oList += "</ol>";
return oList;
}
function print(message) {
document.getElementById('output').innerHTML += message;
}
//looping, adding correct and wrong answeres
for(var i = 0; i < 3; i++) {
answer[i] = prompt(quiz[i][0]);
if(parseInt(answer[i]) == quiz[i][1]){
correct.push(quiz[i][0]);
correctAns++;
} else {
wrong.push(quiz[i][0]);
wrongAns++;
}
}
//print logic
if(correct.length < 1 || correct == undefined){
print("You did not guess any of the quiestions!");
} else if (correct.length >= 1){
print("You have guessed " + correctAns + " questions.");
print(printResult(correct));
print("You have " + wrongAns + " wrong answeres.");
if(wrongAns > 0){
print(printResult(wrong));
}
}
<div id="output">
</div>
Basically you have three problems.
reuse of oList, the variable should be inside declared and used only in printResult.
Inside of printResult, use of i where j have been used and
At print, you replace the actual content with new content.
Just a small hint with variable names for counting. It is good practise to start always with i instead of j and go on with the letters in the alphabet.
var quiz = [["When is Bulgaria established?", 681], ["What year was it before 16 years?", 2000], ["When does WWII ends?", 1945]],
answer = [],
correct = [],
wrong = [],
correctAns = 0,
wrongAns = 0;
//function to print the result in ordered list
function printResult(result) {
var oList = "<ol>"; // !!! move variable inside of the function
for (var j = 0; j < result.length; j++) {
oList += "<li>" + result[j] + "</li>"; // !!! use j indstead if i
}
oList += "</ol>";
return oList;
}
function print(message) {
document.getElementById('output').innerHTML += message; // !!! append message
}
//looping, adding correct and wrong answeres
for (var i = 0; i < 3; i++) {
answer[i] = prompt(quiz[i][0]);
if (parseInt(answer[i]) == quiz[i][1]) {
correct.push(quiz[i][0]);
correctAns++;
} else {
wrong.push(quiz[i][0]);
wrongAns++;
}
}
//print logic
if (correct.length < 1 || correct == undefined) {
print("You did not guess any of the quiestions!");
} else if (correct.length >= 1) {
print("You have guessed " + correctAns + " questions.");
print(printResult(correct));
print("You have " + wrongAns + " wrong answeres.");
if (wrongAns > 0) {
print(printResult(wrong));
}
}
Your main mistake is using i intead of j:
for(var j = 0; j < result.length; j++){
oList += "<li>" + result[j] + "</li>";// here was i before
}
When I trird to run the js code, it always said "Uncaught TypeError: Cannot read property '_id' of undefined" for
deployedID.push(data[j]._id);
So after some thinking, I believe the problem lies in
var j = deploy[i];
Is there any way to solve it? Thanks in advance.
Below is the complete code:
var deploy = [];
var deployedID = [];
var deployedename = [];
var deployedoname = [];
var deployedrank = [];
function popularizeTable(){
$.get("/SSS/getlist", function(data){
deploy = randomunique(data.length ,100);
for (var i = 0; i < 100; i++){
var j = deploy[i];
deployedID.push(data[j]._id);
deployedename.push(data[j].ename);
deployedoname.push(data[j].oname);
deployedrank.push(data[j].rank);
}
var str = " ";
var k = 0;
for (var i = 0; i < 5; i++){
str += "<tr>";
for(var j = 0; j < 20; j++){
str += "<td><section id=\"" + deployedID[k] + "\" class=\"container\"><div class=\"card\">"
str += "<figure class=\"front\"><img src=\"images/back.jpg\"></figure>";
str += "<figure class=\"back\"><img src=\"images/Clear/" + deployedename[k] + "/001.jpg\"></figure></div></td></section>";
k++;
}
str += "</tr>";
}
$("#table").append(str);
});
}
$( document ).ready(function() {
popularizeTable();
$(document).on("mouseover", ".card", function(){
$(this).toggleClass("flipped")});
});
function randomunique(max, num){
var uniquelist = [];
for (var j = uniquelist.length; j < num; j++){
var i = parseInt(Math.random() * (max - 1) + 1);
if (uniquelist.indexOf(i) == -1){
uniquelist.push(i);
}
}
return uniquelist;
}
I am new to coding Javascript. I am trying to to shuffle list of names inputted on a textarea. The user selects the number of groups desired, and shuffle on click, then show the divided groups as output result. Below is my code but it is not working as it should be, pls help!
<script>
function ArrayToGroups(source, groups){
var groupList = [];
groupSize = Math.ceil(source.length/groups);
var queue = source;
for(var r = 0; r < groups; r++){
groupList.push(queue.splice(0,groupSize));
}
return groupList;
}
function textSpliter(splitText){
var textInput = document.getElementById("inputText").value;
var splitText = textInput.split(',');
var newList = [];
for(x = 0; x <= splitText.length; x++) {
var random = Math.floor(Math.random() * splitText.length);
var p = splitText[random];
newList.push(p);
splitText.splice(p,groupList);
}
for(var i = 0; i < newList.length; i++){
var s = newList[i];
document.getElementById('resInput').value += s + "\n" ;
}
return splitText;
}
</script>
Below is my input and output textareas
</head>
<body>
<form>
<textarea id="inputText" placeholder="text" rows="10" cols="40"></textarea>
<input type="number" name="number" max="6" value="1" id="groupNumber">
<textarea id="resInput" placeholder="text" rows="10" cols="40"></textarea>
<input type="button" name="Shuffle" value="shuffle" onclick="textSpliter()">
</form>
</body>
</html>
function shuffle() {
// Get list
// Example: element1, element 2, ele ment 3, ...
var list = document.getElementById("inputText").value.replace(/\s*,\s*/g, ",").split(",");
// Get number of groups
var n = parseInt(document.getElementById("groupNumber").value);
// Calculate number of elements per group
var m = Math.floor(list.length / n);
// Enought elements
if (n * m == list.length) {
// Create groups
var groups = new Array();
for (i = 0; i < n; i++) {
groups[i] = new Array();
for (j = 0; j < m; j++) {
// Random
rand = Math.floor(Math.random() * list.length);
// Add element to group
groups[i][j] = list[rand];
// Remove element to list
list.splice(rand, 1);
}
}
// Output
var text = "";
for (i = 0; i < n; i++) {
text += "Group " + (i + 1) + ": ";
for (j = 0; j < m; j++) {
if (j != 0) { text += ", "; }
text += groups[i][j];
}
text += "\n";
}
document.getElementById("resInput").value = text;
} else {
alert("Add more elements");
}
}
I rewrote your code. It's pretty self-explanatory.
FIDDLE
function textSpliter() {
var input = document.getElementById("inputText").value;
var names = input.split(",");
var groupSize = document.getElementById("groupNumber").value;
var groupCount = Math.ceil(names.length / groupSize);
var groups = [];
for (var i = 0; i < groupCount; i++) {
var group = [];
for (var j = 0; j < groupSize; j++) {
var random = Math.floor(Math.random() * names.length);
var name = names[random];
if (name != undefined) {
group.push(name);
names.splice(names.indexOf(name), 1);
}
}
group.sort();
groups.push(group);
}
printGroups(groups);
}
function printGroups(group) {
var output = document.getElementById("resInput");
output.value = "";
for (var i = 0; i < group.length; i++) {
var currentGroup = "";
for (var j = 0; j < group[i].length; j++) {
currentGroup = group[i].join(",");
}
output.value += currentGroup + "\r";
}
}
ES6 version ;-)
http://jsfiddle.net/dLgpny5z/1/
function textSpliter() {
var input = document.getElementById("inputText").value;
var names = input.replace(/\s*,\s*|\n/g, ",").split(",");
var groupSize = document.getElementById("groupNumber").value;
var groupCount = Math.ceil(names.length / groupSize);
var groups = [...Array(groupCount)].map(() => Array());
var i = 0
while (names.length > 0) {
var m = Math.floor(Math.random() * names.length);
groups[i].push(names[m]);
names.splice(m, 1);
i = (i >= groupCount - 1) ? 0 : i + 1
}
printGroups(groups);
}
function printGroups(groups) {
var output = document.getElementById("resInput");
output.value = groups.map(group => group.join(',')).join('\r');
}