Make Javascript calculate HTML input from user - javascript

I want to make a website that can calculate the numbers that the user enters in the text field. Below, I am trying to store the users input in a variable and then return it to the console, but this does not seem to work. It is supposed to take in more calculations down the line, but I thought I would keep it simple at first.
What have i forgotten?
PS: I'm currently still learning JavaScript, so don't roast me too hard :)
Thanks!
Best
Mikkel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/JavaScript/culjo.js" defer></script>
<title>Culjo</title>
</head>
<body>
<h1>Culjo</h1>
<input id="inputOne" type="text">
<input id="inputtwo" type="text">
<input id="result" type="number">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-
QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
Javascript
function calculate() {
var inputOne = document.getElementById("inputOne")
var inputTwo = document.getElementById("inputTwo")
result = inputOne+inputTwo + inputTwo
return result
}
calculate()

You need to get the value of the field like this:
var inputOne = document.getElementById("inputOne").value;
and then use
parseInt() or parseFloat() as stated at the comments to parse the string.

Related

Function not recognized by Javascript [duplicate]

This question already has answers here:
Why can't I call a function named clear from an onclick attribute?
(3 answers)
Closed 11 months ago.
I've been messing around with Javascript recently and I'm still a beginner. I've been trying to build a simple program which finds a specified string inside the text entered into the text field using regular expressions, but for some reason when I click the "Find" button it gives me the following error:
Uncaught TypeError: find is not a function
onclick http://192.168.178.20:62126/JavaScript/Findy/index.html:1
index.html:1:1
Here's my code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Findy</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="script.js"></script>
<form action="">
<input type="text" id="toFind" placeholder="What do you wanna find?">
<input type="button" id="find" onclick="find()" value="Find"></input>
<textarea name="textToSearch" id="textToSearch" cols="30" rows="10" placeholder="Enter your text"></textarea>
</form>
</body>
</html>
function find() {
var text=document.getElementById("textToSearch").value;
var word=document.getElementById(toFind).value;
var myRegex=/word/;
console.log(text.match(myRegex));
}
You need to add a <script> tag below where the find() function is called.
Second solution is to add async attribute to <script> tag

Pure Javascript: How to keep form inputs after submit without PHP?

Javascript beginner here - I looked up a bunch of answers on similar questions, but they all use PHP which I don't know anything about. I was hoping to do the following in pure Javascript:
I have a input field and a button:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<form>
<label for="someNum">Some number:</label>
<input type="number" id="someNum">
<input type="submit" id="button" value="Submit">
</form>
<script src="script.js"></script>
</body>
</html>
When I hit "Submit", I want to console.log the value of someNum:
const button = document.getElementById("button")
button.addEventListener("click", calculate)
function calculate () {
let someNum = document.getElementById("someNum").value
console.log(someNum)
}
However, upon clicking "Submit", the value entered by the user is no longer shown in the form. How do I prevent that?

In Jquery, how do I alert the value of a regular element with an id?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){var mainVal = $("#h1").valueOf();alert(mainVal);})</script>
</head>
<body>
<h1 id="h1" value="0">hallow you </h1>
</body>
</html>
I am trying to use the val() method here. Any help would be awesome. Thank you.
first, you've use .valueOf() (its a different js methoud and here is its docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf ) it should be .val() which is used to get the values of form elements such as input, select and textarea, for more info check the docs here: https://api.jquery.com/val/
second, to get the value from the value attribute in an element you need to use the .attr('attribute-name') method
$(document).ready(function () {
var mainVal = $("#h1").attr("value");
alert(mainVal);
})

pass variable when click button in js [duplicate]

This question already has answers here:
How to pass variable value between different html pages in javascript
(5 answers)
How do I share a global variable between multiple files?
(1 answer)
Closed 2 years ago.
I have a problem to pass variable in js!
I have two html page and each of html page has a js script. I want when click a button in first html a variable pass to another js file.
my first html(index.html) is :
// test.js
var vari;
document.getElementById("btn").addEventListener("click", function() {
vari = 10;
window.location.href = "./index2.html";
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>test</p>
<button id="btn">click</button>
<script src="./test.js"></script>
</body>
</html>
and script of this html is (test.js):
I want when click to btn go to html2(index2.html) and and vari pass to js2(test2.js)!
my html2(index2.html) is :
// test.js
var vari;
document.getElementById("btn").addEventListener("click", function() {
vari = 10;
window.location.href = "./index2.html";
});
// test2.js
console.log(vari);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./test.js"></script>
<script src="./test2.js"></script>
</body>
</html>
But in test2.js vari is undefined.
How can I solve this problem?
Save the variable in sessionStorage. Instead of
vari = 10;
do
sessionStorage.vari = 10;
And then you can retrieve it in test2.js:
console.log(sessionStorage.vari);
Note that storage will always contain a string. If the type matters, make sure to transform back to a number:
const vari = Number(sessionStorage.vari);
For an even more general solution, to transfer any sort of serializable data, use JSON.stringify when saving and JSON.parse when retrieving.

how to get length of a textbox value which is undefined due to ng-pattern restriction in angularjs

I'm trying to calculate length of textbox on button click and implement some other functionality depends on length returned.
In normal angularjs code flow, i'm able to get result.
But when I restrict the textbox and ng-pattern="/^([0-9]{1,25})?$/", and just try to get length on entering alphabets, I`m getting:
length undefined
I cannot expect user understand to enter only numbers at first input entry. Hence even on entering alphabets, how to get length of input without removing ng-pattern or any other alternate way.
Here is the code.
hope this is your requirement
var app = angular.module('plunker', []);
app.controller('myCtrl', function($scope ){
$scope.len=0;
$scope.call=function(x){
$scope.len=x.length;
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
</head>
<body ng-controller="myCtrl">
<p>Hello {{name}}!</p>
<input type="text" ng-pattern="/^([0-9]{1,25})?$/" ng-model-options="{allowInvalid: true}" ng-model="called" ng-change="call(called)">
<p>length={{len}}</p></body>
</html>

Categories