I am formatting the phone field. I get the value of the element and check to see if it 3 characters. The problem comes when the value ends with two zeros. The length of the var is off if it ends in two zeros.
Example:
120 value comes in at 3
1200 value also comes in at 3
//phone format
function updatephone(x) {
var phlen = document.getElementById("fphone").value;
if (phlen.length < 12) {
if (phlen.length == 3) {
document.getElementById('fphone').value=document.getElementById('fphone').value + -x;
}
else if (phlen.length == 7) {
document.getElementById('fphone').value=document.getElementById('fphone').value + -x;
}
else {
document.getElementById('fphone').value=document.getElementById('fphone').value + x;
}
}
}
Here its code its working prefect
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input id='phone' oninput="test()" type="number" />
<input id='result' />
<script>
function test()
{
var v=document.getElementById("phone").value;
if(v.length<12)
{
if(v.length==3)
{
document.getElementById("result").value="3";
}else
{
document.getElementById("result").value="";
}
}else if(String(v).Lenght>=12)
{
alert("Wrong")
}
}
</script>
</body>
</html>
Related
I'm learning JS and I coded an "arabic to roman numbers" converter. Everything is working fine when I console log. But the next step is to display these informations in html like following :
Arabic number :
Roman number :
Here's my code so far :
<!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>Converter</title>
</head>
<body>
<p>Arabic number :</p>
<p id="numberInput"></p>
<p>Roman number :</p>
<p id="romainInput"></p>
<script src="./index.js"></script>
</body>
</html>
And the Js part :
let romanInput = document.getElementById("romanIput");
let arabicInput = document.getElementById("numberInput");
function convertToRoman(num) {
const romanToNum = {
X: 10,
IX: 9,
V: 5,
IV: 4,
I: 1,
};
let roman = "";
for (let key in romanToNum) {
while (num >= romanToNum[key]) {
roman += key;
num -= romanToNum[key];
}
}
return roman;
}
console.log(convertToRoman(2));
I just need to choose a random number in the console between 1 and 10 and to display it. I tried different things with "romanInput.innerHtml = roman.value" and things like that but nothing working so far. Any ideas ?
Thanks in advance...
if you want to generate random number and pass it to your function you can write a function like this:
function getRandomNumberBetween(min,max){
return Math.floor(Math.random()*(max-min+1)+min);
}
var rndNum = getRandomNumberBetween(1,10);
console.log(convertToRoman(rndNum));
You had miss spelled innerHTML as innerHtml. That's why it won't work.
let romanInput = document.getElementById("romanIput");
let arabicInput = document.getElementById("numberInput");
function convertToRoman(num) {
const romanToNum = {
X: 10,
IX: 9,
V: 5,
IV: 4,
I: 1,
};
let roman = "";
for (let key in romanToNum) {
while (num >= romanToNum[key]) {
roman += key;
num -= romanToNum[key];
}
}
return roman;
}
arabicInput.innerHTML = convertToRoman(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>Converter</title>
</head>
<body>
<p>Arabic number :</p>
<p id="numberInput"></p>
<p>Roman number :</p>
<p id="romainInput"></p>
</body>
</html>
You are nearly there. Just add an eventlistener to your input field and actual make it a html input field.
After this you can listen to events and read the value which is in the input.
I used the keyup event to update the value immediately.
let romanOutput = document.getElementById("romanOutput");
let arabicInput = document.getElementById("numberInput");
arabicInput.addEventListener("keyup", e => convertToRoman(Number(e.target.value)))
function convertToRoman(num) {
const romanToNum = {
X: 10,
IX: 9,
V: 5,
IV: 4,
I: 1,
};
let roman = "";
for (let key in romanToNum) {
while (num >= romanToNum[key]) {
roman += key;
num -= romanToNum[key];
}
}
romanOutput.innerHTML = roman;
}
<!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>Converter</title>
</head>
<body>
<p>Arabic number :</p>
<input id="numberInput" />
<p>Roman number :</p>
<p id="romanOutput"></p>
</body>
</html>
<!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>Higher Lower</title>
</head>
<body>
<h1>Higher - Lower</h1>
<!--maxNum Function-->
<!-- <p>Please enter a maximum number:</p>
<input type="text" id="maxNum" /><br /><br /> -->
<button onclick="userInput()">Input Maximum Number</button>
<p id="ranNum"></p>
<p id="validation"></p>
<!--higherLower Function-->
<p>Your Guess:</p>
<input type="text" onfocus="this.value=''" id="choice" /><br /><br />
<button onclick="higherLower()">Guess</button>
<p id="result"></p>
<p id="values"></p>
</body>
<script src="scripts.js"></script>
</html>
let userMax;
function userInput() {
userMax = prompt("Please enter a maximum number:");
while (userMax < 1 || isNaN(userMax)) {
alert("Maximum number cannot be negative, zero, or non-numbers");
userMax = userInput();
}
return userMax;
}
function isFloat(userMax) {
return Number(userMax) === n && n % 1 !== 0;
}
function higherLower(choice) {
// Declares random number variable
var randomNumber=Math.floor(Math.random() * userMax) + 1;
window.alert(randomNumber);
// Declares user guess variable
var guess=document.getElementById('choice').value;
// Declares random number variable
if(randomNumber==guess) {
document.getElementById("result").innerHTML = "You got it!";
}
else if(randomNumber>=guess) {
document.getElementById("result").innerHTML = "No, try a higher number.";
}
else if(randomNumber<=guess) {
document.getElementById("result").innerHTML = "No, try a lower number.";
}
}
I am creating a number guessing game based on the user inputting the maximum number. I was wondering how I could generate the random number only once until the user guesses correctly?
I messed around with creating another function and nesting functions however I could not get anything solid to work.
Currently, the button calls the main game function each time it is clicked and I do not want to add other buttons/inputs to solve this issue.
Place var randomNumber=Math.floor(Math.random() * userMax) + 1; outside of your function, and it should not be replaced when you call higherLower().
If the user guesses correctly, then set randomNumber to another Math.floor(Math.random() * userMax) + 1
So, your code should look like this:
let userMax;
let randomNumber;
function userInput() {
userMax = prompt("Please enter a maximum number:");
while (userMax < 1 || isNaN(userMax)) {
alert("Maximum number cannot be negative, zero, or non-numbers");
userMax = userInput();
}
randomNumber = Math.floor(Math.random() * Number(userMax)) + 1;
return userMax;
}
function isFloat(userMax) {
return Number(userMax) === n && n % 1 !== 0;
}
function higherLower(choice) {
// Declares random number variable
window.alert(randomNumber);
// Declares user guess variable
var guess=document.getElementById('choice').value;
// Declares random number variable
if(randomNumber==guess) {
document.getElementById("result").innerHTML = "You got it!";
randomNumber=Math.floor(Math.random() * Number(userMax)) + 1;
}
else if(randomNumber>=guess) {
document.getElementById("result").innerHTML = "No, try a higher number.";
}
else if(randomNumber<=guess) {
document.getElementById("result").innerHTML = "No, try a lower number.";
}
}
This happens because you are generating a random number in every call to higherLower function
so you have to declare to variable outside and set up a random number to it out side this function
let userMax;
let randomNumber;
function start() {
userMax = prompt("Please enter a maximum number:");
if (userMax < 1 || isNaN(userMax)) {
alert("Maximum number cannot be negative, zero, or non-numbers");
userMax = start();
}
randomNumber = Math.floor(Math.random() * Number(userMax)) + 1;
}
function higherLower() {
// Declares random number variable
window.alert(randomNumber);
// Declares user guess variable
var guess=document.getElementById('choice').value;
// Declares random number variable
if(randomNumber==guess) {
document.getElementById("result").innerHTML = "You got it!";
}
else if(randomNumber>=guess) {
document.getElementById("result").innerHTML = "No, try a higher number.";
}
else if(randomNumber<=guess) {
document.getElementById("result").innerHTML = "No, try a lower number.";
}
}
And you do not have to use while in while (userMax < 1 || isNaN(userMax))
you just can put a simple if statement,
<!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>Higher Lower</title>
</head>
<body>
<h1>Higher - Lower</h1>
<!--maxNum Function-->
<!-- <p>Please enter a maximum number:</p>
<input type="text" id="maxNum" /><br /><br /> -->
<button onclick="start()">Input Maximum Number</button>
<p id="ranNum"></p>
<p id="validation"></p>
<!--higherLower Function-->
<p>Your Guess:</p>
<input type="text" onfocus="this.value=''" id="choice" /><br /><br />
<button onclick="higherLower()">Guess</button>
<p id="result"></p>
<p id="values"></p>
</body>
<script src="scripts.js"></script>
</html>
And I changed the name of userInput function to start
I am trying to make a function in JAVASCRIPT that calculates the HCF, in the VS CODE (MY CODE EDITOR) console it's showing the correct value, but I am trying to display the result on the page and it's not appearing and in the browser's console its showing maximum call stack exceeded.
The result of the if statement appears but when the if statement is false, the result of the else statement does not appear.
Here is my code:
function HCF(a, b) {
var answer = document.getElementById('answer');
let value1 = document.getElementById('value1').value;
let value2 = document.getElementById('value2').value;
a = value1;
b = value2;
var ans = 0;
if (a % b == 0) {
return answer.innerHTML = `HCF: ${b}`;
}
var remainder = a % b;
ans += HCF(b, remainder);
answer.innerHTML = `HCF: ${ans}`;
}
<!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>Maths Problem</title>
</head>
<body>
<h1>Value 1: </h1><input type="text" id="value1">
<h1>Value 2: </h1><input type="text" id="value2"><br><br>
<button type="submit" id="submit" onclick="HCF()">Get answer</button>
<h1 id="answer">HCF:</h1>
</body>
</html>
You need to separate out the code that calculates the HCF and which gets and displays values.
function HCF(a, b) {
if (a % b == 0) {
return b;
}
var remainder = a % b;
return HCF(b, remainder);
}
function getHCF() {
const a = document.getElementById('value1').value;
const b = document.getElementById('value2').value;
const answer = HCF(a, b);
document.getElementById('answer').innerHTML = `HCF: ${answer}`;
}
<h1>Value 1: </h1><input type="text" id="value1">
<h1>Value 2: </h1><input type="text" id="value2"><br><br>
<button type="submit" id="submit" onclick="getHCF()">Get answer</button>
<h1 id="answer">HCF:</h1>
</body>
I've separated your function into two functions. One function calls the other which is recursive and which returns the answer to the first function which then displays the results to the page.
function HCF() {
var answer = document.getElementById('answer');
let value1 = document.getElementById('value1').value;
let value2 = document.getElementById('value2').value;
answer.innerHTML = HCFHelper(value1, value2);
}
function HCFHelper(a, b) {
if (a % b == 0) {
return b;
}
return HCFHelper(b, a % b);
}
<!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>Maths Problem</title>
</head>
<body>
<h1>Value 1: </h1><input type="text" id="value1">
<h1>Value 2: </h1><input type="text" id="value2"><br><br>
<button type="submit" id="submit" onclick="HCF()">Get answer</button>
<h1 id="answer">HCF:</h1>
</body>
</html>
I just started learning javascript. I develop an input box that user enters a number in. so program decrease number to zero.
my problem is here; I enter a number and show same it in output, but show a decreasing number.
my JS code :
function test() {
var MyInput = parseInt(document.getElementById('HoursOfWork').value);
var Exp_MyInput = document.getElementById('output01').innerHTML = "Number: " + MyInput;
for (var i = 1; i < 4; i++) {
document.getElementById('output01').innerHTML = MyInput;
}
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="StyleSheet.css" />
<script src="Script.js"></script>
<title>EyeProctect Project</title>
</head>
<body>
<h1>Eye Protect</h1>
<h4>Keep Your Eyes safe</h4>
<input type="text" id="HoursOfWork" placeholder="Enter your hours of work ...." />
<button class="start" onclick=test()>Let's Go!</button>
<p id="output01"></p>
</body>
</html>
What am I do?
If you meant counting down from number provided in input field down to zero using for loop then you can work with this approach:
function test() {
var MyInput = parseInt(document.getElementById('HoursOfWork').value);
var output = document.getElementById('output01');
output.innerHTML = '';
for (var i = MyInput; i > 0; i--) {
output.innerHTML += "Number: " + i + "<br>";
}
}
I have been struggling with the this output from which hangs my browser. When I run the following code it runs fine.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
var input = 5;
for(var i=1;i< 5;i++){
input = i*input;
}
document.write(input);
</script>
</body>
</html>
But this hangs the browser and I have to stop it finally. I cant't find any bug or error in this code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
var input = prompt("Enter the number to get factorial of: ");
var result = input;
for(var i=1;i < input;i++){
result = i * result;
}
document.write(result);
</script>
</body>
</html>
input = i*input; increases input so i < input is always false. Try smth like
var input = parseInt(prompt("Enter the number to get factorial of: "));
var result = input;
for(var i=1;i < input;i++){
result = i * result;
}
document.write(result);
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
function fact(num)
{
var x=parseInt(num);
if(x>0)
x=x* fact(x-1);
alert(x);
}</script>
</head>
<body>
<form name="f1">
Enter the Number :<input type="text" length="8" name="txt1"><br>
<input type="button" value="Find factiorial" onclick="fact(txt1.value)">
</form>
</body>
var y = prompt("type number ");
var x = input;
function fact(x) {
if(x==0) {
return 1;
}
return x * fact(x-1);
}
function run(number) {
alert(fact(parseInt(number, 10)));
}
run(x);