Hi i want to get what the user wrote, multiply it by some number and display the result in heading.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="number" name="num" value="">
<div id = "output">
<h2 id="OP"></h2>
</div>
</body>
</html>
var valResult = parseInt(document.getElementById("number").value);
var num = 5;
var results = valResult + num;
if (valResult == 10){
document.getElementById("OP").innerHTML = results;
}
You have some unnecessary code. Do you really need:
if (valResult == 10){....
Try the following:
function calculate(input){
var valResult = parseInt(input.value);
var num = 5;
var results = valResult * num;
document.getElementById("OP").innerHTML = results;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="number" name="num" oninput="calculate(this)">
<div id = "output">
<h2 id="OP"></h2>
</div>
</body>
</html>
Related
I made a username and password validation but although I filled in valid information, it outputs invalid. The input is from <input> tag, with IDs, where the information entered is stored into arrays. Is it data type or syntax issues?
HTML Code 1:
<!DOCTYPE html>
<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>Document</title>
</head>
<body>
<span>Username</span>
<input id="user" placeholder="enter username">
<br>
<br>
<span>Password</span>
<input id="pass" placeholder="enter password">
<br>
<br>
<button onclick="save()">Enter</button>
<script src="pass.js"></script>
</body>
</html>
HTML Code 2:
<!DOCTYPE html>
<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>Document</title>
</head>
<body>
<span>Username</span>
<input id="user" placeholder="enter username">
<br>
<br>
<span>Password</span>
<input id="pass" placeholder="enter password">
<br>
<br>
<button onclick="valid()">Validate</button>
<br>
<br>
<h1 id="ans"></h1>
<script src="pass.js"></script>
</body>
</html>
Javascript Code (in a separate file):
var user = [];
var pass = [];
function save( ) {
var x = document.getElementById("user").value;
var y = document.getElementById("pass").value;
user.push(x);
pass.push(y);
console.log(user);
}
function valid() {
var a = document.getElementById("user").value;
var b = document.getElementById("pass").value;
var validationa;
var validationb;
for (let x in user) {
if (x == a) {
validationa = 1;
} else {
validationa = 0;
}
}
for (let y in pass) {
if (y == b) {
validationb = 1;
} else {
validationb = 0;
}
}
if (validationa == 1 && validationb == 1) {
document.getElementById('ans').innerHTML = "valid";
} else {
document.getElementById('ans').innerHTML = "invalid";
}
}
It gives a valid output if the username and password entered is consistent. Both HTML files use the same Javascript source file.
So I've been trying to get user input to calculate outer product of two vectors using tensorflow.js but I couldn't figure out how to get an array from html to pass it into javascript. for example inside the calculator function const a has to be something like this tf.tensor1d([1, 2, 3])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs#2.0.0/dist/tf.min.js"></script>
</head>
<body>
<h1 class="text1">Welcome to vector cross product calculator!</h1>
<h2>Please enter two vectors like 1,2,3 and 3,2,1</h2>
<label>vector a</label>
<input type="text" name="vectora" id="vectora" class="vectora" placeholder="enter a vector like 1,2,3"> <br>
+<br>
<label>vector b</label>
<input type="text" name="vectorb" id="vectorb" class="vectorb" placeholder="enter a vector like 1,2,3"><br>
<button type="button" class="btn btn-info" onclick="calculator()">submit</button><br><br>
<div class="screen" id="screen1"></div>
</button>
<script>
function calculator(){
var vectora = document.getElementById("vectora").value;
var vectorb = document.getElementById("vectorb").value;
const a = tf.tensor1d(vectora);
const b = tf.tensor1d(vectorb);
var c = tf.outerProduct(a, b);
document.getElementById("screen1").innerHTML=c;
}
</script>
</body>
</html>
A utility function getArray can help.
function getArray(data) {
return data.split(',').map(s => +s)
}
function calculator(){
var vectora = document.getElementById("vectora").value;
var vectorb = document.getElementById("vectorb").value;
const a = tf.tensor1d(getArray(vectora));
const b = tf.tensor1d(getArray(vectorb));
var c = tf.outerProduct(a, b);
document.getElementById("screen1").innerHTML=c;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs#2.0.0/dist/tf.min.js"></script>
</head>
<body>
<h1 class="text1">Welcome to vector cross product calculator!</h1>
<h2>Please enter two vectors like 1,2,3 and 3,2,1</h2>
<label>vector a</label>
<input type="text" name="vectora" id="vectora" class="vectora" placeholder="enter a vector like 1,2,3"> <br>
+<br>
<label>vector b</label>
<input type="text" name="vectorb" id="vectorb" class="vectorb" placeholder="enter a vector like 1,2,3"><br>
<button type="button" class="btn btn-info" onclick="calculator()">submit</button><br><br>
<div class="screen" id="screen1"></div>
</button>
<script>
function getArray(data) {
return data.split(',').map(s => +s)
}
function calculator(){
var vectora = document.getElementById("vectora").value;
var vectorb = document.getElementById("vectorb").value;
const a = tf.tensor1d(getArray(vectora));
const b = tf.tensor1d(getArray(vectorb));
var c = tf.outerProduct(a, b);
document.getElementById("screen1").innerHTML=c;
}
</script>
</body>
</html>
I'm creating a simple web app that takes two values, outputs a total, then displays VAT of 20% in the VAT field (to clarify, this shows 20% of the total previously calculated) then it should have a final grand total field which adds the total to the VAT, however I haven't gotten round to this part as I'm having difficulty calculating the VAT in my code, this is what I have thus far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
Value 1: <input type="text" name="val1"><br>
Value 2: <input type="text" name="val2"><br>
Total: <input type="text" name="sum"><br>
VAT:<input type="text" name="vat"><br>
<input type="button" value="Sum" onclick="sumTotal() + vatCalc()">
</form>
<script>
function sumTotal() {
let val1 = document.getElementsByName("val1")[0].value;
let val2 = document.getElementsByName("val2")[0].value;
let sum = Number(val1) + Number(val2);
document.getElementsByName("sum")[0].value = sum;
}
function vatCalc () {
// let vat= document.getElementsByName("vat")
var sumVat = 20;
let vat = (sum/100)*(sumVat+100);
document.getElementsByName("vat")[0].value = vat;
}
</script>
</body>
</html>
any help would be greatly appreciated please, thanks!
I've edited your functions so now sumtotal calls your vat function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
Value 1: <input type="text" name="val1"><br>
Value 2: <input type="text" name="val2"><br>
Total: <input type="text" name="sum"><br>
VAT:<input type="text" name="vat"><br>
<input type="button" value="Sum" onclick="sumTotal()">
</form>
<script>
function sumTotal() {
let val1 = document.getElementsByName("val1")[0].value;
let val2 = document.getElementsByName("val2")[0].value;
let sum = Number(val1) + Number(val2);
document.getElementsByName("sum")[0].value = sum;
vatCalc(sum);
}
function vatCalc (sum) {
// let vat= document.getElementsByName("vat")
var sumVat =0.20;
let vat = sumVat*sum;
document.getElementsByName("vat")[0].value = vat;
}
</script>
</body>
</html>
I have this code that I'm working on, but the calculate button won't work no matter what I do. I want to find the cost per square inch using the pizzaSize and pizzaCost. How can I make the calculate button actually calculate?
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' >
<title> Pizza Calculator </title>
<script src="pizzaCalc.js">
</script>
</head>
<body>
<h1>Pizza Calculator</h1>
<p>
<label for="priceBox">Cost: </label><input type="text" id="priceBox" size="5"/></p>
<p>
<label for="sizeBox">Diameter :</label><input type="text" id="sizeBox"
size="5"/>
</p>
<input type="button" id="cpsi" value="Cost PSI" onclick="calculate(cpsi)">
</body>
</html>
"use strict"
function pizzaCalc () {
var size = document.getElementById ("sizeBox").value;
size = parseFloat (size);
var price = document.getElementById("priceBox").value;
price = parceFloat (price);
var costPerSquareInch = price / (3.14 * (size / 2)^2)
alert('Pizza value :' +costPerSquareInch);
document.getElementById("cpsi").value = costPerSquareInch;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' >
<title> Pizza Calculator </title>
<script src="pizzaCalc.js">
</script>
</head>
<body>
<h1>Pizza Calculator</h1>
<p>
<label for="priceBox">Cost: </label><input type="text" id="priceBox" value="5"/></p>
<p>
<label for="sizeBox">Diameter :</label><input type="text" id="sizeBox" value="5"/>
</p>
<input type="button" id="cpsi" value="Cost PSI" onclick="pizzaCalc()">
<script type="text/javascript">
"use strict"
function pizzaCalc () {
var size = document.getElementById ("sizeBox").value;
size = parseFloat (size);
var price = document.getElementById("priceBox").value;
price = parseFloat (price);
var costPerSquareInch = price / (3.14 * (size / 2)^2)
alert('Pizza value :' +costPerSquareInch);
document.getElementById("cpsi").value = costPerSquareInch;
}
</script>
</body>
</html>
It appears that
<input type="button" id="cpsi" value="Cost PSI" onclick="calculate(cpsi)">
should be
<input type="button" id="cpsi" value="Cost PSI" onclick="pizzaCalc()">
also I am assuming size should be value on the input tags.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' >
<title> Pizza Calculator </title>
<script src="pizzaCalc.js">
</script>
</head>
<body>
<h1>Pizza Calculator</h1>
<p>
<label for="priceBox">Cost: </label><input type="text" id="priceBox" value="5"/></p>
<p>
<label for="sizeBox">Diameter :</label><input type="text" id="sizeBox" value="5"/>
</p>
<input type="button" id="cpsi" value="Cost PSI" onclick="pizzaCalc()">
<script type="text/javascript">
"use strict"
function pizzaCalc () {
var size = document.getElementById ("sizeBox").value;
size = parseFloat (size);
var price = document.getElementById("priceBox").value;
price = parseFloat (price);
var costPerSquareInch = price / (3.14 * (size / 2)^2)
alert('Pizza value :' +costPerSquareInch);
document.getElementById("cpsi").value = costPerSquareInch;
Recently I'm maintaining a legacy project. I found one javascript dead loop problem in a page. The demo code is as follows. When the user clicks the first inputbox and type in 3 then directly click the second input box, the dead loop occurs. Now my question is what's the best way to solve or prevent this kind of problem? Great thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<input type="text" name="a" id="a" value="" />
<input type="text" name="b" id="b" value="" />
<script type="text/javascript" charset="utf-8">
var a = document.getElementById("a");
a.onblur = function(){
if(a.value.length === 1){
alert("aaa");
a.focus();
a.select();
return false;
}
}
var b = document.getElementById("b");
b.onblur = function(){
if(b.value < a.value){
alert("bbb");
b.focus();
b.select();
return false;
}
}
</script>
</body>
</html>
This works in IE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-type" />
</head>
<body>
<input id="a" name="a" type="text" value="" />
<input id="b" name="b" type="text" value="" />
<script charset="utf-8" type="text/javascript">
var bInBlurA = false;
var a = document.getElementById("a");
a.onblur = function(){
if (bInBlurB) return;
if(a.value.length === 1){
bInBlurA = true;
alert("aaa2");
a.focus();
a.select();
}
}
var bInBlurB = false;
var b = document.getElementById("b");
b.onblur = function(){
if (bInBlurA) return;
if(b.value < a.value){
bInBlurB = true;
alert("bbb2");
b.focus();
b.select();
}
}
a.onfocus = function()
{
bInBlurA = false;
}
b.onfocus = function()
{
bInBlurB = false;
}
</script>
</body>
</html>
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<input type="text" name="a" id="a" value="" />
<input type="text" name="b" id="b" value="" />
<script type="text/javascript" charset="utf-8">
var a = document.getElementById("a");
a.onblur = function() {
a.validCheck = false;
if(a.value.length === 1){
alert("aaa");
a.focus();
a.select();
return false;
}
a.validCheck = true;
}
var b = document.getElementById("b");
b.onblur = function() {
if (!a.validCheck) return true;
if(b.value < a.value){
alert("bbb");
b.focus();
b.select();
return false;
}
}
</script>
</body>
</html>
Plus I didn't have any loop problems in Firefox although it doesn't behave as intended. I'm assuming this is IE only.
What do u mean by this line:
if(b.value < a.value){
If you are comparing length, do this:
if(b.value.length < a.value.length){
Or if you want to check if they are equal or not then:
if(b.value == a.value){
Or
if(b.value != a.value){