Uncaught TypeError: $(...).onChange is not a function
somutesting
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. 
Sang Suantak
The correct syntax should be $(".areacalc-select").on("change", function () {
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Loop skips every second item when removing selected items from many to many
- Next: Problem in extracting text from Xpath using selenium in python
Related
TOP Ranking
- 1
pump.io port in URL
- 2
grouping by column variables and appending a new variable based on condition
- 3
Failed to listen on localhost:8000 (reason: Cannot assign requested address)
- 4
Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background
- 5
Group boxplot data while keeping their individual X axis labels in ggplot2 in R
- 6
Vector input in shiny R and then use it
- 7
BigQuery - concatenate ignoring NULL
- 8
Can a 32-bit antivirus program protect you from 64-bit threats
- 9
How to remove the extra space from right in a webview?
- 10
How to how increase/decrease compared to adjacent cell
- 11
android.content.Context.getSharedPreferences(java.lang.String, int)' on a null object reference id DBhandler
- 12
Getting 502 Bad Gateway Error While Deploying WordPress On Dockerized Lemp?
- 13
Type 'number' is not assignable to type 'NgIterable<any>' when trying to async observe a datasource
- 14
Check if a number is a perfect square
- 15
FFmpeg resize without upscaling
- 16
How do I display Label text character-by-character?
- 17
How to show an image in a View with ASP.NET MVC 5? (Many suggestions failed so far)
- 18
Json Schema - Conditional Evaluation with RegEx
- 19
PlayOnLinux displays weird looking window on 18.04 for MS Office installation
- 20
JMeter: Why get error when try to save test plan
- 21
Emulator wrong screen resolution in Android Studio 1.3
Comments