I have 20 unique random numbers and check between 6 unique numbers.
the first check works, but after refreshing the 6 unique numbers, of the numbers return undefined.
I've given the full code so people can tinker with it.
no need for CSS, that is just to identify different numbers.
sorry for the long codes, it's just how i keep my code tidy.
var num = [];
var com = [];
var s = 0;
var j = 0;
function twenty() {
for (i = 0; i < 20; i++) {
com[i] = Math.floor(Math.random() * 49) + 1;
var x = com.length;
x = x - 1;
for (y = 0; y < x; y++) {
var t1 = com[y];
var t2 = com[i]
while (t1 == t2) {
com[x] = Math.floor(Math.random() * 49) + 1;
t1 = com[x];
}
}
}
for (i = 0; i < 5; i++) {
for (t = 0; t < 4; t++) {
document.getElementsByClassName(t)[i].innerHTML = com[s];
s++;
}
}
}
function calc() {
num = [];
var out = "";
var z = document.getElementById('max').value;
for (i = 0; i < z; i++) {
num[i] = Math.floor(Math.random() * 49) + 1;
var x = num.length;
x = x - 1;
for (y = 0; y < x; y++) {
var t1 = num[y];
var t2 = num[i]
while (t1 == t2) {
num[x] = Math.floor(Math.random() * 49) + 1;
t1 = num[x];
}
}
out += num[i] + ", ";
}
document.getElementById('num').innerHTML = out;
}
function check() {
s = 0;
if (j == 0) {
for (i = 0; i < 5; i++) {
for (t = 0; t < 4; t++) {
var set = 0;
var test1 = document.getElementsByClassName(t)[i].innerHTML;
var y = num.length;
for (x = 0; x < y; x++) {
var comp = num[x];
if (test1 == comp) {
set = 1;
}
if (set == 1) {
document.getElementsByClassName(t)[i].innerHTML = "<input type='button' value = '" + com[s] + "' id='" + s + "' class='yes' >";
} else if (test1 == undefined) {
document.getElementsByClassName(t)[i].innerHTML = "undefined";
} else {
document.getElementsByClassName(t)[i].innerHTML = "<input type='button' value = '" + com[s] + "' id='" + s + "' class='no' >";
}
}
s++;
}
}
j = 1;
} else {
for (i = 0; i < 5; i++) {
for (t = 0; t < 4; t++) {
var set = 0;
var test1 = document.getElementById(s).value;
var y = num.length;
for (x = 0; x < y; x++) {
var comp = num[x];
if (test1 == comp) {
set = 1;
}
if (set == 1) {
document.getElementsByClassName(t)[i].innerHTML = "<input type='button' value = '" + com[s] + "' id='" + s + "' class='yes' >";
} else if (test1 == undefined) {
document.getElementsByClassName(t)[i].innerHTML = "undefined";
} else {
document.getElementsByClassName(t)[i].innerHTML = "<input type='button' value = '" + com[s] + "' id='" + s + "' class='no' >";
}
}
s++;
}
}
}
}
html{
}
input[type=button].yes{
background: green;
border: none;
}
input[type=button].no{
background: red;
border: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src='code.js'></script>
</head>
<body onload='twenty()'>
<h1>lottery randomizer</h1>
<table border='1'>
<tr>
<td>randomize numbers
</td>
<td>choose number of random numbers
</td>
</tr>
<tr>
<td>
<input type='button' onclick='calc()' value='randomize'>
</td>
<td>
<input type='number' value='6' id='max'>
</td>
</tr>
</table>
<table>
<tr>
<td>
your numbers are:
<div id='num'>
</div>
</td>
</tr>
</table>
<table border='1' class='table'>
<tr>
<td>
<div class='0' id='1'>
</div>
</td>
<td>
<div class='0' id='2'>
</div>
</td>
<td>
<div class='0' id='3'>
</div>
</td>
<td>
<div class='0' id='4'>
</div>
</td>
<td>
<div class='0' id='5'>
</div>
</td>
</tr>
<tr>
<td>
<div class='1' id='1'>
</div>
</td>
<td>
<div class='1' id='2'>
</div>
</td>
<td>
<div class='1' id='3'>
</div>
</td>
<td>
<div class='1' id='4'>
</div>
</td>
<td>
<div class='1' id='5'>
</div>
</td>
</tr>
<tr>
<td>
<div class='2'>
</div>
</td>
<td>
<div class='2'>
</div>
</td>
<td>
<div class='2'>
</div>
</td>
<td>
<div class='2'>
</div>
</td>
<td>
<div class='2'>
</div>
</td>
</tr>
<tr>
<td>
<div class='3' id='1'>
</div>
</td>
<td>
<div class='3' id='2'>
</div>
</td>
<td>
<div class='3' id='3'>
</div>
</td>
<td>
<div class='3' id='4'>
</div>
</td>
<td>
<div class='3' id='5'>
</div>
</td>
</tr>
</table>
<input type='button' onclick='check()' value='check numbers'>
</body>
</html>
Related
console.log("var numbers = [");
for (let i = numberOfInputs; i < dlArray.length + numberOfInputs; i++) {
footer += dlArray[i - numberOfInputs].replace(/[^\d.]/g, "");
console.log(dlArray[i - numberOfInputs].replace(/[^\d.]/g, ""));
footer += ",";
console.log(",");
}
console.log("];");
footer += "];";
footer += "initialize(numbers);";
The output of the statement above is the following
var numbers = [
word_match.js:183 3
word_match.js:185 ,
word_match.js:183 1
word_match.js:185 ,
word_match.js:183 4
word_match.js:185 ,
word_match.js:183 2
word_match.js:185 ,
word_match.js:187 ];
word_match.js:203
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev, number) {
// ev.dataTransfer.setData("Text", ""+number);
ev.dataTransfer.setData("Text", ev.target.id);
ev.dataTransfer.setData("Number", number);
}
function drop(ev, number) {
ev.preventDefault();
// var id = ev.dataTransfer.getData("id");
// alert("id " + id);
// var num = ev.dataTransfer.getData("Text");
var data = ev.dataTransfer.getData("Text");
var num = ev.dataTransfer.getData("Number");
if (number == num) {
document
.getElementById("row" + number)
.style.setProperty("background", "green");
document.getElementById("row" + number).style.setProperty("color", "white");
ev.target.appendChild(document.getElementById(data));
document.getElementById(data).style.setProperty("background", "green");
document.getElementById(data).style.setProperty("font-style", "italic");
document
.getElementById(data)
.style.setProperty("border", "0px solid green");
document
.getElementById(data)
.style.setProperty("border-right", "1px solid green");
// ev.target.appendChild(document.getElementById("drag"+num));
}
}
var correctCards = 0;
var totalCount;
var copyNumbers;
function initialize(numbers) {
copyNumbers = numbers;
correctCards = 0;
totalCount = numbers.length;
for (var i = 0; i < numbers.length; i++) {
$("#s" + (i + 1))
.data("number", numbers[i])
.draggable({
containment: "#boxstyle",
cursor: "move",
revert: true
});
}
// Create the slots
for (var i = 0; i < numbers.length; i++) {
$("#t" + (i + 1))
.data("number", i + 1)
.droppable({
hoverClass: "hovered",
drop: handDrop
});
}
}
function handDrop(event, ui) {
var sourceNumber = $(this).data("number");
var targetNumber = ui.draggable.data("number");
if (sourceNumber == targetNumber) {
ui.draggable.position({ of: $(this), my: "center", at: "center" });
ui.draggable.draggable("disable");
$(this).droppable("disable");
ui.draggable.draggable("option", "revert", false);
// $('#d' + targetNumber).css("background", "goldenrod");
// $('#d' + targetNumber).css("color", "white");
// $('#t' + targetNumber).css("background", "goldenrod");
$("#d" + targetNumber).css("border-top", "1px solid");
$("#d" + targetNumber).css("border-bottom", "1px solid");
$("#d" + targetNumber).css("border-color", "white");
$("#d" + targetNumber).css("background", "#3F5E17");
$("#d" + targetNumber).css("color", "white");
$("#t" + targetNumber).css("background", "#3F5E17");
document.getElementById("resetButton").style.display = "inline";
document.getElementById("resetButton").style.visibility = "visible";
// $('#t' + targetNumber).css("background", "goldenrod");
$("#t" + targetNumber).css("color", "white");
for (var i = 0; i < copyNumbers.length; i++) {
if (copyNumbers[i] == sourceNumber) break;
}
speak($("#s" + (i + 1)).text() + ". " + $("#d" + targetNumber).text());
// jAlert('Done', "Test");
correctCards++;
}
if (correctCards == totalCount) {
jAlert("You did it!", "Congratulations");
document.getElementById("resetButton").style.visibility = "visible";
}
}
Actual
<div id="boxstyle">
<h3 id="title">title</h3>
<center>
<div class="source">
<div id="s1" class="draggyBox-small ui-draggable" style="position: relative;">
k3
</div>
<div id="s2" class="draggyBox-small ui-draggable" style="position: relative;">
k1
</div>
<div id="s3" class="draggyBox-small ui-draggable" style="position: relative;">
k4
</div>
<div id="s4" class="draggyBox-small ui-draggable" style="position: relative;">
k2
</div>
</div>
</center>
<table id="tablestyle">
<tbody>
<tr>
<td id="row1">
<div id="t1" class="ltarget ui-droppable"></div>
</td>
<td id="d1">
d3
</td>
</tr>
<tr>
<td id="row2">
<div id="t2" class="ltarget ui-droppable"></div>
</td>
<td id="d2">
d1
</td>
</tr>
<tr>
<td id="row3">
<div id="t3" class="ltarget ui-droppable"></div>
</td>
<td id="d3">
d4
</td>
</tr>
<tr>
<td id="row4">
<div id="t4" class="ltarget ui-droppable"></div>
</td>
<td id="d4">
d2
</td>
</tr>
</tbody>
</table>
</div>
Expected
<div id="boxstyle">
<h3 id="title">title</h3>
<center>
<div class="source">
<div id="s1" class="draggyBox-small ui-draggable" style="position: relative;">
k3
</div>
<div id="s2" class="draggyBox-small ui-draggable" style="position: relative;">
k1
</div>
<div id="s3" class="draggyBox-small ui-draggable" style="position: relative;">
k4
</div>
<div id="s4" class="draggyBox-small ui-draggable" style="position: relative;">
k2
</div>
</div>
</center>
<table id="tablestyle">
<tbody>
<tr>
<td id="row1">
<div id="t1" class="ltarget ui-droppable"></div>
</td>
<td id="d3">
d3
</td>
</tr>
<tr>
<td id="row2">
<div id="t1" class="ltarget ui-droppable"></div>
</td>
<td id="d1">
d1
</td>
</tr>
<tr>
<td id="row3">
<div id="t4" class="ltarget ui-droppable"></div>
</td>
<td id="d4">
d4
</td>
</tr>
<tr>
<td id="row4">
<div id="t2" class="ltarget ui-droppable"></div>
</td>
<td id="d2">
d2
</td>
</tr>
</tbody>
</table>
</div>
Visually this does not come out as expected. I would expect the descriptions and keys to match up side by side. However they are misplaced. Please see the screen shot below
How can I fix the init method? For example, when I drag key element with the id s2 over the row element with the id t2 the element should be dropped into place. The sourceNumber and targetNumber do not match up properly.
The issue was in the way that the handDrop method was being called
function initialize(numbers) {
copyNumbers = numbers;
correctCards = 0;
totalCount = numbers.length;
for (var i = 0; i < numbers.length; i++) {
console.log("'#s' + (i + 1) is matched with "+numbers[i])
$('#s' + (i + 1)).data('number', numbers[i]).draggable( {
containment: '#boxstyle',
cursor: 'move',
revert: true
} );
}
// Create the slots
for ( var i = 0; i < numbers.length; i++ ) {
console.log("'#t' + (i + 1) is matched with "+numbers[i])
$('#t' + (i + 1)).data('number', numbers[i]).droppable( {
hoverClass: 'hovered',
drop: handDrop
} );
}
}
The targets t_i were not matching with the s_i elements. By changing
$("#t" + (i + 1))
.data("number", i + 1)
to
$("#t" + (i + 1))
.data("number", numbers[i])
I was able to fix the problem.
Problem
I have a table with 2 rows and 3 columns, the third column is where results are displayed.
My goal is to make the code to display 25% in the first row if (the difference between x and y is greater than 3 but less than 11).
And display 25% in the second row if (w + z > 3) is true and display 20% if (w + y = 3) is true.
How do I solve this issue?
Attempt
<!DOCTYPE html>
<html>
</head>
<BODY>
<script>
document.addEventListener("change", function() {
var x = document.getElementById("hp").value,
y = document.getElementById("ap").value,
w = document.getElementById("hc").value,
z = document.getElementById("ac").value,
text;
if (x - y > 3 && y - x < 11) {
text = "<span class='green'>25%</span>";
} else if (y - x > 3 && x - y < 11) {
text = "<span class='green'>25%</span>";
} else {
text = "<span class='red'>10%</span>";
}
document.getElementById("pr").innerHTML = text;
if (w + z > 3) {
text = "<span class='green'>25%</span>";
} else if (w + z = 3) {
text = "<span class='green'>20%</span>";
} else {
text = "<span class='red'>10%</span>";
}
document.getElementById("cr").innerHTML = text;
})
</script>
<style>
.green {
color: green;
}
.red {
color: red;
}
.yellow {
color: yellow
</style>
<TABLE align="center" BORDER="1" WIDTH="" CELLPADDING="4" CELLSPACING="3">
<TR>
<TD id="">
<p>HOMEPOSITION:</p>
<input type="number" id="hp">
</TD>
<TD id="">
<p>AWAYPOSITION:</p>
<input type="number" id="ap">
</TD>
<TD id="pr"></TD>
</TR>
<TR>
<TD id="">
<p>HOMECAST:</p>
<input type="number" id="hc">
</TD>
<TD type="number" id="">
<p>AWAYCAST:</p>
<input type="number" id="ac">
</TD>
<TD id="cr"></TD>
</TR>
</TABLE>
</html>
It seems to be a problem with an operator (= vs ==):
Code
<!DOCTYPE html>
<html>
<head>
<style>
.green {
color: green;
}
.red {
color: red;
}
.yellow {
color: yellow
</style>
</head>
<BODY>
<TABLE align="center" BORDER="1" WIDTH="" CELLPADDING="4" CELLSPACING="3">
<TR>
<TD id="">
<p>HOMEPOSITION:</p>
<input type="number" id="hp">
</TD>
<TD id="">
<p>AWAYPOSITION:</p>
<input type="number" id="ap">
</TD>
<TD id="pr"></TD>
</TR>
<TR>
<TD id="">
<p>HOMECAST:</p>
<input type="number" id="hc">
</TD>
<TD type="number" id="">
<p>AWAYCAST:</p>
<input type="number" id="ac">
</TD>
<TD id="cr"></TD>
</TR>
</TABLE>
<script>
document.addEventListener("change", function() {
var x = document.getElementById("hp").value,
y = document.getElementById("ap").value,
w = document.getElementById("hc").value,
z = document.getElementById("ac").value,
text;
if (x - y > 3 && y - x < 11) {
text = "<span class='green'>25%</span>";
} else if (y - x > 3 && x - y < 11) {
text = "<span class='green'>25%</span>";
} else {
text = "<span class='red'>10%</span>";
}
document.getElementById("pr").innerHTML = text;
if (w + z > 3) {
text = "<span class='green'>25%</span>";
} else if (w + z == 3) {
text = "<span class='green'>20%</span>";
} else {
text = "<span class='red'>10%</span>";
}
document.getElementById("cr").innerHTML = text;
})
</script>
</BODY>
</html>
When I'm calculating my age, the code below showing "xxx days left for your next birthday". But I want to know, how many days left for my certain birthday. (i.e: I want to know how many days left for my 30th birthday. The result should be like this "xxx days left for your 30th birthday" instead of next birthday.)
What change I need to do?
function wr_document() {
var w = new Date();
var s_d = w.getDate();
var s_m = w.getMonth() + 1;
var s_y = w.getFullYear();
document.cir.len11.value = s_d;
document.cir.len12.value = s_m;
document.cir.len13.value = s_y;
}
function isNum(arg) {
var args = arg;
if (args == "" || args == null || args.length == 0) {
return false;
}
args = args.toString();
for (var i = 0; i < args.length; i++) {
if ((args.substring(i, i + 1) < "0" || args.substring(i, i + 1) > "9") && args.substring(i, i + 1) != ".") {
return false;
}
}
return true;
}
function checkday(aa) {
var val = aa.value;
var valc = val.substring(0, 1);
if (val.length > 0 && val.length < 3) {
if (!isNum(val) || val == 0) {
aa.value = "";
} else if (val < 1 || val > 31) {
aa.value = valc;
}
} else if (val.length > 2) {
val = val.substring(0, 2);
aa.value = val;
}
}
function checkmon(aa) {
var val = aa.value;
var valc = val.substring(0, 1);
if (val.length > 0 && val.length < 3) {
if (!isNum(val) || val == 0) {
aa.value = "";
} else if (val < 1 || val > 12) {
aa.value = valc;
}
} else if (val.length > 2) {
val = val.substring(0, 2);
aa.value = val;
}
}
function checkyear(aa) {
var val = aa.value;
var valc = val.substring(0, (val.length - 1));
if (val.length > 0 && val.length < 7) {
if (!isNum(val) || val == 0) {
aa.value = valc;
} else if (val < 1 || val > 275759) {
aa.value = "";
}
} else if (val.length > 4) {
aa.value = valc;
}
}
function checkleapyear(datea) {
if (datea.getYear() % 4 == 0) {
if (datea.getYear() % 10 != 0) {
return true;
} else {
if (datea.getYear() % 400 == 0)
return true;
else
return false;
}
}
return false;
}
function DaysInMonth(Y, M) {
with(new Date(Y, M, 1, 12)) {
setDate(0);
return getDate();
}
}
function datediff(date1, date2) {
var y1 = date1.getFullYear(),
m1 = date1.getMonth(),
d1 = date1.getDate(),
y2 = date2.getFullYear(),
m2 = date2.getMonth(),
d2 = date2.getDate();
if (d1 < d2) {
m1--;
d1 += DaysInMonth(y2, m2);
}
if (m1 < m2) {
y1--;
m1 += 12;
}
return [y1 - y2, m1 - m2, d1 - d2];
}
function calage() {
var curday = document.cir.len11.value;
var curmon = document.cir.len12.value;
var curyear = document.cir.len13.value;
var calday = document.cir.len21.value;
var calmon = document.cir.len22.value;
var calyear = document.cir.len23.value;
if (curday == "" || curmon == "" || curyear == "" || calday == "" || calmon == "" || calyear == "") {
alert("Please fill all the values and click 'Go'");
} else if (curday == calday && curmon == calmon && curyear == calyear) {
alert("Today your birthday & Your age is 0 years old")
} else {
var curd = new Date(curyear, curmon - 1, curday);
var cald = new Date(calyear, calmon - 1, calday);
var diff = Date.UTC(curyear, curmon, curday, 0, 0, 0) -
Date.UTC(calyear, calmon, calday, 0, 0, 0);
var dife = datediff(curd, cald);
document.cir.val.value = dife[0] + " years, " + dife[1] + " months, and " + dife[2] + " days";
var secleft = diff / 1000 / 60;
document.cir.val3.value = secleft + " minutes since your birth";
var hrsleft = secleft / 60;
document.cir.val2.value = hrsleft + " hours since your birth";
var daysleft = hrsleft / 24;
document.cir.val1.value = daysleft + " days since your birth";
//alert(""+parseInt(calyear)+"--"+dife[0]+"--"+1);
var as = parseInt(calyear) + dife[0] + 1;
var diff = Date.UTC(as, calmon, calday, 0, 0, 0) -
Date.UTC(curyear, curmon, curday, 0, 0, 0);
var datee = diff / 1000 / 60 / 60 / 24;
document.cir.val4.value = datee + " days left for your next birthday";
}
}
function color(test) {
for (var j = 7; j < 12; j++) {
var myI = document.getElementsByTagName("input").item(j);
//myI.setAttribute("style",ch);
myI.style.backgroundColor = test;
}
}
function color1(test) {
var myI = document.getElementsByTagName("table").item(0);
//myI.setAttribute("style",ch);
myI.style.backgroundColor = test;
}
.cal-container {
width: 540px;
margin: 10px auto 0;
}
#age-calculator {
background: none repeat scroll 0 0 #DDDDDD;
border: 1px solid #BEBEBE;
padding-left: 20px;
}
.calc {
border-color: #AAAAAA #999999 #929292 #AAAAAA;
border-style: solid;
border-width: 1px 2px 2px 1px;
padding: 2px 30px 3px;
height: 27px;
}
.calc:active {
border-color: #AAAAAA #999999 #929292 #AAAAAA;
border-style: solid;
border-width: 1px;
}
<title>Age calculator </title>
<body onload="wr_document()">
<div class="cal-container">
<div id="calculator-container">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%px;">
<tbody>
<tr>
<td valign="top">
<h1 style="padding-top: 10px;">
Age Calculator</h1>
<div class="descalign">
<span>Calculate your age in days, years, minutes, seconds. Know how many days are left for your next birthday.</span><br /><br />
</div>
<div id="age-calculator">
<table bgcolor="" border="0" cellpadding="0" cellspacing="4" style="width: 100%px;">
<tbody>
<tr>
<td colspan="2">
<table class="result" style="height: 100%px; width: 100%px;">
<tbody>
<tr>
<td>
<form name="cir">
<table cellpadding="3" cellspacing="0">
<tbody>
<tr>
<td colspan="2">
<br /> Today's Date is:
</td>
</tr>
<tr>
<td align="center" colspan="2">
Date -
<input class="innerc resform" name="len11" onkeyup="checkday(this)" size="2" type="text" value="" /> Month -
<input class="innerc resform" name="len12" onkeyup="checkmon(this)" size="2" type="text" value="" /> Year -
<input class="innerc resform" name="len13" onkeyup="checkyear(this)" size="4" type="text" value="" />
<br />
<br />
</td>
</tr>
<tr>
<td colspan="2"> Enter Your Date of Birth : </td>
</tr>
<tr>
<td align="center" colspan="2">
Date -
<input class="innerc resform" name="len21" onkeyup="checkday(this)" size="2" type="text" /> Month -
<input class="innerc resform" name="len22" onkeyup="checkmon(this)" size="2" type="text" /> Year -
<input class="innerc resform" name="len23" onkeyup="checkyear(this)" size="4" type="text" />
<br />
<br />
<input class="calc" name="but" onclick="calage()" type="button" value=" Go " />
<br />
<br />
</td>
</tr>
<tr>
<td align="center" class="form" width="30%">
<b> </b>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<b> Your Age is </b>
</td>
<td>
<input class="resform" name="val" readonly="" size="36" type="text" />
</td>
</tr>
<tr>
<td>
<b> Your Age in Days </b>
</td>
<td>
<input class="resform" name="val1" readonly="" size="36" type="text" />
</td>
</tr>
<tr>
<td>
<b> Your Age in Hours </b>
</td>
<td>
<input class="resform" name="val2" readonly="" size="36" type="text" /> (Approximate)
</td>
</tr>
<tr>
<td class="form">
<b> Your Age in Minutes </b>
</td>
<td>
<input class="resform" name="val3" readonly="" size="36" type="text" /> (Approximate)
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td></td>
<td>
<input class="innerc resform" name="val4" readonly="" size="36" type="text" />
</td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>
</tbody>
</table>
<br />
</td>
<td> </td>
</tr>
<tr>
<td align="right" colspan="2"> </td>
<td> </td>
</tr>
</tbody>
</table>
<br />
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
Not clear about purpose of your whole code, but based on your question following script may help you.
// Let below variables store your birth date
var day = 13;
var month = 03;
var year = 1993;
var x = 30; // Finding 30th birthday
var xthBirthday = new Date((year + x), (month - 1), day); // As month starts with 0
var timeForXthBirthday = xthBirthday.getTime() - Date.now();
var noOfDaysForXthBirthday = Math.ceil(timeForXthBirthday / (1000 * 60 * 60 * 24)); // No. of days left for your xth birthday
document.write(noOfDaysForXthBirthday+" days left for your "+x+"<sup>th</sup> birthday.");
Hope this helps.
For example, there is such a table, with cells FootballPlayers, Swimmers, BasketballPlayers and Sum, in which rows are added in turn, how i can count and record in the Total row how many football players, swimmers and basketball players are added?
function deleteRow() {
tg.deleteRow(1);
if (document.all("tg").rows.length == 2) {
document.getElementById("b").disabled=true;
}
}
function addRow() {
var f1 = document.getElementById("f1").value;
var f1k = parseInt(f1);
if (isNaN(f1k)) {
f1k=0;
}
var f2 = document.getElementById("f2").value;
var f2k = parseInt(f2);
if (isNaN(f2k)) {
f2k=0;
}
var f3 = document.getElementById("f3").value;
var f3k = parseInt(f3);
if (isNaN(f3k)) {
f3k=0;
}
var sum1 = (f1k+f2k+f3k);
var row = document.createElement("TR")
var tbody = document.getElementById("tg").insertRow(1);
var r1=tbody.insertCell(0);
r1.innerHTML="";
var r2=tbody.insertCell(1);
r2.innerHTML=f1;
var r3=tbody.insertCell(2);
r3.innerHTML=f2;
var r4=tbody.insertCell(3);
r4.innerHTML=f3;
var r4=tbody.insertCell(4);
r4.innerHTML=sum1;
if(document.all("tg").rows.length >= 3) {
document.getElementById("b").disabled=false;
}
}
#tg {border-collapse:collapse;border-spacing:0;}
#tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
#tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
#tg .tg-yw4l{vertical-align:top}
<div class="row">
<label for="n">FootballPlayers: </label>
<input type="text" id="f1" />
</div>
<div class="row">
<label for="n">Swimmers: </label>
<input type="text" id="f2" />
</div>
<div class="row">
<label for="n">BasketballPlayers: </label>
<input type="text" id="f3" />
<button id="a" onClick="addRow();return false;" >Add</button>
<button id="b" onClick="deleteRow();return false;">Delete</button>
</div>
<table id="tg">
<tr>
<th class="tg-031e"></th>
<th class="tg-031e">FootballPlayers</th>
<th class="tg-031e">Swimmers</th>
<th class="tg-yw4l">BasketballPlayers</th>
<th class="tg-yw4l">Sum</th>
</tr>
<tr>
<td class="tg-031e">Total</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
</table>
Here is an example, only total FootballPlayers
Step 1)
Add a class for FootballPlayers column when you add a row
Step 2)
Call total() javascript function while add a row and delete a row
<div class="row">
<label for="n">FootballPlayers: </label>
<input type="text" id="f1" />
</div>
<div class="row">
<label for="n">Swimmers: </label>
<input type="text" id="f2" />
</div>
<div class="row">
<label for="n">BasketballPlayers: </label>
<input type="text" id="f3" />
<button id="a" onClick="addRow();return false;" >Add</button>
<button id="b" onClick="deleteRow();return false;">Delete</button>
</div>
<table id="tg">
<tr>
<th class="tg-031e"></th>
<th class="tg-031e">FootballPlayers</th>
<th class="tg-031e">Swimmers</th>
<th class="tg-yw4l">BasketballPlayers</th>
<th class="tg-yw4l sum">Sum</th>
</tr>
<tr>
<td class="tg-031e">Total</td>
<td class="tg-031e total_fb_players"></td>
<td class="tg-031e total_summers"></td>
<td class="tg-yw4l total_bb_players"></td>
<td class="tg-yw4l total_sum"></td>
</tr>
</table>
<style>
#tg {border-collapse:collapse;border-spacing:0;}
#tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
#tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
#tg .tg-yw4l{vertical-align:top}
</style>
<script>
function deleteRow() {
tg.deleteRow(1);
if (document.all("tg").rows.length == 2) {
document.getElementById("b").disabled=true;
}
total();
}
function addRow() {
var f1 = document.getElementById("f1").value;
var f1k = parseInt(f1);
if (isNaN(f1k)) {
f1k=0;
}
var f2 = document.getElementById("f2").value;
var f2k = parseInt(f2);
if (isNaN(f2k)) {
f2k=0;
}
var f3 = document.getElementById("f3").value;
var f3k = parseInt(f3);
if (isNaN(f3k)) {
f3k=0;
}
var sum1 = (f1k+f2k+f3k);
var row = document.createElement("TR")
var tbody = document.getElementById("tg").insertRow(1);
var r1=tbody.insertCell(0);
r1.innerHTML="";
var r2=tbody.insertCell(1);
r2.classList.add('fb_players')
r2.innerHTML=f1;
var r3=tbody.insertCell(2);
r3.classList.add('summers')
r3.innerHTML=f2;
var r4=tbody.insertCell(3);
r4.classList.add('bb_players')
r4.innerHTML=f3;
var r5=tbody.insertCell(4);
r5.classList.add('sum')
r5.innerHTML=sum1;
if(document.all("tg").rows.length >= 3) {
document.getElementById("b").disabled=false;
}
total();
}
function total() {
var fb_players = document.getElementsByClassName("fb_players");
var total_fb_players = 0;
for(var i = 0; i < fb_players.length; i++) {
var v = parseInt(fb_players[i].innerHTML);
if (isNaN(v)) {
v=0;
}
console.log(v);
total_fb_players += v;
}
console.log(total_fb_players);
var total_fb_players_html = document.querySelector(".total_fb_players");
total_fb_players_html.innerHTML=total_fb_players;
}
</script>
Add classes to your cells and ids to for each total column in your table and execute as follows
Snippet below
function deleteRow() {
tg.deleteRow(1);
if (document.all("tg").rows.length == 2) {
document.getElementById("b").disabled = true;
}
}
function addRow() {
var f1 = document.getElementById("f1").value;
var f1k = parseInt(f1);
if (isNaN(f1k)) {
f1k = 0;
}
var f2 = document.getElementById("f2").value;
var f2k = parseInt(f2);
if (isNaN(f2k)) {
f2k = 0;
}
var f3 = document.getElementById("f3").value;
var f3k = parseInt(f3);
if (isNaN(f3k)) {
f3k = 0;
}
var sum1 = (f1k + f2k + f3k);
var row = document.createElement("TR")
var tbody = document.getElementById("tg").insertRow(1);
var r1 = tbody.insertCell(0);
r1.innerHTML = "";
var r2 = tbody.insertCell(1);
r2.innerHTML = f1;
r2.className = "football";
var r3 = tbody.insertCell(2);
r3.innerHTML = f2;
r3.className = "swimmer";
var r4 = tbody.insertCell(3);
r4.innerHTML = f3;
r4.className = "basketball";
var r4 = tbody.insertCell(4);
r4.innerHTML = sum1;
if (document.all("tg").rows.length >= 3) {
document.getElementById("b").disabled = false;
}
var football_el = document.getElementsByClassName("football");
var swim_count_el = document.getElementsByClassName("swimmer");
var basketball_el = document.getElementsByClassName("basketball");
var list = [football_el, swim_count_el, basketball_el];
grand_sum = 0;
for (var y = 0; y < list.length; ++y) {
var sum = 0;
for (var x = 0; x < list[y].length; ++x) {
sum += Number(list[y][x].innerHTML);
}
if (y == 0) {
document.getElementById("total_footballers").innerHTML = sum;
grand_sum += sum;
} else if (y == 1) {
document.getElementById("total_swimmers").innerHTML = sum;
grand_sum += sum;
} else if (y == 2) {
document.getElementById("total_basketballers").innerHTML = sum;
grand_sum += sum;
}
} //end for
document.getElementById("grandtotal").innerHTML = grand_sum;
}
#tg {
border-collapse: collapse;
border-spacing: 0;
}
#tg td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
}
#tg th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
}
#tg .tg-yw4l {
vertical-align: top
}
<div class="row">
<label for="n">FootballPlayers: </label>
<input type="text" id="f1" />
</div>
<div class="row">
<label for="n">Swimmers: </label>
<input type="text" id="f2" />
</div>
<div class="row">
<label for="n">BasketballPlayers: </label>
<input type="text" id="f3" />
<button id="a" onClick="addRow();return false;">Add</button>
<button id="b" onClick="deleteRow();return false;">Delete</button>
</div>
<table id="tg">
<tr>
<th class="tg-031e"></th>
<th class="tg-031e">FootballPlayers</th>
<th class="tg-031e">Swimmers</th>
<th class="tg-yw4l">BasketballPlayers</th>
<th class="tg-yw4l">Sum</th>
</tr>
<tr>
<td class="tg-031e">Total</td>
<td class="tg-031e" id="total_footballers"></td>
<td class="tg-031e" id="total_swimmers"></td>
<td class="tg-yw4l" id="total_basketballers"></td>
<td class="tg-yw4l" id="grandtotal"></td>
</tr>
</table>
i currently have a code that can append the result into the html page.
This is the append code.
function casefeed(response) {
var arr = JSON.parse(response);
var i;
for(i = 0; i < arr.length; i++) {
$("#viewcase").append("<td><img src='" + serverURL()
+ "/images/"+ arr[i].Case_Pic + "' height='100'>"
+ "<td>" + arr[i].CaseTime + "</a></b></td>");
}
}
This is my table format.
<table class="tile-table">
<tbody id = "viewcase">
<tr>
<td>
<div class="tile" style="background-position: -0px -0px;"></div>
</td>
<td>
<div class="tile" style="background-position: px -0px;"></div>
</td>
<td>
<div class="tile" style="background-position: -200px -0px;"></div>
</td>
<td>
<div class="tile" style="background-position: -300px -0px;"></div>
</td>
</tr>
</tbody>
</table>
My current result is like this.
Is it possible to display the image into this format?
You can achieve this by adding nth-child(n). for sample i m considering the array as numbers from 1 to 9 . you can pass your url in the place of imageurl
$(function() {
function casefeed() {
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var i;
var imageurl = "http://feelgrafix.com/data/images/images-1.jpg";
for (i = 0; i < arr.length; i++) {
if (i % 3 == 0) {
$("#viewcase").append("<tr></tr>");
}
$("#viewcase:nth-child(n)").append("<td><img src='" + imageurl + "' >Time</td>");
}
}
casefeed();
});
img {
width: 200px;
height: 150px;
}
td {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tile-table">
<tbody id="viewcase">
</tbody>
</table>
You are appending td to tbody, you should append it to tr. Also, there are two closing tags without opening tags - </a></b>
This is what I suggest:
HTML
<table class="tile-table">
<tbody id = "viewcase">
</tbody>
</table>
Javascript
function casefeed(response) {
var arr = JSON.parse(response);
var i;
for(i = 0; i < arr.length; i++) {
if (i % 3 === 0)
$("#viewcase").append("tr"); // add new table row each 3 elements
$("#viewcase tr").last().append("<td><img src='" + serverURL()
+ "/images/"+ arr[i].Case_Pic + "' height='100'>"
+ "<td><p>" + arr[i].CaseTime + "</p></td>");
}
}