I'm attempting to create a webpage that will allow my employees to enter a number and get a number that has run through an equation. I want it to do two simple math problems as follows and output the number that's larger.
Equations
x+150=y
x*1.5+89=z
Then display the larger variable.
I can't get it to work.
I'm pretty sure it's a major noob mistake.
<script type="text/javascript">
function updateOutput() {
//get form
var form = document.getElementById("calc");
//get output
var out = form.elements["z"];
//get two numbers
var num1 = parseInt(form.elements["x"].value);
//add 150
var num2 = 150;
//multiply 1.5;
var num3 = 1.5;
//add 89
var num4 = 89;
//amount1
var amount1;
//amount2
var amount2;
//set output depending on amount
//add
amount1.value = num1+num2;
//multiple
amount2.value = num1*num3+num4;
If amount1 > amount2 Then
out.value = amount1.value
Else
out.value = amount2.value
}
</script>
Some errors:
amount1.value only works if you define amount as Object, and it doesn't need to be object here. Same for amount2.
if else notation error
Better go to some tutorial sites like w3school or codecademy or buy some books.
Changes of your code, with added form, input to demonstrate.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="calc">
<input type="number" name="x"/>
<input type="number" name="z"/>
</form>
<button onclick="updateOutput();">click</button>
<script>
function updateOutput() {
//get form
var form = document.getElementById("calc");
//get output
var out = form.elements["z"];
//get two numbers
var num1 = parseInt(form.elements["x"].value);
//add 150
var num2 = 150;
//multiply 1.5;
var num3 = 1.5;
//add 89
var num4 = 89;
//amount1
var amount1;
//amount2
var amount2;
//set output depending on amount
//add
// It's ok to just assign value to them.
amount1 = num1+num2;
//multiple
amount2 = num1*num3+num4;
// Also here, don't use amountX.value.
if (amount1 > amount2) {
out.value = amount1
} else {
out.value = amount2
}
}
</script>
Related
Currently I am working in a Bitcoin live price project with jquery. Now I need to develop a live price difference percentage change calculator. Calculator is working fine. But not working automatically when Bitcoin live price changing. I need to edit in input. Keyup event needed for working. I need to make it as always automatically. Please make it as automatically without keyup.. I created a Codepen page for it. https://codepen.io/toolsim/pen/Rwywjap . My codes;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="text" id="btc-price" class="main01 dz-none from01 for-copy01 input bldo te-cen" value="">
<input type="text" value="25000" class="main02 percentagez to01 input bldo te-cen">
<input type="text" class="rz-result result01 input bldo te-cen">
<script type="text/javascript">
$(document).on("change keyup blur", ".main02", function() {
var first = Number($('.from01').val());
var second = Number($('.to01').val());
var minus = second - first; // 2000 - 1000 = {1000 = minus}
var divide = (minus / first); // 1000 / 1000 = 1
var multiply = divide * 100; // 1 * 100 = 100%
$('.result01').val(Number(multiply).toFixed(2));
});
</script>
<script type="text/javascript">
let weburl = new WebSocket('wss://stream.binance.com:9443/ws/btcusdt#trade');
let stockPriceInput = document.querySelector('#btc-price');
let lastPrice = null;
weburl.onmessage = (event) => {
let stockObject = JSON.parse(event.data);
let price = parseFloat(stockObject.p).toFixed(2);
stockPriceInput.style.color = !lastPrice || lastPrice === price ? 'black' : price > lastPrice ? 'green' : 'red';
stockPriceInput.value = price;
lastPrice = price;
};
</script>
maybe like this:
function set_bts(_price){
$('.main01').val(_price);
var first = Number($('.from01').val());
var second = Number($('.to01').val());
var minus = second - first; // 2000 - 1000 = {1000 = minus}
var divide = (minus / first); // 1000 / 1000 = 1
var multiply = divide * 100; // 1 * 100 = 100%
$('.result01').val(Number(multiply).toFixed(2));
}
var weburl = new WebSocket('wss://stream.binance.com:9443/ws/btcusdt#trade');
weburl.onmessage = function(event){
var stockObject = JSON.parse(event.data);
var price = parseFloat(stockObject.p).toFixed(2);
set_bts(price)
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="text" id="btc-price" class="main01 from01" value="">
<input type="text" value="25000" class="to01">
<input type="text" class="result01">
I'm working on creating a website that can translate a base 10 number into Binary for extra credit in a class I am taking.
My website URL is: http://loganf.tynken.com. My goal is to have the user enter a number into a form, for that number to become a string in a <h4> tag, and to be used by JavaScript to take the string, make it a number, and to then use more code to show the binary number on the screen.
I'm having trouble getting the string into a number.
The JavaScript shown here is now my final product, but a way to try to make the number appear.
var base10, base2, v2_0, v2_1, v2_2, v2_3, v2_4, v2_5, v2_6, v2_7,
v2_8, v2_9, v2_10, v2_11, v2_12;
base10 = document.getElementById('base10');
base2 = document.getElementById('base2');
v2_0 = 1;
v2_1 = 2;
v2_2 = 4;
v2_3 = 8;
function assignvarbinaryvalue() {
var binaryNumber = Number(base10);
var newEl = document.createElement('h4');
var newText = document.createTextNode(binaryNumber);
newEl.appendChild(newText);
var position = document.getElementById('binaryID');
position.appendChild(newEl);
}
<h1>Binary Translator</h1>
<p><div id="base10"><?php echo $_GET['base10']; ?></div><p id="binaryID"></p></p>
var base10 = document.getElementById('base10');
var base2 = document.getElementById('base2');
document.getElementById('submit').onclick=function() {
var number=parseInt(base10.value);
base2.value=decimalToBinary(number);
}
function decimalToBinary(n){
var binaryNumberStr = "";
var binaryNumber=0;
var step=0;
while (Math.pow(2, step)<n)
{
step+=1;
}
for(var i=step; i>=0; i--){
var c=Math.floor(n/Math.pow(2, i))
n-=Math.pow(2, i)*c;
binaryNumber+=Math.pow(2, i)*c;
binaryNumberStr+=c;
}
//binaryNumberStr+=(n-binaryNumber)
return binaryNumberStr;
}
<p>Number:</p>
<input type="text" id="base10" name="base10" size="15" maxlength="30">
<input type="submit" id="submit" name="submit" value="submit">
<input type="text" id="base2" name="base2" disabled size="15" maxlength="30">
If you want to convert string into number you can just use javascript function
parseInt()
You are not grabbing the value:
var base10, base2, v2_0, v2_1, v2_2, v2_3, v2_4, v2_5, v2_6, v2_7, v2_8, v2_9, v2_10, v2_11, v2_12;
base10 = document.getElementById('base10');
base2 = document.getElementById('base2');
v2_0 = 1;
v2_1 = 2;
v2_2 = 4;
v2_3 = 8;
v2_4 = 16;
//v2_5 = 32;
//v2_6 = 64;
//v2_7 = 128;
//v2_8 = 256;
//v2_9 = 512;
//v2_10 = 1024;
//v2_11 = 2084;
//v2_12 = 4096;
function assignvarbinaryvalue() {
var binaryNumber = parseInt(base10.innerHTML);
var newEl = document.createElement('h4');
var newText = document.createTextNode(binaryNumber);
newEl.appendChild(newText);
var position = document.getElementById('binaryID');
position.appendChild(newEl);
}
assignvarbinaryvalue()
The country is changing along side the shipping. I could alert my shipping but will refuse to display in my div. What could be wrong? All calculations working well and displays well except for the #usashipping please help. My country changes and give the correct value for the calculation. The shipping fee just will not display.
<!-- language: lang-js -->
<script type="application/javascript">
var price= "";
var userprice="";
var flpay='';
var total='';
var shipping='';
var fees=30.0;
$('#country').change(function() {
var input = $(this).val();
var shipping;
if (input == 40) {
shipping = 10.0;
$('#usashipping').html('10.0');
} else if (input == 236) {
shipping = 10.0;
$('#usashipping').html('10.0');
} else {
shipping = 30.0;
$('#usashipping').html('30.0');
}
if(fees=='') {
$('#fees').html(30);
}
if(flpay=='')
{
$('#flpay').html(2*19.99);
}
if(total=='')
{
var tot=19.99*2.0 +30.0 + shipping;
var total= tot.toFixed(2);
$('#total').html(total);
}
$('.add').click(function() {
var $input = $(this).next();
var currentValue = parseInt($input.val());
var newinput= currentValue + 1;
$('#gems').val(newinput);
(newinput);
if(newinput==1)
{
var np1=(19.99*2.0);
flpay= np1.toFixed(2);
$('#flpay').html(flpay);
var tot= (fees + shipping + flpay);
var total= tot.toFixed(2);
$('#total').html(total);
var newp=19.99;
var price= newp.toFixed(2);
$('#price').html(price);
useprice= 19.99;
}
else if(newinput>1)
{
//useprice=useprice;
var newprice= 19.99 + (9.99*(newinput-1));
var np1 =(2*newprice);
var flpay = np1.toFixed(2);
$('#flpay').html(flpay);
var tot =( fees + shipping + (2*newprice) );
var total= tot.toFixed(2);
$('#usashipping').html(shipping);
$('#total').html(total);
var newp= newprice.toFixed(2);
$('#price').html(newp);
}
// newprice= price * 2;
// $('#price').html(newprice);
});
<!-- language: lang-html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div>
First & Last Months Payment = $<span data-first-last-month-fees="" id="flpay"></span>
</div>
<div>
Shipping Fee = $<span data-shipping-fee="" id="usashipping"></span>
</div>
<div>
Total due today : $<span data-total-due="" id="total"></span>
</div>
Your code should work perfectly, but there are few things that you could improve in your code:
Instead of declaring shipping variable 3 times in each condition, you need to declare it only once, then update it in each condition, and make sure it's stored as a string so it can be displayed correctly in your HTML.
Instead of updating the HTML content of your span in every condition, just update it with the shipping amount in the end.
This is how should be your code:
$('#country').change(function() {
var input = $(this).val();
var shipping;
if (input == 40) {
shipping = '10.0';
} else if (input == 236) {
shipping = '20.0';
} else {
shipping = '30.0';
}
$('#usashipping').html(shipping);
});
Demo:
$('#country').change(function() {
var input = $(this).val();
var shipping;
if (input == 40) {
shipping = '10.0';
} else if (input == 236) {
shipping = '20.0';
} else {
shipping = '30.0';
}
$('#usashipping').html(shipping);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="country">
<option value="40">40</option>
<option value="236">236</option>
<option value="100">100</option>
</select>
<div>
Shipping Fee = $<span data-shipping-fee="" id="usashipping"></span>
</div>
I can see error showing in your code. I found "$('.add').click" inside "$('#country').change". Also "$('#country').change" function you declared local variable "var shipping;" that's why no change on global "shipping;" value but you using it inside "$('#country').change" function. I modified little bit now try with following code and comment reply if not work for you:
var price= "";
var userprice="";
var flpay='';
var total='';
var shipping='';
var fees=30.0;
$('#country').change(function() {
var input = $(this).val();
if (input == 40) {
shipping = 10.0;
$('#usashipping').html('10.0');
} else if (input == 236) {
shipping = 10.0;
$('#usashipping').html('10.0');
} else {
shipping = 30.0;
$('#usashipping').html('30.0');
}
if(fees=='') {
$('#fees').html(30);
}
if(flpay=='')
{
$('#flpay').html(2*19.99);
}
if(total=='')
{
var tot=19.99*2.0 +30.0 + shipping;
var total= tot.toFixed(2);
$('#total').html(total);
}
})
$('.add').click(function () {
var $input = $(this).next();
var currentValue = parseInt($input.val());
var newinput = currentValue + 1;
$('#gems').val(newinput);
(newinput);
if (newinput == 1) {
var np1 = (19.99 * 2.0);
flpay = np1.toFixed(2);
$('#flpay').html(flpay);
var tot = (fees + shipping + flpay);
var total = tot.toFixed(2);
$('#total').html(total);
var newp = 19.99;
var price = newp.toFixed(2);
$('#price').html(price);
useprice = 19.99;
}
else if (newinput > 1) {
//useprice=useprice;
var newprice = 19.99 + (9.99 * (newinput - 1));
var np1 = (2 * newprice);
var flpay = np1.toFixed(2);
$('#flpay').html(flpay);
var tot = (fees + shipping + (2 * newprice));
var total = tot.toFixed(2);
$('#usashipping').html(shipping);
$('#total').html(total);
var newp = newprice.toFixed(2);
$('#price').html(newp);
}
// newprice= price * 2;
// $('#price').html(newprice);
})
I only changed the div id from #usashipping to something else and it works just fine. Maybe #usashippingis now a constant in jquery library.
I am trying to write a small program that just picks the larger number. My problem is that it want me to use an if else statement in the .js file. here is my html.
<body>
BOX 1<input id = 'box1' name = '' value = '' class = ''><br>
BOX 2<input id = 'box2' name = '' value = '' class = ''><br>
BIGGER<input id = 'bigger' name = '' value = '' class = ''><br>
<button id = 'go' class = ''>GO</button>
<script src = 'js/javascript 03.js'></script>
</body>
I'm really struggling to write the .js file.
document.getElementById('go').onclick = function() {
var box1 = document.getElementById('box1').value;
number1 = parseFloat(number1);
var box2 = document.getElementById('box2').value;
number2 = parseFloat(number2);
var bigger =
document.getElementById('bigger').value = total;
if (number1 > number2) {
bigger = number1;
};
else {
bigger = number2;
}
};
First of all, I'd suggest that you avoid spaces between properties and arguments. Although it seems to be working all the same, I've never seen HTML code like that.
This is what I came up with:
<html>
<body>
BOX 1 <input id='box1' name='' value='' class=''><br>
BOX 2 <input id='box2' name='' value='' class=''><br>
BIGGER<input id='bigger' name='' value='' class=''><br>
<button id='go' class=''> GO</button>
<script type="text/javascript">
document.getElementById('go').onclick = function() {
// Let's get the values and convert them to integers
var val1 = parseInt(document.getElementById('box1').value);
var val2 = parseInt(document.getElementById('box2').value);
// Let's pick the bigger one and put it in another variable, "bigger"
if (val1 > val2)
var bigger = val1;
else
var bigger = val2;
// Let's write the value we just picked to the field whose id is "bigger"
document.getElementById('bigger').value = bigger;
}
</script>
</body>
</html>
I just want to get the square root of total2 .. but it won't appear in the selected box ..
here is the javascript codes.
i'll comment the html codes.
function myFunction() {
var q1 = document.getElementById("qinput1").value;
var q2 = document.getElementById("qinput2").value;
var q3 = document.getElementById("qinput3").value;
var total = parseInt(q1) + parseInt(q2) + parseInt(q3);
document.getElementById("ainput3").value=total;
var a1 = document.getElementById("ainput1").value;
var a2 = document.getElementById("ainput2").value;
//from the total we got, lets assign it a variable for further calculation
var a3 = document.getElementById("ainput3").value=total;
var total2 = parseInt(a1)*parseInt(a2)/ parseInt(a3);
document.getElementById("ansA").value = total2;
var total3 = math.sqrt(parseInt(total2));
document.getElementById("sqaureD").value = total3;
}
function myShapes() {
document.getElementById('squareA').style.display =
document.getElementById('shapes').value == 'Square' ? 'block' : 'none'
}
<form action="" id="fcalculation">
<fieldset>
<legend>Calculation of qu</legend>
<label><i>Ultimate bearing capacity</i> <b>(qu) = </b></label>
<input id="qinput1" type="text" placeholder="c'NcFcsFcdFci"/> +
<input id="qinput2" type="text" placeholder="qNqFqsFqdFqi"/> +
<input id="qinput3" type="text" placeholder="½βγNFγsFγdFγi"/>
</fieldset>
</form>
it seems that the calculation part at the very end is not working. sorry its my first time to code.
Classname is Math not math
Try replacing
var total3 = math.sqrt(parseInt(total2,10));
with
var total3 = Math.sqrt(parseInt(total2,10));
Also, looking at your markup, there are no fields with id ainput1, ainput2 and ainput3.