I am making a page on a website that will take in a users USD value and then convert it to EURO, using an onclick button command.
I can not get the onclick command to show the converted value.
function usdtoeu() {
let USD = document.getElementById("EX").innerHTML;
var EUO = .92;
document.getElementById("sum").innerHTML = USD * EUO;
}
<h1>Time to convert Usd to Euro</h1>
<p id="demo"></p>
<form name="mathe">
Enter USD: <input type="text" id="EX" size="10" />
<p/>
<input type="button" value="Get the converted rate" onclick=" usdtoeu()"> </br>
</br>
The rate is: <input type="text" id="sum" size="10" />
I think I am missing a printing value but I am not sure.
<input> elements don't have an innerHTML, they have a value:
function usdtoeu() {
let USD = document.getElementById("EX").value;
var EUO = .92;
document.getElementById("sum").value = USD * EUO;
}
<h1>Time to convert Usd to Euro</h1>
<p id="demo"></p>
<form name="mathe">
Enter USD: <input type="text" id="EX" size="10" />
<p/>
<input type="button" value="Get the converted rate" onclick=" usdtoeu()"> </br>
</br>
The rate is: <input type="text" id="sum" size="10" />
Related
I need to put in a certain amount of rands and get back euro, pound, and dollar.
The rest of my code does have the link to the javascript file. I've only put the dollar() function in for now because I was at least trying to get one to work but it didn't so I need help.
function dollar() {
let money = document.getElementbyId("rand").value;
const $ = 15.5734;
document.getElementById('result').innerHTML = $ * money;
}
<form>
Rand: <input type="number" id="rand">
<input id="dollar" type="button" onclick="dollar()" value="dollar"/>
<input id="euro" type="button" onclick="euro()" value="euro">
<input id ="pound" type="button" onclick="pound()" value="pound">
</form>
<p> result is: <span id="result"></span> </p>
You just needed to change function name and change document.getElementbyId to document.getElementById
<form>
Rand: <input type="number" id="rand">
<input id="dollar" type="button" onclick="todollar()" value="dollar"/>
<input id="euro" type="button" onclick="euro()" value="euro">
<input id ="pound" type="button" onclick="pound()" value="pound">
</form>
<p> result is: <span id="result"></span> </p>
<script>
function todollar() {
let money = document.getElementById("rand").value;
const $ = 15.5734;
document.getElementById('result').innerHTML = $ * money;
}
</script>
I tried to validate user input whether user input is a number or string by using isNaN or Type but it is not working. I wrote the if statement inside my function to validate user inputs. I want to user to prompt a number only, not a string. If user input is a string, I would like to pop up an alert to the user.
Can anyone can spot any mistake on my code? Either I put the code incorrectly or I missed something.
function updateTotal(){
var total = 0;
var list = document.getElementsByClassName('input');
var values = [];
for (var i = 0; i < list.length; i++) {
values.push(parseFloat(list[i].value));
}
total = values.reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
});
if (isNaN(list)) {
alert("Error on input");
}
avgMarks = total / 5;
document.getElementById("total").value = total;
document.getElementById("display").value = avgMarks;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ordering form</title>
</head>
<body>
<h1>Get marks</h1>
<div>
<form id="form" method="post">
<label for="marks">Enter your 5 marks: </label><br>
<p>Mark 1</p>
<input type="text" class='input' value="0" onchange='updateTotal();'><br>
<p>Mark 2</p>
<input type="text" class='input' value="0" onchange='updateTotal();'><br>
<p>Mark 2</p>
<input type="text" class='input' value="0" onchange='updateTotal();'><br>
<p>Mark 4</p>
<input type="text" class='input' value="0" onchange='updateTotal();'><br>
<p>Mark 5</p>
<input type="text" class='input' value="0" onchange='updateTotal();'><br>
<p>Total 5 marks : </p>
<input type="text" name="totalMarks" id="total" value=""><br>
<p>The average of your marks is : </p>
<input type="text" name="avgMarks" id="display" value="">
<br>
</form>
</div>
<!--JavaScript-->
<script src="debug1_with_error.js"></script>
</body>
</html>
The variable list is a NodeList of elements, not what you want to test. The values you want to test are each individual value, one at a time, in your values array, or just isNaN(total), because NaN would come through in the total if any one value were NaN.
<!DOCTYPE html>
<head lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</head>
<body>
<section><b><b>
<form action="" target="_blank">
Bill No: <input type="text" name="bill no" size="">
<input type="submit" class="button" value="Add">
<input type="submit" class="button" value="Complete all entries">
<br><br>
Bill Details: <input type="text" name="bill no" size="50">
<br><br>
Amount: <input type="text" name="amount" pattern="[0-9]+" title="please enter amount"size="53">
<br><br>
<textarea rows="5" cols="50"></textarea>
<br><br>
<label for="To Pay">To Pay:</label>
<select name="mydropdown" id="To Pay">
<option value="Director">Director</option>
<option value="Cheif">Cheif</option>
<option value="RPC">RPC</option></select>
Cheque No: <input type="text" name="Cheque No">
<br><br>
Amount: <input type="text" name="amount" pattern="[0-9]+" title="please enter amount"size="15">
Date: <input type="date" placeholder="dd-mm-yyyy" name="Dated">
<input type="submit" class="button" value="Ok">
</form>
</article>
</section>
</body>
</html>
i want to crate a form in which i have two buttons on the top when i click on add button then it will be work as bill ,details bill no and amount = textbox(textarea) then these all entry are shown in the textarea and add another entry that all are show as a tablewhen when i complete my all entries i click on complete all entries and than total amount off all entries are show on the bottom of textarea and this total amount automatically show in the bottom amount field. please suggest how can i do this task
As you know the usage of jquery, so I use jquery to get the element:
$(document).ready(function(){
var total=0;
var temp="";
var tempResult=$("#tempResult");
$("#btn1").click(function(){
var billNo=$("#billNo").val();
var billDetails=$("#billDetails").val();
var amnt=$("#amnt").val();
tempResult.val(tempResult.val()+ billNo + "-" +billDetails+ "-" +amnt+"\n");
total+=parseFloat(amnt);
});
$("#btn2").click(function(){
tempResult.val(tempResult.val()+ total);
$("#totalAmount").val(total);
});
});
And I change :
<input type="text" name="amount" pattern="[0-9]+" title="please enter amount"size="15">
to
<input type="text" name="amount" id="totalAmount" pattern="[0-9]+" title="please enter amount"size="15">
That all.
First, you need to give an id for every element for example:
<input type="text" id="billNo" size="">
<textarea id="tempResult" rows="5" cols="50"></textarea>
And then add function to capture the button click event.
Change the following HTML:
<input type="submit" class="button" value="Add">
To:
<input type="submit" class="button" value="Add" onclick="addEntry()">
after that add a function:
function addEntry()
{
}
In this function,using the following coding to get the value of the element:
var billNo=document.getElementById("billNo").value;
Finally, using the following coding to write what you want to add to textarea:
var tempResult=document.getElementById("tempResult");
tempResult.value=billNo
For append value to textarea:
tempResult.value+=*what you want to add to textarea*
To parse input value as an integer, you need to use parseInt function, for decimal no. you may use parseFloat function.
Now, you have all the ingredient to complete your function.
For the total amount, ha ha, let you try first.
I am enrolled in an online class and I keep reading the section of my book for js inclusion and I can't figure this out. Could someone please explain to me what I am doing wrong. Im trying to call the function to take in the weight and display the calculations back in the form text boxes. I cant find anything on the internet like this or explains how it works. Why can't this just be like C++ :(
<!DOCTYPE html>
<html>
<script>
function Weight()
{
var mercury = earth*(.378);
var venus = earth*(.907);
var mars = earth*(.377);
var jupiter = earth*(2.364);
var saturn = earth*(.916);
var uranus = earth*(.889);
var neptune = earth*(1.125);
var pluto = earth*(.067);
var sun = earth*(27.072);
var moon = earth*(.166);
}
</script>
<body>
<form action="javascript:Weight(earth);">
Enter Your Weight on Earth:<br>
<input type="text" name="earth">
<br><br>
Mercury:<br>
<input type="text" name="mercury">
<br>
Venus:<br>
<input type="text" name="venus">
<br>
Mars:<br>
<input type="text" name="mars">
<br>
Jupiter:<br>
<input type="text" name="jupiter">
<br>
Saturn:<br>
<input type="text" name="saturn">
<br>
Uranus:<br>
<input type="text" name="uranus">
<br>
Neptune:<br>
<input type="text" name="neptune">
<br>
Pluto:<br>
<input type="text" name="pluto">
<br>
Sun:<br>
<input type="text" name="sun">
<br>
Moon:<br>
<input type="text" name="moon">
<br>
<input type="submit" value="Calculate">
</form>
</body>
</html>
Here is a working demo:
Created an array planetArray containing the planets information
Added an attribute id to the submit input
Attached click event to submitButton. In the function get the earth input value and iterate over planetArray and calculate the weight value respectively on planets
var planetsArray = [{name: "mercury",weight: 0.378}, {name: "venus",weight: 0.907}, {name: "mars",weight: 0.377}, {name: "jupiter",weight: 2.364}, {name: "saturn",weight: 0.916}, {name: "uranus",weight: 0.889}, {name: "neptune",weight: 1.125}, {name: "pluto",weight: 0.067}, {name: "sun",weight:27.072}, {name: "moon",weight: 0.166}],
submitButton = document.getElementById('submit');
// Attach click event
submitButton.onclick = function (e) {
e.preventDefault();
var earth = document.getElementsByName('earth')[0];
planetsArray.forEach(function (p) {
var elem = document.getElementsByName(p.name)[0],
weight = p.weight * +earth.value;
elem.value = weight.toFixed(2);
});
};
<form action="javascript:Weight(earth);">
Enter Your Weight on Earth:<br>
<input type="text" name="earth">
<br><br>
Mercury:<br>
<input type="text" name="mercury">
<br>
Venus:<br>
<input type="text" name="venus">
<br>
Mars:<br>
<input type="text" name="mars">
<br>
Jupiter:<br>
<input type="text" name="jupiter">
<br>
Saturn:<br>
<input type="text" name="saturn">
<br>
Uranus:<br>
<input type="text" name="uranus">
<br>
Neptune:<br>
<input type="text" name="neptune">
<br>
Pluto:<br>
<input type="text" name="pluto">
<br>
Sun:<br>
<input type="text" name="sun">
<br>
Moon:<br>
<input type="text" name="moon">
<br>
<input type="submit" value="Calculate" id="submit">
</form>
Hello javascript doesn't work in that way as you think.I can't teach you the whole thing here ,there are lot of information/articles in internet you may search them ,but I can suggest you a solution of what you wanted to do .Check the below code hope it helps
var earth=document.getElementById("earth");
var mercury=document.getElementById("mercury");
var venus=document.getElementById("venus");
var mars=document.getElementById("mars");
document.getElementById("button").onclick = function (e) {
e.preventDefault();
mercury.value=(earth.value) *(.378);
venus.value=(earth.value) *(.907);
mars.value=(earth.value) *(.377);
};
<form name ="my">
Enter Your Weight on Earth:<br>
<input type="text" id="earth" name="earth">
<br><br>
Mercury:<br>
<input type="text" id="mercury" name="mercury">
<br>
Venus:<br>
<input type="text" id="venus" name="venus">
<br>
Mars:<br>
<input type="text" id="mars" name="mars">
<br>
<input type="submit" id="button" value="Calculate">
</form>
I am creating a small webpage that will add two input fields together and place the result in another input field. This is what I have:
<html>
<head>
<title>Calculator</title>
<script type="text/javascript">
function add(){
var num1 = parseInt(document.calc.num1.value);
var num2 = parseInt(document.calc.num2.value);
var answer = (num1+num2);
document.getElementById('res').value = answer;
}
</script>
</HEAD>
<BODY>
<FORM NAME="calc">
<INPUT TYPE ="button" NAME="add" Value="+" onClick="add()">
<hr/>
<INPUT TYPE ="text" NAME="num1" Value="">
<INPUT TYPE ="text" NAME="num2" Value="">
<hr/>
<INPUT TYPE ="text" ID="res" NAME="result" VALUE="">
</FORM>
</BODY>
</HTML>
And I am getting the following error when I press the + button.
Uncaught TypeError: object is not a function
Try changing the function name from add to addNumbers or something like that.
onclick is the right attribute to handle click
onClick="add()"
Switch this bit to
onclick="add()"
The problem is the name of the function "add()", change the name and you will see that it will works!
HTML
<p>
<label for="field1">Field 1</label>
<input type="number" id="field1"/>
</p>
<p>
<label for="field2">Field 2</label>
<input type="number" id="field2"/>
</p>
<p>
<label for="total">Total</label>
<input readonly type="number" id="total"/>
</p>
<p>
<input type="button" id="calc" value="Calculate"/>
</p>
Javascript
Goes in a script tag in head.
function sumFields(fields) {
var total = 0;
// goes through each field and adds them to the total
for(var i=0,l=fields.length; i<l; i++)
{ total += parseInt(document.getElementById(fields[i]).value); }
document.getElementById('total').value = total;
}
function calc_click() {
// runs when the button is clicked
sumFields(['field1','field2']);
}
// main function
function init() {
// add button functionality
document.getElementById('calc').addEventListener('click',calc_click,false);
}
// fires when the DOM is loaded
document.addEventListener('DOMContentLoaded',init,false);