I'm trying to create a number field (.item_adults) that multiply it self and print the value into a class="item_price". To do that I create some of this:
<div class="bookSection">
<input class="item_adults" name="adults" type="number" data-price="10" value="1" maxlength="2" min="0">
<p>Subtotal: $<span class="item_price">10</span></p>
</div>
$( document ).ready(function() {
$(".bookSection").each(function() {
$(".item_adults").change(function(){
var price = ($(this).val());
var ammount = ($(this).attr("data-price"));
var total = (price) * ammount;
$(".item_price").html(total);
});
});
});
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="bookSection">
<input class="item_adults" name="adults" type="number" data-price="10" value="1" maxlength="2" min="0">
<p>Subtotal: $<span class="item_price">10</span></p>
</div>
<div class="bookSection">
<input class="item_adults" name="adults" type="number" data-price="15" value="1" maxlength="2" min="0">
<p>Subtotal: $<span class="item_price">15</span></p>
</div>
</body>
</html>
and I'm using:
$(".bookSection").each(function() {
to try to separate it in sections to work independently modifying its own .item_price, but right now one section is affecting the other ones.
hope the explanation is clear, Thank you!
Look for the instances within each section using find()
$(".bookSection").each(function() {
var $item_price = $(this).find(".item_price")
$(this).find(".item_adults").change(function(){
var price = ($(this).val());
var ammount = ($(this).attr("data-price"));
var total = (price) * ammount;
$item_price.html(total);
});
});
Could also simplfy this without needing the each on the sections:
$(".item_adults").change(function(){
var price = ($(this).val());
var ammount = ($(this).attr("data-price"));
var total = (price) * ammount;
$(this).closest(".bookSection").find(".item_price").html(total);
});
Close, only a couple small changes. When you reference $(".item_adults") and $(".item_price"), it affects them all. Limit the scope to the CURRENT .bookSection, as below:
$( document ).ready(function() {
$(".bookSection").each(function() {
$(this).find(".item_adults").change(function(){
var price = ($(this).val());
var ammount = ($(this).attr("data-price"));
var total = (price) * ammount;
$(this).parents(".bookSection").find(".item_price").html(total);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="bookSection">
<input class="item_adults" name="adults" type="number" data-price="10" value="1" maxlength="2" min="0">
<p>Subtotal: $<span class="item_price">10</span></p>
</div>
<div class="bookSection">
<input class="item_adults" name="adults" type="number" data-price="15" value="1" maxlength="2" min="0">
<p>Subtotal: $<span class="item_price">15</span></p>
</div>
</body>
</html>
Related
i am trying to add 2 number as value from input form. typeof(parseInt(value1)) and typeof(parseInt(value2)) return number
but parseInt(value1)+parseInt(value2) return NaN. please someone explain
var input1 = document.getElementById('num1')
var input2 = document.getElementById('num2')
var value1 = input1.value
var value2 = input2.value
btn.addEventListener('click', myfunc)
function myfunc() {
alert(typeof(parseInt(value1)))
alert(typeof(parseInt(value2)))
alert(parseInt(value1)+parseInt(value2))
}
<!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>Tính toán</title>
</head>
<body>
<form action="">
<div>
<label for="num1">Number 1</label>
<div>
<input type="number" name="num1" id="num1" />
<span class="error" id="errNum1">(*)</span>
</div>
</div>
<div>
<label for="num2">Number 2</label>
<div>
<input type="number" name="num2" id="num2" />
<span class="error" id="errNum2">(*)</span>
</div>
</div>
<div></div>
<div>
<input type="button" value="Tính toán" id="btn" />
</div>
</form>
<script src="js.js"></script>
</body>
</html>
You get the value of the inputs when the page is loaded, so they will always be empty. Instead you want to get the values when the button is clicked.
btn.addEventListener('click', myfunc)
function myfunc() {
var input1 = document.getElementById('num1')
var input2 = document.getElementById('num2')
var value1 = input1.value
var value2 = input2.value
alert(typeof(parseInt(value1)))
alert(typeof(parseInt(value2)))
alert(parseInt(value1)+parseInt(value2))
}
The correct way to do that:
You don't need to use parseInt() on input type= number,
just use valueAsNumber property
const myForm = document.forms['my-form']
myForm.btn.onclick = evt =>
{
console.clear()
console.log(typeof myForm.num1.valueAsNumber)
console.log(typeof myForm.num2.valueAsNumber)
console.log( myForm.num1.valueAsNumber + myForm.num2.valueAsNumber )
}
label
, button {
display : block;
margin : .3em;
}
<form action="" name='my-form'>
<label>
Number 1
<input type="number" name="num1" value="0" >
</label>
<label>
Number 2
<input type="number" name="num2" value="0" >
</label>
<button name="btn" type="button"> Tính toán </button>
</form>
I created a form of ticket ordering. I have to calculate the total price of purchasing the adult and discount (child and senior) tickets.
Here is the html code.
<form action="">
<p>Adult: $<span class="price-adult">52</span></p>
<p>Discount (3 - 11 years old; 65 years old or above): $<span
class="price-discount">23</span> </p>
<label for="num-adult">Number of Visitor (Adult):</label>
<input type="number" id="num-adult" name="num-adult" min="1" max="50"
value="1"><br><br>
<label for="num-discount">Number of Visitor (Discount):</label>
<input type="number" id="num-discount" name="num-discount" min="1" max="50"
value="1"><br><br>
<p>Total Amount: $ <span class="total"></span> </p>
<input type="submit" value="Submit">
</form>
Here is the Javascript code that I have written. I tried to write the adult version first so the discount ticket is not included in the JS code. Please help me find the problem.
let numOfadult = document.getElementById("num-adult").value
const priceOfAdult = document.getElementsByClassName("price-adult").value
function getTotalPrice() {
let total = numOfadult * priceOfAdult
document.getElementsByClassName('total').textContent = total
}
getTotalPrice()
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form action="">
<p>Adult: $<span class="price-adult" id="price-adult" >52</span></p>
<p>Discount (3 - 11 years old; 65 years old or above): $<span
class="price-discount">23</span> </p>
<label for="num-adult">Number of Visitor (Adult):</label>
<input type="number" id="num-adult" name="num-adult" min="1" max="50"
value="1" onkeyup="sum();"><br><br>
<label for="num-discount">Number of Visitor (Discount):</label>
<input type="number" id="num-discount" name="num-discount" min="1" max="50"
value="1"><br><br>
<p>Total Amount: $ <span class="total" id="total"></span> </p>
<input type="submit" value="Submit">
<script>
function sum()
{
var txtFirstNumberValue = document.getElementById('num-adult').value;
var txtSecondNumberValue = document.getElementById('price-adult').innerHTML;
var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
if (!isNaN(result))
{
document.getElementById('total').innerHTML = result;
}
}
</script>
</form>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="Author" content="Micah Cave">
<title>Ice 11</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#convert").click( function() {
var dollarAmount = $('input:text').val();
if ( $("#usa").is(':checked') )
dollarAmount = dollarAmount*1;
if ( $("#russia").is(':checked') )
dollarAmount = dollarAmount * 73.18;
});
});
</script>
</head>
<body>
<h1>Cave</h1>
<h2>Part 1B</h2>
<p>Type in the starting amount (in US dollars) here: <input type="text"></p>
<input type="checkbox" id="usa">US Dollars <br>
<input type="checkbox" id="russia">Russian Ruble <br>
<input type="checkbox" id="france">France Francs <br>
<input type="checkbox" id="japan">Japanese Yen <br>
<input type="button" id="convert" value="Convert currency(s)">
<p id="pasteHere"></p>
</body>
</html>
So I need to take the value that's entered in the input box above, and then if they check off any box(s) to then convert each checked boxs currency from US to whatever was selected, and then print out the results each time using if statements.
you can make a function called convert,when convert button click or checkbox click then call that function.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="Author" content="Micah Cave">
<title>Ice 11</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#convert").click(convert);
$("input:checkbox").click(convert)
});
function convert(){
var dollarAmount = $('input:text').val();
var result = " "
if ( $("#usa").is(':checked') )
result += dollarAmount*1 + ";";
if ( $("#russia").is(':checked') )
result += dollarAmount * 73.18 + ";";
$("#pasteHere").text(result)
}
</script>
</head>
<body>
<h1>Cave</h1>
<h2>Part 1B</h2>
<p>Type in the starting amount (in US dollars) here: <input type="text"></p>
<input type="checkbox" id="usa">US Dollars <br>
<input type="checkbox" id="russia">Russian Ruble <br>
<input type="checkbox" id="france">France Francs <br>
<input type="checkbox" id="japan">Japanese Yen <br>
<input type="button" id="convert" value="Convert currency(s)">
<p id="pasteHere"></p>
</body>
</html>
That is my solution:
$(document).ready(function() {
let selectedCurrencies = [];
$("#convert").click(function() {
let dollarAmount = $('input:text').val();
let checkBoxList = $('input:checked');
let resultText = "";
for (let i = 0; i < checkBoxList.length; i++) {
resultText += "US "+dollarAmount+" dollar =";
switch (checkBoxList[i].id) {
case 'usa':
resultText += dollarAmount * 1;
break;
case "russia":
resultText += dollarAmount * 73.18;
break;
}
resultText+=" "+(checkBoxList[i].nextSibling.textContent)+"<br>";
}
$("#pasteHere").html(resultText);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Cave</h1>
<h2>Part 1B</h2>
<p>Type in the starting amount (in US dollars) here: <input type="text"></p>
<input type="checkbox" id="usa">US Dollars <br>
<input type="checkbox" id="russia">Russian Ruble <br>
<input type="checkbox" id="france">France Francs <br>
<input type="checkbox" id="japan">Japanese Yen <br>
<input type="button" id="convert" value="Convert currency(s)">
<p id="pasteHere"></p>
I have this code that I'm working on, but the calculate button won't work no matter what I do. I want to find the cost per square inch using the pizzaSize and pizzaCost. How can I make the calculate button actually calculate?
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' >
<title> Pizza Calculator </title>
<script src="pizzaCalc.js">
</script>
</head>
<body>
<h1>Pizza Calculator</h1>
<p>
<label for="priceBox">Cost: </label><input type="text" id="priceBox" size="5"/></p>
<p>
<label for="sizeBox">Diameter :</label><input type="text" id="sizeBox"
size="5"/>
</p>
<input type="button" id="cpsi" value="Cost PSI" onclick="calculate(cpsi)">
</body>
</html>
"use strict"
function pizzaCalc () {
var size = document.getElementById ("sizeBox").value;
size = parseFloat (size);
var price = document.getElementById("priceBox").value;
price = parceFloat (price);
var costPerSquareInch = price / (3.14 * (size / 2)^2)
alert('Pizza value :' +costPerSquareInch);
document.getElementById("cpsi").value = costPerSquareInch;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' >
<title> Pizza Calculator </title>
<script src="pizzaCalc.js">
</script>
</head>
<body>
<h1>Pizza Calculator</h1>
<p>
<label for="priceBox">Cost: </label><input type="text" id="priceBox" value="5"/></p>
<p>
<label for="sizeBox">Diameter :</label><input type="text" id="sizeBox" value="5"/>
</p>
<input type="button" id="cpsi" value="Cost PSI" onclick="pizzaCalc()">
<script type="text/javascript">
"use strict"
function pizzaCalc () {
var size = document.getElementById ("sizeBox").value;
size = parseFloat (size);
var price = document.getElementById("priceBox").value;
price = parseFloat (price);
var costPerSquareInch = price / (3.14 * (size / 2)^2)
alert('Pizza value :' +costPerSquareInch);
document.getElementById("cpsi").value = costPerSquareInch;
}
</script>
</body>
</html>
It appears that
<input type="button" id="cpsi" value="Cost PSI" onclick="calculate(cpsi)">
should be
<input type="button" id="cpsi" value="Cost PSI" onclick="pizzaCalc()">
also I am assuming size should be value on the input tags.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' >
<title> Pizza Calculator </title>
<script src="pizzaCalc.js">
</script>
</head>
<body>
<h1>Pizza Calculator</h1>
<p>
<label for="priceBox">Cost: </label><input type="text" id="priceBox" value="5"/></p>
<p>
<label for="sizeBox">Diameter :</label><input type="text" id="sizeBox" value="5"/>
</p>
<input type="button" id="cpsi" value="Cost PSI" onclick="pizzaCalc()">
<script type="text/javascript">
"use strict"
function pizzaCalc () {
var size = document.getElementById ("sizeBox").value;
size = parseFloat (size);
var price = document.getElementById("priceBox").value;
price = parseFloat (price);
var costPerSquareInch = price / (3.14 * (size / 2)^2)
alert('Pizza value :' +costPerSquareInch);
document.getElementById("cpsi").value = costPerSquareInch;
I'm making an app for the overwolf app contest(http://www.overwolf.com/nvidia-app-challenge/) and in the options page, I want to be able to store the options in localStorage so I can access it from any page, at any time.
Here is my HTML page:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Battle Stats</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="windowManagement.js"></script>
<script>
function toggleDisabled(_checked) {
document.getElementById('warnValue').disabled = _checked ? true : false;
}
//init
var ddl = document.getElementById('options_class');
var length = 5
for (var i = 0; i < length; i++){
if (ddl.options[i].value == localStorage.getItem("options_playerClass")){
ddl.options[i].selected = true;
break;
}
}
function setLocalStorageData()
{
var playerClass = '';
playerClass = document.getElementById("options_class").value;
localStorage.setItem("options_playerClass", playerClass);
alert(localStorage.getItem("options_playerClass"));
}
</script>
</head>
<body>
<div onmousedown="dragResize('BottomRight');">
<div id="content" onmousedown="dragMove();">
<div class="outlined">
<h1>Options</h1>
<form>
<p id="output"></p>
<input type="checkbox" name="options_battleStats" value="Battle Stats">Show Battle Stats<br>
<input type="checkbox" name="options_healthWarning" value="Health Warning" onchange="toggleDisalbled(this.checked);">Low Health Warning
<div class="optionInner">
<p> Warn me at:
<input type="number" name="points" min="0" max="100" step="10" value="30" class="optionValue" id="warnValue">
</p>
<p>Class:
<select name="options_class" id="options_class" class="optionValue">
<option value="smg">SMG</option>
<option value="plasma">Plasma Bomber</option>
<option value="medic">Medic</option>
<option value="rail">Rail</option>
<option value="tesla">Tesla</option>
</select>
</p>
</div>
</form>
</div>
<p>Close<span class="actionButton Middle" onclick="setLocalStorageData();">Save</p></p>
</div>
</div>
</body>
</html>
The error message is:
Uncaught TypeError: Cannot read property 'options' of null
Any help is appreciated!
Your javascript is loaded before the DOM is loaded.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Battle Stats</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="windowManagement.js"></script>
</head>
<body>
<div onmousedown="dragResize('BottomRight');">
<div id="content" onmousedown="dragMove();">
<div class="outlined">
<h1>Options</h1>
<form>
<p id="output"></p>
<input type="checkbox" name="options_battleStats" value="Battle Stats">Show Battle Stats<br>
<input type="checkbox" name="options_healthWarning" value="Health Warning" onchange="toggleDisalbled(this.checked);">Low Health Warning
<div class="optionInner">
<p> Warn me at:
<input type="number" name="points" min="0" max="100" step="10" value="30" class="optionValue" id="warnValue">
</p>
<p>Class:
<select name="options_class" id="options_class" class="optionValue">
<option value="smg">SMG</option>
<option value="plasma">Plasma Bomber</option>
<option value="medic">Medic</option>
<option value="rail">Rail</option>
<option value="tesla">Tesla</option>
</select>
</p>
</div>
</form>
</div>
<p>Close<span class="actionButton Middle" onclick="setLocalStorageData();">Save</p></p>
</div>
</div>
<script>
function toggleDisabled(_checked) {
document.getElementById('warnValue').disabled = _checked ? true : false;
}
//init
var ddl = document.getElementById('options_class');
var length = 5
for (var i = 0; i < length; i++){
if (ddl.options[i].value == localStorage.getItem("options_playerClass")){
ddl.options[i].selected = true;
break;
}
}
function setLocalStorageData()
{
var playerClass = '';
playerClass = document.getElementById("options_class").value;
localStorage.setItem("options_playerClass", playerClass);
alert(localStorage.getItem("options_playerClass"));
}
</script>
</body>
</html>
JavaScript is getting executed prior to dom objects load. Place the entire script block at the end of the page:
<script type="text/javascript">
//All your code here
</script>
</body>
</html>