Currency Converter Not Working with Javascript & HTML - javascript

I am making a currency converter for cryptos, but I'm getting a problem with it working. Here is the source code. Now I tried several methods to make it work, but I either did not succeed or only partially.
HTML:
<html>
<head>
</head>
<body>
<input oninput="convert()" onchange="convert()" type="value" name="input" id="currencycoininsert" placeholder="0.00"/>
<!-- <button type="button" id="btncur-insert"> -->
<select name="dropdowncurrency" id="selectcurinsert">
<option value="BTC" id="selectcurinsert1" >BITCOIN (BTC)</option>
<option value="ETH" id="selectcurinsert2" selected>ETHERIUM (ETH)</option>
<option value="LTC" id="selectcurinsert3" >LITECOIN (LTC)</option>
<option value="ZEC" id="selectcurinsert4" >ZCASH (ZEC)</option>
<option value="XMR" id="selectcurinsert5" >MONERO (XMR)</option>
</select>
<!-- </button> -->
<button type="submit" name="smbtcur" id="sbmtcurinsert" onclick="convert()">
Convert
</button>
<input type="value" id="received"/>
</body>
</html>
Any Help is appreciated.
And here is the Javascript Part:
JS:
var rates = [10500, 920, 220, 310, 460];
var BTCUSD = rates[0];
var ETHUSD = rates[1];
var LTCUSD = rates[2];
var XMRUSD = rates[3];
var ZECUSD = rates[4];
function convert(){
var x1 = document.getElementById("selectcurinsert1").value;
var x2 = document.getElementById("selectcurinsert2").value;
var x3 = document.getElementById("selectcurinsert3").value;
var x4 = document.getElementById("selectcurinsert4").value;
var x5 = document.getElementById("selectcurinsert5").value;
if (document.getElementById("selectcurinsert").value = x1)
{
function convertbtc()
{
z = BTCUSD;
x = document.getElementById("currencycoininsert").value;
document.getElementById("receivedmufg").value = x * z;
}
}
else if (document.getElementById("selectcurinsert").value = x2)
{
function converteth()
{
z = BTCUSD;
x = document.getElementById("currencycoininsert").value;
document.getElementById("receivedmufg").value = x * z;
}
}
else if (document.getElementById("selectcurinsert").value = x3)
{
function converteth()
{
z = BTCUSD;
x = document.getElementById("currencycoininsert").value;
document.getElementById("receivedmufg").value = x * z;
}
}
else if (document.getElementById("selectcurinsert").value = x4)
{
function converteth()
{
z = BTCUSD;
x = document.getElementById("currencycoininsert").value;
document.getElementById("receivedmufg").value = x * z;
}
}
else if (document.getElementById("selectcurinsert").value = x5)
{
function converteth()
{
z = BTCUSD;
x = document.getElementById("currencycoininsert").value;
document.getElementById("receivedmufg").value = x * z;
}
}
}
</script>
Any help is appreciated, hopefully this will turn up well.

In your convert function's definition you define other functions inside conditionals, but you're never actually calling those functions.
you can define converteth, etc. elsewhere and just call it like converteth() inside of the conditional.
Pseudocode:
function converteth () {
... converteth code ...
}
function convertbtc () {
... convertbtc code ...
}
function convert () {
... get element by id statements
if (document.getElementById("selectcurinsert").value = x1) {
convertbtc();
} ... other conditional statements ...
}
Also in your conditional statements you've used the assignment operator = instead of a logical operator to compare the two values. I assume you want to use === or ==.

Related

Why won't nothing show. Did I mess up my if statement?

So I have this script that get 2 prices, and then finds the sum of it, and then finds a percentage of the sum depending on what state you choose, and then it adds the percentage. This script worked kind of fine without the if..else statement, but now that I added it, it won't work. Please help. Script:
<!DOCTYPE html>
<html>
<head>
<title>Test!!!!!</title>
<style>
</style>
</head>
<body>
<h2> Price checker </h2>
<input id = "x" type = "number" placeholder = "Price 1" >
<br><br><br>
<input id = "y" type = "number" placeholder = "Price 2" >
<br><br><br>
<select id="s">
<option value="NJ">NJ</option>
<option value="NY">NY</option>
<option value="PA">PA</option>
<option value="FL">FL</option>
</select>
<br><br><br>
<button onclick = "theFunction()">Calculate price</button>
<p id = "d"></p>
<script>
function theFunction() {
var x = document.getElementById("x").value
var y = document.getElementById("y").value
var z = +x + +y
var v = document.getElementById("s").value
var percentToGet;
var percent;
var final;
if v == "NJ" {
var percentToGet = 6.625;
var percent = (percentToGet / 100) * z;
var final = +percent + +z
} else if v == "NY" {
var percentToGet = 4;
var percent = (percentToGet / 100) * z;
var final = +percent + +z
}else if v == "PA" {
var percentToGet = 2;
var percent = (percentToGet / 100) * z;
var final = +percent + +z
} else if v == "FL" {
var percentToGet = 6;
var percent = (percentToGet / 100) * z;
var final = +percent + +z
}
document.getElementById("d").innerHTML = z + " " + final
}
</script>
</body>
</html>
Your if statement in the script tag ,is javascript code which is not having the parentheses.
It will be => if (v == "NJ") { }
Refer this MDN Web Docs to learn more if...else

when I use the event.keycode to execute my function it dont execute but if put an alert it works

function multiplicacion() {
var x = document.getElementById("v1").value;
var y = document.getElementById("v2").value;
var z = (x * y)
document.getElementById("salida").innerHTML = z
}
function division() {
var x = document.getElementById("v1").value;
var y = document.getElementById("v2").value;
var z = (x / y)
document.getElementById("salida").innerHTML = z
}
function suma() {
var x = parseInt(document.getElementById("v1").value);
var y = parseInt(document.getElementById("v2").value);
var z
z = x + y
document.getElementById("salida").innerHTML = z
}
function resta() {
var x = parseInt(document.getElementById("v1").value);
var y = parseInt(document.getElementById("v2").value);
var z
z = x - y
document.getElementById("salida").innerHTML = z
}
function PulsarTecla(event){
tecla = event.keyCode;
if(tecla == 189){
resta
}
}
window.onkeydown=PulsarTecla;
<html>
<head></head>
<body>
<div align = "center">
<font size = "5" id = "salida"> 0 </font>
<input type="text" name="v1" id="v1">
<input type="text" name="v2" id="v2"><br><br>
<button id="multiplicacion" onclick="multiplicacion()" class="button1">X</button>
<button id="division" onclick="division()" class="button3">/</button><br><br>
<button id="suma" onclick="suma()" class="suma">+</button>
<button id="resta" onclick="resta()" class="resta">-</button>
</div>
</body>
</html>
the problem is that I try to execute the "resta" function with the slash but it dont works, it only works with the buttons, I´ve only try this with the "resta" function
First I try to execute an alert with the slash and it works but no with the function
There are missing brackets in the function PulsarTecla. There is an identifier of another function resta but no brackets so this function isn't actually called.
This code should work:
function PulsarTecla(event){
tecla = event.keyCode;
if(tecla == 189){
resta()
}
}

How to make a value show up?

Im trying to make a a simple form to calculate my client's services. I want to make a function that adds up the services' values and show them right away without clicking in the button. I have no idea where I'm wrong.
<p>In total: <span id="number"></span></p>
<script>
var kilometry = document.getElementById("kilom").value;
var DoSto = document.getElementById("myRange1").value;
var OdSto = document.getElementById("myRange2").value;
var z = (+kilometry*2.5) + (+DoSto*20) + (+OdSto*80);
var x = document.getElementById("number");
x.innerHTML = z.value;
z.oninput = function() {
x.innerHTML = this.value;
}
</script>
Can you explain why it doesnt work? smh
Your script is running immediately and once only. You need to introduce an event that occurs each time you change the value of an input.
<p>In total: <span id="number"></span></p>
<input id="kilom" onchange=calculateTotal()>
<input id="myRange1" onchange=calculateTotal()>
<input id="myRange2" onchange=calculateTotal()>
<script>
function calculateTotal() {
var kilometry = document.getElementById("kilom").value;
var DoSto = document.getElementById("myRange1").value;
var OdSto = document.getElementById("myRange2").value;
var z = (+kilometry*2.5) + (+DoSto*20) + (+OdSto*80);
var x = document.getElementById("number");
x.innerHTML = z;
}
</script>
function calculateTotal() {
var kilometry = document.getElementById("kilom").value;
var DoSto = document.getElementById("myRange1").value;
var OdSto = document.getElementById("myRange2").value;
var z = (+kilometry*2.5) + (+DoSto*20) + (+OdSto*80);
var x = document.getElementById("number");
x.innerHTML = z;
}
<p>In total: <span id="number"></span></p>
<input id="kilom" onchange=calculateTotal()>
<input id="myRange1" onchange=calculateTotal()>
<input id="myRange2" onchange=calculateTotal()>
The variable z is not an input element. It is a number. So you cannot access .value or .oninput on that variable.
So in that regard. This..
x.innerHTML = z.value;
Should be..
x.innerHTML = z;
And I guess you want the value in the x tag to update in realtime? You need to add event listeners to all the input elements you use to calculate the z variable.
So that means the following code..
z.oninput = function() {
x.innerHTML = this.value;
}
can be rewritten as..
function calculateZ() {
var z = (+kilometry*2.5) + (+DoSto*20) + (+OdSto*80);
x.textContent = z; // x.innerHTML = z; works as well, but is less safe.
}
// Triggers when changing the value in the kilom, myRange1 and myRange2 input tags
document.getElementById("kilom").addEventListener('change', calculateZ);
document.getElementById("myRange1").addEventListener('change', calculateZ);
document.getElementById("myRange2").addEventListener('change', calculateZ);

Unable to call function within jQuery

I am trying to call a function in this javascript code. My code needs to check for whether the user selects var num, var letters and var symbols to be true or false. In the code, I preset the values but I still search the object choices for the variables that are true and push it into the array choices_made. However, since I need to randomly choose the order in which the num, letters and symbols appear, I randomly choose the class based on the Math.random(). However, it doesn't show me the alert(jumbled_result) afterwards.
http://jsfiddle.net/bdaxtv2g/1/
HTML
<input id="num" type="text" placeholder="Enter desired length">
<br/><br/>
<input id="press" type="button" value="jumble it up">
JS
$(document).ready(function(){
var fns={};
$('#press').click(function(){
var length = parseInt($('#num').val());
var num = true;
var letters = true;
var symbols = false;
gen(length, num, letters, symbols);
});
function gen(len, num, letters, sym){
var choices = {
1:num,
2:letters,
3:sym
};
var choice_made = ['0'];
var choice = 0;
var jumbled_result = '';
for(x in choices){
if(choices[x]==true){
choice_made.push(x);
}
}
for(i=0;i<len;i++){
var funName = 'choice';
choice = Math.round(Math.random() * (choice_made.length-1));
funName += choice_made[choice];
jumbled_result = fns[funName](jumbled_result);
}
alert(jumbled_result);
}
fns.choice0 = function choice0(jumbled_result){
var numbers = '0123456789';
return jumbled_result += numbers.charAt(Math.round(Math.random() * numbers.length));
}
fns.choice1 = function choice1(jumbled_result) {
var alpha = 'abcdefghijklmnopqrstuvwxyz';
return jumbled_result += alpha.charAt(Math.round(Math.random() * alpha.length));
}
});
You never declare functions within document.ready of jQuery. The functions should be declared during the first run(unless in special cases).
Here is a working code made out of your code. What I have done is just removed your functions out of document.ready event.
$(document).ready(function() {
$('#press').click(function() {
var length = parseInt($('#num').val());
var num = true;
var letters = true;
var symbols = false;
gen(length, num, letters, symbols);
});
});
var fns = {};
function gen(len, num, letters, sym) {
var choices = {
1: num,
2: letters,
3: sym
};
var choice_made = ['0'];
var choice = 0;
var jumbled_result = '';
for (x in choices) {
if (choices[x] == true) {
choice_made.push(x);
}
}
for (i = 0; i < len; i++) {
var funName = 'choice';
choice = Math.round(Math.random() * (choice_made.length - 1));
funName += choice_made[choice];
jumbled_result = fns[funName](jumbled_result);
}
alert(jumbled_result);
}
fns.choice0 = function choice0(jumbled_result) {
var numbers = '0123456789';
return jumbled_result += numbers.charAt(Math.round(Math.random() * numbers.length));
}
fns.choice1 = function choice1(jumbled_result) {
var alpha = 'abcdefghijklmnopqrstuvwxyz';
return jumbled_result += alpha.charAt(Math.round(Math.random() * alpha.length));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="num" type="text" placeholder="Enter desired length">
<br/>
<br/>
<input id="press" type="button" value="jumble it up">
Its because of the way the object choices have been intitialized.. Try this..
var choices = {
0:num,
1:letters,
2:sym
};
And also
var choice_made = [];
JS fiddle link : http://jsfiddle.net/8dw7nvr7/2/

getElementById not working - not returning anything at all

What the code is supposed to do:
Get user input (amount of car loan)
Have user click on button
Spit out monthly car pmt
Here is the code:
<script type="text/javascript">
var myObject = {
myFunction: function(){
return document.getElementById("carDebt");
},
h: function(){
var carLoan=myFunction();
var RATE12 = 0.005;
var TIMERATE = 0.25862780376;
return Math.round((carLoan * RATE12) / TIMERATE);
}
writeIt: function(){
var g = myObject.h();
var xyz = g;
var abc = 2;
var efg = 3;
var somearray = [xyz,abc,efg];
var z = 0;
for (i=0; i<somearray.length; i++) {
z += somearray[i];
};
document.getElementById("result").innerHTML=z;
}
};
</script>
<body>
<form>
Amt Due on Car Loan: <input type="number" id="carDebt">
</form>
<form>
<input type="button" onclick="myObject.writeIt()" value="Click here when done" id="button1">
</form>
<p id="result">Results Here</p>
</body>
I am not getting anything, as in, not even NaN or undefined. I am probably missing something obvious but I have tried a thousand different ways!
This line might be the culprit:
var carLoan=myFunction();
Try referencing the object it's under instead:
var carLoan = myObject.myFunction();
Furthermore, that function is returning the DOM element rather than the value of the DOM element. You'll probably want to edit the function to return the value:
myFunction: function(){
return document.getElementById("carDebt").value;
}
I also noticed that you have what appears to be too many tags. Do you mean to have two "forms"?
Seems the answers are in already putting together the above, ie fix typo, get value not element, have a "result" element to output to. I also added "this" to the myFunction call.
My version:
<script type="text/javascript">
var myObject =
{
myFunction: function()
{
return document.getElementById("carDebt").value;
},
h: function()
{
var carLoan = this.myFunction();
var RATE12 = 0.005;
var TIMERATE = 0.25862780376;
return Math.round((carLoan * RATE12) / TIMERATE);
},
writeIt: function()
{
var g = myObject.h();
var xyz = g;
var abc = 2;
var efg = 3;
var somearray = [xyz,abc,efg];
var z = 0;
for(i=0; i<somearray.length; i++)
{
z += somearray[i];
};
document.getElementById("result").innerHTML=z;
}
};
</script>
</head>
<body>
<form> Amt Due on Car Loan: <input type="number" id="carDebt"> </form>
<form> <input type="button" onclick="myObject.writeIt()" value="Click here when done" id="button1"> </form>
<div><p id="result"></p></div>
</body>

Categories

Resources