I got an assignment to multiply 2 matrices that the user inputs in the form text box like so:
[[1,2,3],[4,5,6],[7,8,9]]
So I created a var matrix1 and matrix2 that take the string values with a command document.getElementById("matrixID").value, but I don't know how to separate them in their own values, creating an array or a matrix of a variable (setting 1,2,3... as separate matrix/array values).
I'm not allowed to use JQuery (even though I don't think it's needed anyway). The current code looks like so:
<!DOCTYPE html>
<html>
<head>
<title>Matrix multiply</title>
<script type="text/javascript">
function calc(){
var matrix1string = document.getElementById("m1").value;
var matrix2string = document.getElementById("m2").value;
}
</script>
</head>
<body>
<form>
Matrix 1: <input type="text" id="m1" name="mat1" style="width: 500px"><br>
Matrix 2: <input type="text" id="m2" name="mat2" style="width: 500px"><br>
<input type="button" value="Calculate" onclick="calc();"><br><br>
-Result: <input type="text" id="rez" name="mat2" style="width: 500px" readonly>
</form>
</body>
</html>
You can do this:
var matrix1 = JSON.parse(matrix1string);
var matrix2 = JSON.parse(matrix2string);
Related
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>
I know this is continuously asked anew, and I've checked out different answers and tried different solutions but to no avail.
I just have to build a form that takes as input the cylinder ray and it height and then find the volume when we click a button.After finding it, shuold be cleared all fields with another button .The function to calculate volume it is working fine, but not the function that clear inputs.
Here is the code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript">
function llogarit() {
var rreze = parseInt(document.getElementById("val1").value);
var lartesi = parseInt(document.getElementById("val2").value);
var rez = document.getElementById("llogarit");
rez.value = (Math.PI * Math.pow(rreze, 2) * lartesi);
}
function fshij() {
document.getElementById("val1").value.clear();
document.getElementById("val2").value.clear();
document.getElementById("llogarit").value.clear();
}
</script>
</head>
<body>
<form>
<p>Vendos 2 vlera</p>
<p>rreze
<input type="text" name="rreze" id="val1" value="2" /></p>
<p> lartesi
<input type="text" name="lartesi" id="val2" value="2" /></p>
<p> Vellimi
<input type="text" name="vellimi" id="llogarit" value="" /></p>
<input type="button" onclick="llogarit()" value="llogarit" />
<input type="reset" value="fshij" onclick="fshij()" />
</body>
</html>
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
You can reset all form controls in one form with reset method.
// <form name="FORM_NAME">
document.forms["FORM_NAME"].reset();
Try the following:
document.getElementById('myInput').value = ''
Try the follow and add a div tag to the code
<div class="yourClass">
<button onclick="cdClear();" class="yourClass">Clear</button>
</div>
Note: In HTM, you can replace the class with id if you have already coded.
<script type="text/javascript">
function cdClear(){var a=document.getElementById("codes");a.value="",a.focus(),</script>
I want when a user enter number in the textbox and click set, textboxes appear based on the number he entered and this what I come up with but it is not working please help
<html>
<head>
<script>
function generate(){
var a=parseInt(document.getElementById("nochapter").value);
for (i=0;i<=a,i++){
document.getElementById("ch").innerHTML="<input type='text' >"}}
</script>
</head>
<body>
<h1> Prepare new assessment</h1>
<form>
No. of Chapter included <input type="text" id="nochapter" >
<input type ="button" value="set" onclick="generate()">
<div id="ch"></div>
Your code should be like this.
Is better append an input element to the div.
<head>
<script>
function generate() {
var a = parseInt(document.getElementById("nochapter").value);
var ch = document.getElementById("ch");
for (i = 0; i < a; i++) {
var input = document.createElement("input");
ch.appendChild(input);
}
}
</script>
</head>
<body>
<h1> Prepare new assessment</h1>
<form>
No. of Chapter included
<input type="text" id="nochapter" />
<input type="button" value="set" onclick="generate()" />
<div id="ch"></div>
</form>
</body>
There is small glitch in your written code
for (i=0;i<=a,i++) --> for (i=0;i<=a;i++)
even if you change that it will generate only one text box because you are replacing innerHTML for every iteration. so prepare the string separately based on no of iteration and assign it to innerrHTML. it should work.
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.
This is a simple one, I'm new to javascript, but I haven't found any existing answers that can help with this:
I started with a simple calculator that would convert one unit, the Cent (a musical unit of note frequency difference) to a decimal.
<html>
<head>
<script language="JavaScript">
function tun(form) {
var i = parseFloat(form.Cents.value, 10);
var o = 0;
p = i / 3986.313714
o = Math.pow(10, p)
form.Decimal.value = o;
}
</script>
</head>
<body>
<FORM>Cents:
<INPUT NAME="Cents" VALUE="0" MAXLENGTH="15" SIZE=15>
<p>Click to Convert
<INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON onClick=tun(this.form)>
<p>Decimal:
<INPUT NAME="Decimal" SIZE=15>
</FORM>
</body>
</html>
Now I want to change this to a converter for many types of units into each other, using the Decimal as a go-between. I'd like the 'input unit' and 'output unit' to be selectable from dropdown menus.
Here's where I am so far:
<html>
<head>
<script language="JavaScript">
function tun(form) {
var i = parseFloat(form.Cents.value, 10);
var o = 0;
p = i / 3986.313714
o = Math.pow(10, p)
form.Decimal.value = o;
}
</script>
<script>
function selectedunit() {
var mylist = document.getElementById("InputList");
document.getElementById("units").value = InputList.options[mylist.selectedIndex].text;
}
</script>
</head>
<body>
<form>Select units to convert from:
<select id="InputList" onchange="selectedunit()">
<option></option>
<option>Cents</option>
<option>Savarts</option>
<option>Jots</option>
<option>Merides</option>
</select>
<p>Selected Units:
<input type="text" id="units" </p>
<br>Cents:
<INPUT NAME="Cents" VALUE="0" MAXLENGTH="15" SIZE=15>
<p>Click to Convert
<INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON onClick=tun(this.form)>
<p>Decimal:
<INPUT NAME="Decimal" SIZE=15>
</FORM>
</body>
</html>
So I'd like to be able to selected any input unit and any output unit, then enter a value and calculate away - a bit like a currency converter
Any help?
Jim
Try and make two different javascript functions
AnyUnitToDecimalConverter() Function
DecimalToAnyUnitConverter() Function
Now suppose you need to convert from X unit to Y unit: Call AnyUnitToDecimalConverter(valueX), this will give you a decimal answer say AnsDecimal and now Call DecimalToAnyUnitConverter(AnsDecimal);