This question already has answers here:
How do I get the value of text input field using JavaScript?
(16 answers)
Closed 1 year ago.
So i'm trying to create an html input based calculator, it just keeps returning *This is a snippet added on later, but How would i do this in jQuery *
[object HTMLInputElement][object HTMLInputElement]
so heres my code
<html>
<head>
</head>
<body>
<input id="nume" type="number">
<input id="num" type="number">
<input type="button" onclick="MyFunction()" value="Click to calculate">
<p id="f">Value Is: 0</p>
</body>
<script>
const something = document.getElementById("nume")
const somethingElse = document.getElementById("num")
function MyFunction(){
var values = something + somethingElse;
document.getElementById("f").innerHTML = "Value Is: " + values
}
</script>
you need to get value first. document.getElementById("nume").value You can do it this way
function MyFunction(){
var values = Number(document.getElementById("nume").value) + Number(document.getElementById("num").value);
document.getElementById("f").innerHTML = "Value Is: " + values
}
<html>
<head>
</head>
<body>
<input id="nume" type="number">
<input id="num" type="number">
<input type="button" onclick="MyFunction()" value="Click to calculate">
<p id="f">Value Is: 0</p>
</body>
You have to use Number(document.getElementById("nume").value) to get the actual number. by just using document.getElementById("nume") you are getting the HTML DOM element and not the element's value.
You are almost correct at your end just need few updates...
<!--<html>
<head>
</head>
<body>
<input id="nume" type="number">
<input id="num" type="number">
<input type="button" onclick="MyFunction()" value="Click to calculate">
<p id="f">Value Is: 0</p>
</body>
<script>
const something = document.getElementById("nume")
const somethingElse = document.getElementById("num")
function MyFunction(){
var values = something + somethingElse;
document.getElementById("f").innerHTML = "Value Is: " + values
}
</script>-->
<html>
<head>
</head>
<body>
<input id="nume" type="number">
<input id="num" type="number">
<input type="button" onclick="MyFunction()" value="Click to calculate">
<p id="f">Value Is: 0</p>
</body>
<script>
const something = document.getElementById("nume")
const somethingElse = document.getElementById("num")
function MyFunction(){
var values = parseFloat(something.value) + parseFloat(somethingElse.value);
document.getElementById("f").innerHTML = "Value Is: " + values
}
</script>
You can use given code...which is not commented over here.
That is because the statement
const something = document.getElementById("num")
will return an html element in document with the id that you have given in () rounded brackets so if you are making an calculator you can use this statement...
something.value
because it will return the string value which is stored inside the html element in document with the id that you have given in () rounded brackets....now the problem is that you want to add those right?
so just use the math function parseFloat like this...
var values = parseFloat(something.value) + parseFloat(somethingElse.value);
so that you can cast them to float ... you can use parseInt also but i suggest to use the above statement..Now you can make a calculator easily...
Isn't it right? :)
Firstly your code has the two variables which should be inside the function
Secondly to access the value attribute of <input>
thirdly I got number as string so i converted form string to number using Number();
<html>
<head>
</head>
<body>
<input id="nume" type="number"><br/>
<input id="num" type="number"><br/>
<input type="button" onclick="MyFunction()" value="Click to calculate"><br/>
<p id="f">Value Is: 0</p>
</body>
<script>
function MyFunction(){
var something=document.getElementById("nume").value;
var somethingElse = document.getElementById("num").value;
document.getElementById("f").innerHTML=Number(something)+Number(somethingElse);
}
</script>
Related
I know that this might be simple, but I was trying to create some sort of system in HTML using Javascript, that when you input a number in the input tag it multiplies it with another number, them outputs the number in another input tag. But for some strange reason, I can't really find out how to do it
<!DOCTYPE html>
<html>
<head>
<script>
var test = document.getElementById('input');
function myFunction() {
document.getElementById('output').value = test + 20;
}
</script>
</head>
<body>
Input: <input id="input">
<button onclick="myFunction()">Submit</button>
<br><br>
<input id="output" type="text">
</body>
</html>
Btw, I don't know how to use JQuery or those types of things, so could you write it in simple HTML?
You should set the value property of an input rather than innerHTML:
Also use parseInt so that you can sum the numbers as input.value will be a string.
function myFunction() {
document.getElementById('output').value = parseInt(test.value, 10) + 20;
}
Here is a working demo: https://jsfiddle.net/usmanmunir/1uv9cqys/8/
function myFunction() {
var test = document.getElementById('input').value;
document.getElementById('output').value = parseInt(test) * 20;
}
Input: <input id="input" type="number">
<button onclick="myFunction()">Submit</button>
<br><br>
Final : <input id="output" type="text">
So I am fairly new to Javascript, and I am working on some code that converts decimal numbers to binary numbers. However when I run this program, I can't seem to get the output I am looking for. The best I have done was get my function to output an exact number already inside of the function, when I am instead trying to get an output that is generated from any number typed into the textbox? I'm not entirely sure where I am going wrong with this. I feel like there is something I am clearly missing, but I can't seem to grasp exactly what it is. I've been using codecademy and w3schools to gain more knowledge of JavaScript, but if anyone has any other resources that helped them when they first started programming that would be great!
<!DOCTYPE html>
<html>
<body>
<p>Convert from Decimal to Binary:</p>
<form method = "post">
<p id = "demo">
<label for="decNum"></label>
<input name="decNum" type="text">
<button onclick="toBinary()">Enter</button>
</p>
</form>
<script>
function toBinary() {
document.getElementById("demo").innerHTML =
parseInt(num,10).toString(2);
}
</script>
</body>
</html>
It's because num doesn't have a value.
Try this:
<p>Convert from Decimal to Binary:</p>
<form method = "post">
<p id = "demo">
<label for="decNum"></label>
<input name="decNum" type="text" id="decNum">
<button onclick="toBinary()">Enter</button>
</p>
</form>
<script>
function toBinary() {
var num = document.getElementById("decNum").value;
document.getElementById("demo").innerHTML =
parseInt(num, 10).toString(2);
}
</script>
There are a few things I would change. First off, I would keep non form elements outside of the form. The major issue is that num doesn't have a value, but to ensure it works you will also want to take the event and use event.preventDefault() to make sure it doesn't submit the form. Try:
<!DOCTYPE html>
<html>
<body>
<p>Convert from Decimal to Binary:</p>
<form method="post">
<label for="decNum"></label>
<input id="field" name="decNum" type="text">
<button onclick="toBinary(event)">Enter</button>
</form>
<p id="demo"></p>
<script>
function toBinary(event) {
event.preventDefault();
var value = document.getElementById('field').value;
document.getElementById("demo").innerHTML =
parseInt(Number(value), 10).toString(2);
}
</script>
</body>
</html>
You're not defining num.
Grab it from the input as such:
function toBinary() {
const num = document.getElementById("textInput").value;
document.getElementById("demo").innerHTML = parseInt(Number(num),10).toString(2);
}
<p id = "demo"></p>
<label for="decNum"></label>
<input name="decNum" type="text" id="textInput">
<button onclick="toBinary()">Enter</button>
Let's say I have a variable called x in javascript. How can I set the value of a text input (HTML) to that variable? For example:
The value of the input will now be Swag
<input type="text" value="Swag" />
But if I want the value to be a javascript variable? How do I do? Something like this? (I am just guessing, trying to make my point clear)
<input type="text" value="variable.x" />
You can set it in your javascript code like:
<input id="myInput" type="text" value="Swag" />
<script>
var test = "test";
document.getElementById("myInput").value = test;
</script>
This is a better solution and will probably avoid confusion for newbies...
<!DOCTYPE html>
<html>
<body>
<h1>Input and Display Message</h1>
<p>Enter a message</p>
<input type="text" id="msg" ><br>
<button onclick="displayMessage()">Click me</button>
<p id="showinputhere"></p>
<script>
function displayMessage(){
let themsg = document.getElementById("msg").value;
if (themsg){
document.getElementById("showinputhere").innerHTML = themsg;
}
else{
document.getElementById("showinputhere").innerHTML = "No message set";
}
}
</script>
</body>
</html>
I am trying to make a form with one text input and a submit button. What I want the script to do is take the text after I click submit and store it as a value. After that, if I type something else (without refreshing the page) and click submit store the input as another value. This process can be done one hunded times so I will have 100 different values. What I also want to do with this values is put them in a new array.So:
var AllValues = [""+Val1+"",""+Val2+"",""+Val3"",..,""+Val99+"",""+Val100""];.
The code I have managed to write untill now is this but it won't actually help you:
<!DOCTYPE html>
<html>
<body>
<form id="form1">
Type the words here: <input type="text" name="fname"><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<input type="button" onclick="myFunction2()" value="Print all inserted words at array">
<p id="demo"></p>
<script>
function myFunction() {
}
function myFunction2() {
var AllValues = [""+Val1+"",""+Val2+"",""+Val3"",..,""+Val99+"",""+Val100""];
document.getElementById("demo").innerHTML = AllValues;
}
</script>
</body>
</html>
I am asking this question after trying a lot of things which didn't worked and I know that the script will work only if I use HTML local storage but I don't have the knowledge to do it even if I did a lot of research on this topic. I dont want to only store the values but I want to get them inside a new Array. I am making the question a bit more general as always in order to help as many as possible. Could you please help me? Thanks in advance.
You had several issues, the main is that you have to provide the "id" attribute for the input text named "fname".
Next you have to store the AllValues array in context visible by two declared functions (in this case, the global context).
<!DOCTYPE html>
<html>
<body>
<form id="form1">
Type the words here: <input type="text" name="fname" id="fname"><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<input type="button" onclick="myFunction2()" value="Print all inserted words at array">
<p id="demo"></p>
<script>
var AllValues = [];
function myFunction() {
var fname = document.getElementById("fname").value;
AllValues.push(fname);
}
function myFunction2() {
document.getElementById("demo").innerHTML = AllValues;
}
</script>
</body>
</html>
Try also the immediate function to avoid storing variables in global context. The code that I paste is not very clean of course, but working :)
For a very basic way of doing this, try the following:
HTML:
<form id="form1">Type the words here:
<input type="text" name="fname">
<br>
<input type="button" value="Submit" class="submit">
</form>
<input type="button" class="show-button" value="Print all inserted words at array">
<p id="demo"></p>
JS:
var values = new Array();
$(".submit").on("click", function () {
values.push($('input[name="fname"]').val());
});
$(".show-button").on("click", function () {
$("#demo").html(values.join("<br>"));
});
Fiddle here: http://jsfiddle.net/5z4g04js/2/
My answer:
<form id="form1">
Type the words here: <input id="words" type="text" name="fname"><br>
<input type="button" id="submitWords" value="Submit">
</form>
<input type="button" id="printWords" value="Print all inserted words at array">
<p id="demo"></p>
<script>
var arrWords = [];
var btnSubmit = document.getElementById('submitWords');
var btnPrint = document.getElementById('printWords');
var demo = document.getElementById('demo');
btnSubmit.onclick = function() {
var words = document.getElementById('words').value;
arrWords = words.split(' ');
console.log(arrWords);
}
btnPrint.onclick = function() {
for(var i = 0; i < arrWords.length; i++) {
demo.innerHTML += arrWords[i]+"<br>";
}
}
</script>
</body>
</html>
You could use jquery to do that:
var all_values =[];
function myFunction() {
var temp_val = $("#fname").val();
alert(temp_val);
all_values.push(temp_val);
}
function myFunction2() {
alert(all_values);
}
<form id="form1">
Type the words here: <input type="text" name="fname" id="fname"><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<input type="button" onclick="myFunction2()" value="Print all inserted words at array">
<p id="demo"></p>
working demo
p.s. edited jquery answer with more changes. working demo
Using this getAllValues(name) function, you can return the values of any element with the name of 'name'.
function getAllValues(name) {
var nameMatches=document.getElementsByName(name);
var AllValues=[];
for (var i=0; i<nameMatches.length; i++) {
AllValues.push(nameMatches[i].name);
AllValues.push(nameMatches[i].value);
}
return AllValues;
}
To call this you would use getAllValues('fname').
I am new to HTML and Javascript. I am trying to experiment on invoking C++ method from Javascript using QT. However, this question is not related to QT.
I have a form with two number inputs. I want to add a third box where the results will be displayed. How can I do so? here is my html file. I don't want all the items to be gone. I want the user to see the multilicant A, mulitplicant B, and the result to be displayed in third text box the form. Also, a reset button to reset the form.
<html>
<head>
<script>
function Multiply()
{
var result = myoperations.sumOfNumbers(document.forms["DEMO_FORM"]["Multiplicant_A"].value, document.forms["DEMO_FORM"]["Multiplicant_B"].value);
document.write(result);
}
</script>
</head>
<body>
<form name="DEMO_FORM">
Multiplicant A: <input type="number" name="Multiplicant_A"><br>
Multiplicant B: <input type="number" name="Multiplicant_B"><br>
<input type="button" value="Multiplication_compute_on_C++" onclick="Multiply()">
</form>
</body>
</html>
This is a way to start:
Demo: http://jsfiddle.net/Q3YV9/
<html>
<head>
<script>
function Multiply()
{
var res = parseFloat(document.getElementById("anr").value) * parseFloat(document.getElementById("bnr").value)
document.getElementById("cnr").value = res;
}
</script>
</head>
<body>
<form name="DEMO_FORM">
Multiplicant A: <input type="number" id="anr" name="Multiplicant_A"><br>
Multiplicant B: <input type="number" id="bnr" name="Multiplicant_B"><br>
Result C: <input type="number" id="cnr" name="Multiplicant_C"><br>
<input type="button" value="Multiplication_compute_on_C++" onclick="Multiply()">
</form>
</body>
</html>
If you don't want the result box predefined, use document.createElement('input') to add it to the DOM.
Sample:
function Multiply()
{
var res = parseFloat(document.getElementById("anr").value) * parseFloat(document.getElementById("bnr").value)
//document.getElementById("cnr").value = res;
var newinput = document.createElement('input');
newinput.setAttribute('value', res);
document.forms["DEMO_FORM"].appendChild(newinput);
}
And this demo shows how to add the input result anywhere in the document:
http://jsfiddle.net/Q3YV9/3/
Simplest is to put in an answer box using a div tag
<html>
<head>
<script>
function Multiply()
{
var result = myoperations.sumOfNumbers(document.forms["DEMO_FORM"]["Multiplicant_A"].value, document.forms["DEMO_FORM"]["Multiplicant_B"].value);
document.getElementById('answerbox').innerHTML=result;
}
</script>
</head>
<body>
<form name="DEMO_FORM">
Multiplicant A: <input type="number" name="Multiplicant_A"><br>
Multiplicant B: <input type="number" name="Multiplicant_B"><br>
<input type="button" value="Multiplication_compute_on_C++" onclick="Multiply()">
</form>
<div id='answerbox'><div>
</body>
</html>
By the way type="number" is new in HTML5 for previous versions use type="text" and then do a parseInt on the value for an integer and parseFloat on the value for a decimal number.