Hello I am need some help with javascript
I am newbie self-taught
How can i code - I have a table and 2 buttons, when i press button I want to pick random table data (from 1 to 9) and change it background color
and when i press second button - change table data from 1 to 9 in order.
// my javascript knowledge is very low but i understand that i need to
give id for my each table data,
a button with onclick="random()",
function random () - but i dont know how to pick random ID i gave for my td
<script type="text/javascript">
//function random() {
// var myArray = new Array("1", "2", "3", "4", "5", "6", "7", "8", "9");
// var x = Math.floor((Math.random() * 9) + 1);}
document.getElementById("random").onclick = function () {
document.getElementById("1").style.backgroundColor = "red";
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Javascript homework</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
table {
border: 1px solid black;
}
th, td {
height: 150px;
width: 150px;
text-align: center;
color: black;
background-color: white;
font-size: 35px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<table>
<tr>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
</tr>
<tr>
<td id="4">4</td>
<td id="5">5</td>
<td id="6">6</td>
</tr>
<tr>
<td id="7">7</td>
<td id="8">8</td>
<td id="9">9</td>
</tr>
</table>
<button id="random" type="button" onclick="random()">Random</button>
<button id="next" type="button" onclick="next()">Next</button>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>
Edited:
See comments inside js:
function random(){
//make a collection with all td elements
var items = document.getElementsByTagName("td");
for( i=0; i < items.length; i++ ){
//that delete old backgroundColor style
items[i].style.backgroundColor = '';
};
//choose a random id between 1 and 9
var random_id = Math.floor((Math.random()*9)+1);
//aply the red style color to this random element
document.getElementById(random_id).style.backgroundColor = "#ff0000";
};
<!DOCTYPE html>
<html>
<head>
<title>Javascript homework</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
table {
border: 1px solid black;
}
th, td {
height: 50px;
width: 50px;
text-align: center;
color: black;
background-color: white;
font-size: 15px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<table>
<tr>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
</tr>
<tr>
<td id="4">4</td>
<td id="5">5</td>
<td id="6">6</td>
</tr>
<tr>
<td id="7">7</td>
<td id="8">8</td>
<td id="9">9</td>
</tr>
</table>
<button id="random" type="button" onclick="random()">Random</button>
<button id="next" type="button" onclick="next()">Next</button>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>
Just return a random number between 1 and 9 (See random function). Use document.getElementById to select that element, and set it to red.
See below:
function random() {
return Math.floor((Math.random() * 9) + 1);
}
document.getElementById("random").onclick = function () {
document.getElementById(random()).style.backgroundColor = "red";
}
<!DOCTYPE html>
<html>
<head>
<title>Javascript homework</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
table {
border: 1px solid black;
}
th, td {
height: 50px;
width: 50px;
text-align: center;
color: black;
background-color: white;
font-size: 15px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<table>
<tr>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
</tr>
<tr>
<td id="4">4</td>
<td id="5">5</td>
<td id="6">6</td>
</tr>
<tr>
<td id="7">7</td>
<td id="8">8</td>
<td id="9">9</td>
</tr>
</table>
<button id="random" type="button" onclick="random()">Random</button>
<button id="next" type="button" onclick="next()">Next</button>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>
Related
I'm having a problem wherein I want to use PrintJS library in PHP. I created a PHP file which is invoice.php that is what I want to print out as a PDF using the library. I also created a JavaScript function in which I call the printJS function. How can I able to view the PHP file as a PDF using JavaScript
This is my invoice.php in which I want to print out using the JavaScript function in which I added the printJS function:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>
<title>VShip Invoice</title>
<style>
body {
margin-left: auto;
margin-right: auto;
width: 210mm;
height: 297mm;
}
.invoice {
border-collapse: collapse;
width: 100%;
}
p {
font-family: 'Open Sans';
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Raleway';
}
.invoice td,
th {
padding: 8px;
border-left: 2px solid #d3d3d3;
border-right: 2px solid #d3d3d3;
}
.invoice td {
font-family: 'Open Sans';
}
.invoice th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #d3d3d3;
color: white;
text-transform: uppercase;
font-family: 'Open Sans';
}
input {
background: transparent;
border: none;
border-bottom: 1px solid #5c5c5c;
}
/* .container {
align-items: center;
display: flex;
justify-content: center;
} */
<body>
<div class="container">
<div class="content">
<!-- Logo -->
<div style="text-align:center;">
<div>
<img src="<?= base_url('assets/images/vivmo-logo.png') ?
>" alt="logo" style="width:180px;" class="logo-default" />
</div>
<div style="line-height:0.4;">
<p>5730 Roseville Rd, Sacramento, CA 95842</p>
<p>+1 844 90 VIVMO(844-908-4866)</p>
<p>support#vivmo.co</p>
</div>
</div>
<!-- End Logo -->
<!-- Bill Information Heading -->
<div style="padding-top:15px;">
<!-- Bill To -->
<div style="float:left;padding-left:30px;">
<div>
<h3 style="font-weight:800;margin-top:18px;margin-
bottom:0px;">Bill To:</h3>
</div>
<div style="margin-top:-10px;">
<h4 style="margin-bottom:0px;">Client's Name</h4>
<div style="line-height:0.4;margin-top:-8px;">
<p>5730 Roseville Rd</p>
<p>Sacramento, CA 95842</p>
</div>
</div>
</div>
<!-- End Bill To -->
<!-- Bill Invoice Number -->
<div style="float:right;">
<div style="background-color:#d3d3d3;padding:1px 61px 1px 10px;">
<h3 style="font-family:'Open Sans';color:#fff;margin-top:8px;margin-bottom:8px;font-size:1.5em;padding-left:30px;padding-right:30px;">INVOICE #0001</h3>
</div>
<div style="padding-left:25%;">
<p style="margin-top:5px;margin-bottom:5px;font-size:13.5px;font-weight:500;">Date: 10-12-2022</p>
</div>
</div>
<!-- End Bill Invoice Number -->
</div>
<!-- End Bill Information Heading -->
<br>
<!-- Bill Information Table -->
<div style="margin-top:18%;padding-left:30px;padding-right:30px;">
<table class="invoice">
<tr>
<th>Description</th>
<th>QTY</th>
<th>Unit Price</th>
<th>Total</th>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr style="border-bottom:2px solid #d3d3d3;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<!-- End Bill Information Table -->
<!-- Bill Information Total -->
<div style="margin-top:20px;">
<div style="float:left;background-color:#d3d3d3;width:50%;">
<div style="text-align:center;padding-top:13%;padding-bottom:13%;">
<h3 style="color:#fff;font-family:'Open Sans';font-size:1.6em;padding-left:16%;padding-right:16%;">THANK YOU FOR YOUR BUSINESS!</h3>
</div>
</div>
<div style="float:right;padding-right:30px;">
<table>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;padding-top:8px;">Subtotal</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;padding-top:8px;padding-bottom:8px;">Discount</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;">Subtotal Less Discount</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;padding-top:8px;padding-bottom:8px;">Tax Rate(%)</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;">Total Tax</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;padding-top:8px;padding-bottom:8px;">Shipping/Handling</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
</table>
<table>
<hr style="border:1px solid #d3d3d3;">
</table>
<div style="float:left;margin-left:30%;">
<h3 style="margin-top:0px;font-family:'Open Sans';">Total</h3>
</div>
<div style="float:right;">
<h3 style="margin-top:0px;font-family:'Open Sans';font-weight:800;">$999,000</h3>
</div>
</div>
</div>
<!-- End Bill Information Total -->
<!-- Billing Terms and Instruction -->
<div style="margin-top:33%;padding-left:30px;padding-right:30px;">
<div>
<div>
<h3 style="font-size:15px;">Terms & Instruction</h3>
</div>
</div>
<div style="border:1px solid #d3d3d3;">
<div style="padding:18px;">
<p style="font-size:13px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum fugit quaerat quos cupiditate soluta? Quasi voluptatibus debitis consequuntur asperiores saepe.
</p>
</div>
</div>
</div>
<!-- End Billing Terms and Instruction -->
<!-- Billing Footer -->
<div style="background-color:#d3d3d3;margin-top:30px;">
<div>
<div style="padding:1px 30px;">
<h5 style="color:#fff;font-family:'Raleway';font-weight:500;">vivmo.co</h5>
</div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- End Billing Footer -->
</div>
</div>
And this is the function in which I add the PrintJS function to print the PHP file
function print_invoice()
{
printJS({
printable: base_url + "shipment/invoice",
type: 'pdf',
targetStyles: ['*']
})
}
You can use like this way
function print_invoice() {
printJS({
printable: "<?php echo base_url; ?>" + "shipment/invoice.php",
type: 'pdf',
targetStyles: ['*']
})
}
function getFileAndPrint() {
// Generate pdf and get its filename
// Assuming your are writing this in a .php file
let printFile = '<?php echo $variable; ?>'
// Freedom to do anything else you may want to
// ...
// Pass pdf to printJS
printJS(printFile)
}
i am developing area calculator with width height and uint when i enter width and height it has to multiply and when ever i change the the unit that particular result has to come.
but when i enter width and height i am getting error like Uncaught TypeError: $(...).onChange is not a function
How can i solve this one?
Below is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
<style>
.tt-area-calculator-title {
text-align: right;
cursor: pointer;
margin-bottom: 10px;
font-weight: 600;
font-size: 14px;
color: #01acf1;
}
.tt-calculator-container {
display: block;
opacity: 0;
visibility: hidden;
height: 0;
}
.active {
opacity: 1;
visibility: visible;
height: auto;
}
.areacalc {
text-align: center;
font-size: 14px;
line-height: 16px;
border: 1px solid #d7d7d7;
background: #f8f8f8;
color: #262626;
margin-bottom: 20px;
}
.areacalc-column {
float: none;
width: 100%;
}
.areacalc-column-inner {
padding: 0 0 5px;
}
.areacalc-label {
color: #21293c;
padding: 4px 0;
font-weight: 600;
text-transform: uppercase;
}
p {
margin-top: 0;
margin-bottom: 0.9rem;
}
.areacalc-table-measurements {
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
max-width: 100%;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
.areacalc-table-measurements {
text-align: center;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
.areacalc-table-measurements {
text-align: center;
}
.areacalc-column th {
padding: 2px;
font-weight: 400;
text-align: center;
}
.areacalc-column td {
padding: 2px;
}
.table-l {
text-align: right;
width: 50%;
}
.table-r {
text-align: left;
width: 50%;
font-weight: 700;
}
.areacalc-input,
select.areacalc-select {
padding: 0 5px !important;
height: 26px !important;
border: 1px solid #c2c2c2;
}
.cell-d {
font-weight: 600;
padding: 6px 0 !important;
}
</style>
</head>
<body>
<div class="tt-area-calculator-title">
<span class="tt-calculator-span"
><i class="fas fa-calculator"></i> Area Calculator</span
>
</div>
<div
id="tt-area-calculator-container"
class="tt-calculator-container"
data-bind="scope: 'area_calculator'"
>
<!-- ko template: getTemplate() -->
<div class="areacalc">
<!-- COLUMN 1 -->
<div class="areacalc-column">
<!-- AREA TO BE TILED -->
<div class="areacalc-column-inner">
<p class="areacalc-label" data-bind="i18n: 'Area(s) to be tiled'">
Area(s) to be tiled
</p>
<table class="areacalc-table-measurements" style="width: 100%">
<tbody>
<tr>
<th style="width: 12%"></th>
<th style="width: 22%" data-bind="i18n: 'Width'">Width</th>
<th style="width: 22%" data-bind="i18n: 'Height'">Height</th>
<th style="width: 22%" data-bind="i18n: 'Unit'">Unit</th>
<th style="width: 22%" data-bind="i18n: 'Area'">Area</th>
</tr>
<!-- ko foreach: {data: $data.areaTiled, as: '$row' } -->
<tr data-bind="css: {'_last': $row.isLast()}" class="_last">
<td class="cell-a">
<!-- ko if: $row.canDelete --><!-- /ko -->
</td>
<td class="cell-b">
<input
id="areaWidth"
class="areacalc-input"
type="text"
name="width"
data-bind="value: $row.width, valueUpdate: 'keyup'"
/>
</td>
<td class="cell-c">
<input
id="areaHeight"
class="areacalc-input"
type="text"
name="height"
data-bind="value: $row.height, valueUpdate: 'keyup'"
/>
</td>
<td class="cell-u">
<select
name="unit"
class="areacalc-select"
data-bind="options: $parent.unitsArray, value: selectedUnit"
>
<option value="m">m</option>
<option value="mm">mm</option>
<option value="cm">cm</option>
<option value="inches">inches</option>
<option value="feet">feet</option>
</select>
</td>
<td class="cell-d">
<span id="total" data-bind="text: $row.square">0</span>
<span>m²</span>
</td>
</tr>
<!-- /ko -->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td style="font-weight: 600; padding: 6px 0px !important">
<span data-bind="i18n: 'Total'">Total</span>
<span id="totalvalue" data-bind="text: $data.areaTiledTotal"
>0</span
>
<span>m²</span>
</td>
</tr>
</tbody>
</table>
<!-- AREA TO BE DEDUCTED -->
<p
class="areacalc-label"
data-bind="i18n: 'Area(s) to be deducted'"
>
Area(s) to be deducted
</p>
<table class="areacalc-table-measurements" style="width: 100%">
<tbody>
<tr>
<th style="width: 12%"></th>
<th style="width: 22%" data-bind="i18n: 'Width'">Width</th>
<th style="width: 22%" data-bind="i18n: 'Height'">Height</th>
<th style="width: 22%" data-bind="i18n: 'Unit'">Unit</th>
<th style="width: 22%" data-bind="i18n: 'Area'">Area</th>
</tr>
<!-- ko foreach: {data: $data.areaDeducted, as: '$row' } -->
<tr data-bind="css: {'_last': $row.isLast()}" class="_last">
<td class="cell-a">
<!-- ko if: $row.canDelete --><!-- /ko -->
</td>
<td class="cell-b">
<input
id="areaWidth1"
class="areacalc-input"
type="text"
name="width"
data-bind="value: $row.width, valueUpdate: 'keyup'"
/>
</td>
<td class="cell-c">
<input
id="areaHeight1"
class="areacalc-input"
type="text"
name="height"
data-bind="value: $row.height, valueUpdate: 'keyup'"
/>
</td>
<td class="cell-u">
<select
name="unit"
class="areacalc-select"
data-bind="options: $parent.unitsArray, value: selectedUnit"
>
<option value="m">m</option>
<option value="mm">mm</option>
<option value="cm">cm</option>
<option value="inches">inches</option>
<option value="feet">feet</option>
</select>
</td>
<td class="cell-d">
<span id="total1" data-bind="text: $row.square">0</span>
<span>m²</span>
</td>
</tr>
<!-- /ko -->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td style="font-weight: 600; padding: 6px 0px !important">
<span data-bind="i18n: 'Total'">Total</span>
<span
id="totalvalue1"
data-bind="text: $data.areaDeductedTotal"
>0</span
>
<span>m²</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- COLUMN 2 -->
<div class="areacalc-column">
<div class="areacalc-column-inner">
<p class="areacalc-label">You will need</p>
<table class="areacalc-table-results" style="width: 100%">
<tbody>
<tr>
<td class="table-l">Total area:</td>
<td class="table-r">
<span data-bind="text: $data.areaTotal">0</span>
<span>m²</span>
</td>
</tr>
<tr>
<td class="table-l">Tiles required:</td>
<td class="table-r" data-bind="text: $data.tilesRequired">
0
</td>
</tr>
<tr>
<td class="table-l"></td>
<td class="table-r"></td>
</tr>
<tr>
<td class="table-l">Est. Grout required:</td>
<td class="table-r">
<span data-bind="text: $data.groutBags">0</span>
<span data-bind="i18n: 'x 3kg bag(s)'">x 3kg bag(s)</span>
</td>
</tr>
<tr>
<td class="table-l">Est. Adhesive required:</td>
<td class="table-r">
<span data-bind="text: $data.adhesiveBags">0</span>
<span data-bind="i18n: 'bag(s)'">bag(s)</span>
</td>
</tr>
<tr>
<td class="table-l">
<span data-bind="i18n: 'Add'">Add</span>
<span data-bind="text: $data.waste + '%'">10%</span>
<span data-bind="i18n: 'for wastage?'">for wastage?</span>
</td>
<td class="table-r">
<input
type="checkbox"
style="float: left; margin-right: 5px"
data-bind="checked: $data.isWasteEnabled"
/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- /ko -->
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin="anonymous"
></script>
<script>
$(document).ready(function () {
$(".tt-area-calculator-title").click(function () {
$(".tt-calculator-container").toggleClass("active");
});
});
$("#areaWidth,#areaHeight").keyup(function () {
var textValue1 = $("#areaWidth").val();
var textValue2 = $("#areaHeight").val();
var total = textValue1 * textValue2;
var measurement = document.querySelector(".areacalc-select").value;
console.log(measurement);
$(document).ready(function () {
$(".areacalc-select").onChange(function () {
if (measurement === "m") {
return total;
document.getElementById("total").innerHTML = total;
document.getElementById("totalvalue").innerHTML = total;
} else if (measurement === "mm") {
document.getElementById("total").innerHTML = total * 3;
document.getElementById("totalvalue").innerHTML = total * 3;
} else if (measurement === "cm") {
document.getElementById("total").innerHTML = total * 4;
document.getElementById("totalvalue").innerHTML = total * 4;
} else if (measurement === "inches") {
document.getElementById("total").innerHTML = total * 5;
document.getElementById("totalvalue").innerHTML = total * 5;
} else {
document.getElementById("total").innerHTML = total * 6;
document.getElementById("totalvalue").innerHTML = total * 6;
}
});
});
});
$("#areaWidth1,#areaHeight1").keyup(function () {
var textValue1 = $("#areaWidth1").val();
var textValue2 = $("#areaHeight1").val();
var total = textValue1 * textValue2;
document.getElementById("total1").innerHTML = total;
document.getElementById("totalvalue1").innerHTML = total;
});
</script>
</body>
</html>
For reference please find the attached image also.
The correct syntax should be $(".areacalc-select").on("change", function () {
You should replace $(".areacalc-select").onChange(function () { with the on function. In jQuery onChange doens't exists.
in your case it will look like this
$(".areacalc-select").on('change', function () {
// Your code goes here
})
you are using wrong syntax to bind the event to the .areacal-select element. their is no function called onChange in jquery, that is why you are getting an exception saying it is not a function.
the correct way is to using something like $(selector).on("change", function(){})
here is you updated code that should work for you
$(".areacalc-select").on("change", function () {
if (measurement === "m") {
return total;
document.getElementById("total").innerHTML = total;
document.getElementById("totalvalue").innerHTML = total;
} else if (measurement === "mm") {
document.getElementById("total").innerHTML = total * 3;
document.getElementById("totalvalue").innerHTML = total * 3;
} else if (measurement === "cm") {
document.getElementById("total").innerHTML = total * 4;
document.getElementById("totalvalue").innerHTML = total * 4;
} else if (measurement === "inches") {
document.getElementById("total").innerHTML = total * 5;
document.getElementById("totalvalue").innerHTML = total * 5;
} else {
document.getElementById("total").innerHTML = total * 6;
document.getElementById("totalvalue").innerHTML = total * 6;
}
});
I want to filter my table list with name and date : from and to fields, the name works fine but the date from and to doesn't work correctly.
Here is my code :
$(function(){
//name part
$("#name").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#my-table").find('tr').filter(function() {
$(this).toggle($(this).find('td').text().toLowerCase().indexOf(value) > -1)
});
});
//from part
$("#from").bind("keyup change", function() {
var value = $(this).val().toLowerCase();
$("#my-table").find('tr').filter(function() {
$(this).toggle($(this).find('td').text().toLowerCase()<(value))
});
//case if date is empty, we display all the list
if(value.length === 0) {
$("#my-table").find('tr').show();
}
});
//to part
$("#to").bind("keyup change", function() {
var value = $(this).val().toLowerCase();
$("#my-table").find('tr').filter(function() {
$(this).toggle($(this).find('td').text().toLowerCase()>(value))
});
});
});
.container input {
width:25%;
display:inline-block;
margin-bottom:20px;
}
.list-group {
border:1px solid #eaeaea;
padding:20px;
}
.list-group td, th {
border:1px solid #eaeaea;
padding:5px 50px;
text-align:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
Date from : <input class="form-control" id="from" type="date">
to : <input class="form-control" id="to" type="date">
<input class="form-control" id="name" type="text" placeholder="Search by name...">
<br>
<table>
<thead>
<tr>
<th>Date</th>
<th>Name</th>
</tr>
</thead>
<tbody id="my-table">
<tr class="list-group">
<td >2015-01-01</td>
<td>John</td>
</tr>
<tr class="list-group">
<td>2015-01-30</td>
<td>notif</td>
</tr>
<tr class="list-group">
<td>2016-03-10</td>
<td>food</td>
</tr>
<tr class="list-group">
<td>2014-09-10</td>
<td>yop</td>
</tr>
<tr class="list-group">
<td>2017-12-30</td>
<td>wick</td>
</tr>
</tbody>
</table>
</div>
You can use momentjs library to compare your date value.
moment($(this).find('td').text().toLowerCase(), 'YYYY/MM/DD')>(value)
$(function(){
//name part
$("#name").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#my-table").find('tr').filter(function() {
$(this).toggle($(this).find('td').text().toLowerCase().indexOf(value) > -1)
});
});
//from part
$("#from").bind("keyup change", function() {
var value = moment($(this).val().toLowerCase(), 'YYYY/MM/DD');
$("#my-table").find('tr').filter(function() {
$(this).toggle(moment($(this).find('td').text().toLowerCase(), 'YYYY/MM/DD')>(value))
});
//case if date is empty, we display all the list
if(value.length === 0) {
$("#my-table").find('tr').show();
}
});
//to part
$("#to").bind("keyup change", function() {
var value = moment($(this).val().toLowerCase(), 'YYYY/MM/DD');
$("#my-table").find('tr').filter(function() {
$(this).toggle(moment($(this).find('td').text().toLowerCase(), 'YYYY/MM/DD')<(value))
});
});
});
.container input {
width:25%;
display:inline-block;
margin-bottom:20px;
}
.list-group {
border:1px solid #eaeaea;
padding:20px;
}
.list-group td, th {
border:1px solid #eaeaea;
padding:5px 50px;
text-align:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
Date from : <input class="form-control" id="from" type="date">
to : <input class="form-control" id="to" type="date">
<input class="form-control" id="name" type="text" placeholder="Search by name...">
<br>
<table>
<thead>
<tr>
<th>Date</th>
<th>Name</th>
</tr>
</thead>
<tbody id="my-table">
<tr class="list-group">
<td >2015-01-01</td>
<td>John</td>
</tr>
<tr class="list-group">
<td>2015-01-30</td>
<td>notif</td>
</tr>
<tr class="list-group">
<td>2016-03-10</td>
<td>food</td>
</tr>
<tr class="list-group">
<td>2014-09-10</td>
<td>yop</td>
</tr>
<tr class="list-group">
<td>2017-12-30</td>
<td>wick</td>
</tr>
</tbody>
</table>
</div>
Hope this code will work correctly.
$(function() {
//name part
$("#name").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#my-table").find('tr').filter(function() {
$(this).toggle($(this).find('td').text().toLowerCase().indexOf(value) > -1)
});
});
$("#from,#to").bind('keyup change', function() {
var val1 = moment($('#from').val().toLowerCase(), 'YYYY/MM/DD');
var val2 = moment($('#to').val().toLowerCase(), 'YYYY/MM/DD');
$("#my-table").find('tr').filter(function() {
$(this).toggle((moment($(this).find('td').text().toLowerCase(),
'YYYY/MM/DD') >= (val1) || !val1["_isValid"]) && (moment($(this).find('td').text()
.toLowerCase(),
'YYYY/MM/DD') <= (val2) || !val2["_isValid"]))
});
//console.log(val1["_isValid"], val2["_isValid"]);
})
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
<style>
.container input {
width: 25%;
display: inline-block;
margin-bottom: 20px;
}
.list-group {
border: 1px solid #eaeaea;
padding: 20px;
}
.list-group td,
th {
border: 1px solid #eaeaea;
padding: 5px 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
Date from : <input class="form-control" id="from" type="date"> to : <input class="form-control" id="to" type="date">
<input class="form-control" id="name" type="text" placeholder="Search by name...">
<br>
<table>
<thead>
<tr>
<th>Date</th>
<th>Name</th>
</tr>
</thead>
<tbody id="my-table">
<tr class="list-group">
<td>2019-07-08</td>
<td>John</td>
</tr>
<tr class="list-group">
<td>2015-01-30</td>
<td>notif</td>
</tr>
<tr class="list-group">
<td>2016-03-10</td>
<td>food</td>
</tr>
<tr class="list-group">
<td>2014-09-10</td>
<td>yop</td>
</tr>
<tr class="list-group">
<td>2017-12-30</td>
<td>wick</td>
</tr>
</tbody>
</table>
</div>
I'm trying to build a tic-tac-toe game where the user first clicks which player he wants to be, then clicks on the square in the board where he wants to play. The issue I'm having is changing the background of the square that the user clicks. Because I don't know which square the user will click, I can't figure out how to change the style of the background, because the square's id/class is unknown.
I can't say:
document.getElementById("randomId").style.backg round
because I don't know which square the user will click. Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Tic-Tac-Toe Game</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style type="text/css">
#buttons{
margin-top: 50px;
}
#x{
margin-left: 10px;
}
#table{
margin-top: 15px;
background: gray;
table-layout: fixed;
width: auto;
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<div class="container" id="buttons">
<h2 id="h2">Choose your team!</h2>
<button onclick="myFunctions()" type="button" class="btn btn-default"><span
style="font-weight: bold; font-size: 110%;">O</span></button>
<button type="button" id="x" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span>
</button>
<table id="table" class="table table-bordered">
<tbody>
<tr>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
<tr>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
<tr>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var master = false;
var servant = false;
function myFunctions(){
master = true;
}
function myFunction() {
if (master == true) {
}
}
</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Well, you could either do it like this, where you add an argument when you call the function, in this case the this keyword would point to the html element (td).
By adding a css class, you can handle the changes relatively easily and check if it wasn't clicked before.
var master = true;
// clickedElement = your dom element you want to update
function myFunction(clickedElement) {
// if a dom element was given and it doesn't have a className yet
if (clickedElement && !clickedElement.className) {
// set a class on the element
clickedElement.className = master ? 'master' : 'servant';
// change the player (if it's not a master it's a servant)
master = !master;
}
}
#buttons {
margin-top: 50px;
}
#x {
margin-left: 10px;
}
#table {
margin-top: 15px;
background: gray;
table-layout: fixed;
width: auto;
width: 250px;
height: 250px;
}
.master {
background-color: green;
}
.servant {
background-color: red;
}
<div class="container" id="buttons">
<h2 id="h2">Choose your team!</h2>
<button onclick="myFunctions()" type="button" class="btn btn-default"><span style="font-weight: bold; font-size: 110%;">O</span>
</button>
<button type="button" id="x" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span>
</button>
<table id="table" class="table table-bordered">
<tbody>
<tr>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
</tr>
<tr>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
</tr>
<tr>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
</tr>
</tbody>
</table>
</div>
There is of course no reason to only store this information on the DOM, you would still have to evaluate if there were 3 cells of the same color. You might want to choose to keep a data structure that checks which block was clicked and who clicked it and if there are diagonally, vertically or horizontally 3 in a row for the person who just clicked.
and if you want some more inspiration, you can check this jsfiddle
I have a button that, when clicked, makes an alert window pop up. When the button is clicked, a variable called "master" changes from false to true. Then, I have an if statement that checks if the variable is true. If it is, then it alerts the value of the variable. Here's the problem: the last part isn't happening. It's like the if statement isn't executing, then it stops the rest of the program. I did check to see if the "master" variable is registering as true, and it is, so I don't really know what's wrong.
<!DOCTYPE html>
<html>
<head>
<title>Tic-Tac-Toe Game</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style type="text/css">
#buttons{
margin-top: 50px;
}
#x{
margin-left: 10px;
}
#table{
margin-top: 15px;
background: gray;
table-layout: fixed;
width: auto;
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<div class="container" id="buttons">
<h2 id = "h2" >Choose your team!</h2>
<button onclick = "myFunctions()" type = "button" class="btn btn-default"><span style = "font-weight: bold; font-size: 110%;">O</span></button>
<button type = "button" id = "x" class="btn btn-default"><span class = "glyphicon glyphicon-remove"></span></button>
<table id = "table" class="table table-bordered">
<tbody>
<tr>
<td id = "td" onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
<tr>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
<tr>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var master = false;
var servant = false;
function myFunction(){
alert('hi');
}
function myFunctions(){
master = true;
}
if (master == true) {
alert(master);
}
</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Refer the corrected code below.
<!DOCTYPE html>
<html>
<head>
<title>Tic-Tac-Toe Game</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style type="text/css">
#buttons{
margin-top: 50px;
}
#x{
margin-left: 10px;
}
#table{
margin-top: 15px;
background: gray;
table-layout: fixed;
width: auto;
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<div class="container" id="buttons">
<h2 id = "h2" >Choose your team!</h2>
<button onclick = "myFunctions()" type = "button" class="btn btn-default"><span style = "font-weight: bold; font-size: 110%;">O</span></button>
<button type = "button" id = "x" class="btn btn-default"><span class = "glyphicon glyphicon-remove"></span></button>
<table id = "table" class="table table-bordered">
<tbody>
<tr>
<td id = "td" onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
<tr>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
<tr>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var master = false;
var servant = false;
function myFunction(){
alert('hi');
master = true;
if (master == true) {
alert(master);
}
}
</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Reason is was not executing is you had function called as myFunctions but actually you were calling myFunction() for onclick event
First you set master to false, then you declare two functions: 'myFunction' and 'myFunctions', then you check if master == true. As master is false, so you won't see the alert.
When you click the buttons, only the function myFunction or myFunctions gets executed. The test 'master == true' does not get executed again, it is not part of the functions