JS Function doubles - javascript

I should find the factorial of a number written in input. I have the function but the problem is that how many time I press on button it will *2 the number. I am not able to empty the value of the input and .
Here is the code.
Thank you in advance!
let sum = 1;
function faktorial(){
let faktorial1 = +inp1.value
for(let i = 1; i < faktorial1; i++){
sum *=i+1
}
tpel.innerHTML = sum
}
<!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>
<input type="text" name="" id="inp1">
<!-- <input type="text" name="" id="inp2"> -->
<br>
<!-- <button onclick="show()">Print</button> -->
<button onclick="faktorial()">Faktorial</button>
<h1 id="tpel"></h1>
</body>
<script src="script.js"></script>
</html>

You need to set the sum again to 1 and also if you need to remove the input value, you need to set inp1.value to "". Check the code below.
let sum = 1;
function faktorial(){
let faktorial1 = +inp1.value
for(let i = 1; i < faktorial1; i++){
sum *=i+1
}
tpel.innerHTML = sum
sum = 1;
inp1.value = "";
}
<!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>
<input type="text" name="" id="inp1">
<!-- <input type="text" name="" id="inp2"> -->
<br>
<!-- <button onclick="show()">Print</button> -->
<button onclick="faktorial()">Faktorial</button>
<h1 id="tpel"></h1>
</body>
</html>

function faktorial(){
let sum = 1;
let faktorial1 = +inp1.value
for(let i = 1; i < faktorial1; i++){
sum *=i+1
}
tpel.innerHTML = sum
sum = null;
}
<!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>
<input type="text" name="" id="inp1">
<!-- <input type="text" name="" id="inp2"> -->
<br>
<!-- <button onclick="show()">Print</button> -->
<button onclick="faktorial()">Faktorial</button>
<h1 id="tpel"></h1>
</body>
<script src="script.js"></script>
</html>

Calculating factorial of a number is typical use-case of recursive function
function faktorial1() {
tpel.innerText = faktorial(inp1.value);
}
function faktorial(x) {
if (x == 0) {
return 1;
}
return x * faktorial(x - 1);
}
<input type="text" name="" id="inp1">
<button onclick="faktorial1()">Faktorial</button>
<h1 id="tpel"></h1>

Related

how to make list with for loop?

I tried to made a list with a for Loop and now I'm stuck because the program isn't showing any error but is not building any list elements. Can somebody explain why and how?
It seems that it can read the value of the input element which I thought don`t seems to be the problem, so I was thinking that it must be the problem with reading it from the array. But I am just a beginner so when someone knows the actual solution to the problem, I would appreciate it.
let array = [];
function buildList() {
let ul = document.getElementById("prototype_List");
ul.innerHTML = "";
for (i = 0; i < array.length; i++) {
let list = document.createElement("li");
list.innerText = array[i];
let setting = document.getElementById("prototype_List");
setting.append(list);
}
}
function Name_Tag() {
let checkName = document.getElementById("textfeld").value;
if(checkName.length === 0) {
alert("write Name");
} else {
array.push(checkName);
buildList();
}
}
<!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">
<script src="test.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="input-group mb-3">
<button onclick="Name_Tag" class="btn btn-outline-secondary" type="button" id="button-addon1">ADD Name</button>
<input id="textfeld" type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>
<ul id="prototype_List">
</ul>
</div>
</body>
</html>

How to handle input from a textbox to not print a NaN

I am trying to get user input from the textbox and then click the button beside in order to calculate the area of a circle. Problem is alert always prints NaN.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="./css/style.css">
<script>
const PI = 3.14159;
function getAreaOfCircle(rad) {
let area = PI * Math.pow(rad, 2);
alert(area);
}
</script>
</head>
<body>
<input type="text" placeholder="Type something..." id="myInput">
<input type="button" onclick="getAreaOfCircle();" value="Calculate Area of a Circle">
</body>
</html>
You have to pass input value on your function. As you're code to pass it on your function as argument/parameter. So you can code it like that:
<input type="button" onclick="getAreaOfCircle(document.getElementById('myInput').value);" value="Calculate Area of a Circle">
You need to get the actual input text and convert its value into a floating number:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="./css/style.css">
<script>
const PI = 3.14159;
function getAreaOfCircle() {
//Get the radius from the input field
let rad = document.getElementById("myInput").value;
//Check if the input is not empty, if it is set rad to 0
rad = rad !== "" ? parseFloat(rad) : 0;
let area = PI * Math.pow(rad, 2);
alert(area.toFixed(2));
}
</script>
</head>
<body>
<input type="text" placeholder="Enter the circle radius" id="myInput">
<input type="button" onclick="getAreaOfCircle();" value="Calculate Area of a Circle">
</body>
</html>
You are not passing rad in the function getAreaOfCircle
So you can get value inside the function getAreaOfCircle as:
const rad = document.querySelector("#myInput").value;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="./css/style.css">
<script>
const PI = 3.14159;
function getAreaOfCircle() {
const rad = document.querySelector("#myInput").value;
let area = PI * Math.pow(rad, 2);
alert(area);
}
</script>
</head>
<body>
<input type="text" placeholder="Type something..." id="myInput">
<input type="button" onclick="getAreaOfCircle();" value="Calculate Area of a Circle">
</body>
</html>

Random number generator in textarea [duplicate]

This question already has answers here:
How to change the Content of a <textarea> with JavaScript
(6 answers)
Closed 2 years ago.
How can add the following JavaScript code (a random number generator)?
function randomNumber(max) {
return Math.floor(Math.random() * max + 1);
}
const list = []
while(list.length < 25) {
let nbr = randomNumber(25)
if(!list.find(el => el === nbr))
list.push(nbr)
}
console.log("list",list)
into this textarea and displaying them with DOM?
<!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>
<textarea name="" id="" cols="30" rows="10"></textarea>
<script src="app.js"></script>
</body>
</html>
// Using an id to get the element
const textarea = document.getElementById('area');
function randomNumber(max) {
return Math.floor(Math.random() * max + 1);
}
const list = []
while(list.length < 25 ){
let nbr = randomNumber(25)
if(!list.find(el => el === nbr))
list.push(nbr)
}
// Set the value to the list
textarea.value = list;
<!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>
<textarea name="" id="area" cols="30" rows="10"></textarea>
<script src="app.js"></script>
</body>
</html>

Rotating Arrow between Two Points of Degrees

This is the fake gauge I want the arrow to work on
I want the red line/pointer to randomly generate between 0 - 100% humidity.
HTML:
//variables
let hygrometerHand = document.querySelector("#hygrometerHand");
const button = document.querySelector("#button");
let hygrometerAngle = 0;
hygrometerHand = 0;
//function
function generateResult() {
let min = -100;
let max = 95;
let x = Math.random() * (max - min) + min;
hygrometerHand = x;
hygrometerHand.style.transform = `rotate(${hygrometerHand}deg)`;
}
//button and event listener to generate moisture reading
button.addEventListener("click", generateResult);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="clock-container">
<img src="https://i.stack.imgur.com/3z72xm.jpg" />
<div id="hygrometerHand"></div>
</div>
<div>
<button id="button">Click here</button>
</div>
<script src="main.js"></script>
</body>
</html>
Please help with this! I know the answer is probably going to be very simple but its my second week of learning JS in a bootcamp and my mind is p overloaded.
Thank you!

Show how many times input N can be divided by input M

So, this is assignment for my school. There is two inputs, N and M, and <div id="text"> should show how many times number N can be divided by number M.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id=inputn> <input type="text"> </div>
<div id=inputm> <input type="text"> </div>
<div id=button><button>submit</button> </div>
<div id=text>
<p></p>
</div>
</body>
<script></script>
</html>
If input N is N=6, and input M is M=2, then result should be 3(times). N=49 M=7 result 2(times).
Here you have a snippet with the answer (it's really simple, it is not how a good script should be done), just run it to see how it works if you can't get over your homework:
document.querySelector("button").addEventListener("click", ()=> {
var inputN = document.querySelectorAll("input")[0].value;
var inputM = document.querySelectorAll("input")[1].value;
if (isNaN(inputN) || isNaN(inputM)) {
document.querySelector("#text").innerHTML= "Your input is not a number!";
} else {
var result = 0;
while ((inputN % inputM) == 0 && inputN > 0) {
result++;
inputN = inputN - inputM;
}
document.querySelector("#text").innerHTML= "You can divide the numbers " + result + " times";
}
})
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id=inputn> <input type="text"> </div>
<div id=inputm> <input type="text"> </div>
<div id=button><button>submit</button> </div>
<div id=text>
<p></p>
</div>
</body>
<script></script>
</html>

Categories