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>
Related
I want to make a website so that it will randomly generate a number. I want to be able to type in the number in a input box, press submit, and have the matching generated number removed from the list.
**I want to only use HTML and Javascript if possible
I tried to look online
A simple implementation is this. You can further develop as you wish.
<!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>
<div id="result"></div>
<button type="number" id="get">Get random number</button>
<div id="arr">
</div>
<button type="number" id="rm">Remove number <span id="rnumber"></span></button>
<script>
let arr = [0,1,2,3,4,5,6,7,8,9];
let n;
document.getElementById("get").addEventListener("click", getRandomInt);
document.getElementById("arr").innerHTML = arr;
document.getElementById("rm").addEventListener("click", rmNumber);
function getRandomInt() {
n = Math.floor(Math.random() * 10);
document.getElementById("result").innerHTML = n;
}
function rmNumber() {
let n = Number(document.getElementById("result").childNodes[0].textContent);
arr = arr.filter(i => i != n);
document.getElementById("arr").innerHTML = arr;
}
</script>
</body>
</html>
I'm trying to read all the values of an attribute my page an get, for each attribute (some attribute can has multiple value separate by comma) the div id
This is my html page:
const elements = document.querySelectorAll('[data-att]');
let obj = {};
elements.forEach(function(element) {
let v = element.getAttribute('data-att');
let id = element.id;
comma = v.includes(",");
if (comma) {
s = v.split(",");
s.forEach(function(single) {
obj[single] = {
id: id
};
});
} else {
obj[v] = {
id: id
};
}
});
console.log(obj);
<!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>
<div id="due" data-att="foo"></div>
<div id="uno" data-att="foo"></div>
<div id="tre" data-att="foo,bar"></div>
<div id="quattro" data-att="brum"></div>
<div id="cinque" data-att="foo,brum"></div>
</body>
</html>
What's the problem?
At the moment i needed to assign the attrbute id using obj[single] = {id: id}; cause i tried to make a obj[single].push(id); but I get error
Anyone can hel me to reach this resoult:
{
"foo": {
['due','uno','tre','cinque']
},
"bar": {
['tre']
},
"brum": {
['cinque']
}
}
I think this is what you need:
const elements = document.querySelectorAll('[data-att]');
let obj = {};
elements.forEach(el => {
const keys = el.dataset.att.split(',');
keys.forEach(key => {
if(obj[key] === undefined){
obj[key] = [];
}
obj[key].push(el.id)
})
})
console.log(obj);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<div id="due" data-att="foo"></div>
<div id="uno" data-att="foo"></div>
<div id="tre" data-att="foo,bar"></div>
<div id="quattro" data-att="brum"></div>
<div id="cinque" data-att="foo,brum"></div>
</body>
</html>
The result is not the same you posted, i think you made a mistake there, or was it me? :)
Check if the property already exists. If it does, push onto the array, otherwise create the array.
There's no need for if (comma). Splitting a string with no comma will return an array with a single element, you can loop over this with forEach().
const elements = document.querySelectorAll('[data-att]');
let obj = {};
elements.forEach(function(element) {
let v = element.getAttribute('data-att');
let id = element.id;
s = v.split(",");
s.forEach(function(single) {
if (obj[single]) {
obj[single].push(id);
} else {
obj[single] = [id];
}
});
});
console.log(obj);
<!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>
<div id="due" data-att="foo"></div>
<div id="uno" data-att="foo"></div>
<div id="tre" data-att="foo,bar"></div>
<div id="quattro" data-att="brum"></div>
<div id="cinque" data-att="foo,brum"></div>
</body>
</html>
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>
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>
This question already has answers here:
JavaScript get TextArea input via .value or .innerHTML?
(5 answers)
Closed 7 years ago.
< script type = "text/javascript" >
function myFunction() {
var n1 = document.getElementById("form-control1").innerHTML;
var n2 = document.getElementById("form-control2").innerHTML;
return Math.max(n1, n2);
};
<!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">
<title>JavaScript Challenge</title>
</head>
<body>
<!-- user interface -->
First number
<input type="text" id="form-control1" placeholder="your first number">Second number
<input type="text" id="form-control2" placeholder="your second number">
<br>
<br>
<button onclick="myFunction()">Calculate</button>
</script>
</body>
</html>
I would like the user input value to be assigned on the variable n1 and n2. After that when the button is clicked the variable with the max value is shown up on the webpage. but at the moment the value does not seem to be stored as it says undefined.
what can i do? any help
Thanks in advance
Try substituting .value for .innerHTML at input elements to retrieve value of input element; create array containing n1, n2 , converting to values to Number using Array.prototype.map() , adding output element to print result of Math.max to document
<!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">
<title>JavaScript Challenge</title>
</head>
<body>
<!-- user interface -->
First number
<input type="text" id="form-control1" placeholder="your first number">Second number
<input type="text" id="form-control2" placeholder="your second number">
<output></output>
<br>
<br>
<button onclick="myFunction()">Calculate</button>
<script type="text/javascript">
function myFunction() {
var n1 = document.getElementById("form-control1").value;
var n2 = document.getElementById("form-control2").value;
document.querySelector("output").innerHTML = Math.max.apply(Math, [n1, n2]);
};
</script>
</body>
</html>
Convert the innerHTML string into an integer:
return Math.max(parseInt(n1),parseInt(n2));