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>
Related
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 have develop a todo app. where user insert some values and it gets save on the screen. now i want to save the values into localstorage.but its not getting saved instead i am getting a empty {}.
here is the javascript code
//crete element from input box and delete
let knoo = document.getElementById('kno')
let box= document.getElementById('txt')
let sub= document.getElementById('sub').addEventListener('click',()=>{
let para = document.createElement('ul')
para.innerText= box.value
knoo.appendChild(para)
box.value=''
localStorage.setItem('key', JSON.stringify(para))
//styling
para.addEventListener('click', ()=>{
para.style.textDecoration = 'line-through'
})
//delete
para.addEventListener('dblclick', ()=>{
knoo.removeChild(para)
})
})
here is the 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>Document</title>
</head>
<body>
<h2>hi</h2>
<div id="hello">
<h1>hello</h1>
</div>
<button id="btn">delete</button> <br>
<br>
<input type="text" id="txt">
<button type="submit" id="sub">+</button>
<div id="kno"></div>
<script src="main.js"></script>
</body>
</html>
That is because you use JSON.stringify with a html element which will not work and it will always produce {}.
The JSON.stringify() method converts a JavaScript object or value to a JSON string
I solution is to use array to store the value for para and use JSON.stringify for the array
let knoo = document.getElementById('kno')
let box= document.getElementById('txt')
let storedvalue = []
if(localStorage.getItem('key')){
storedvalue = localStorage.getItem('key');
}
let sub= document.getElementById('sub').addEventListener('click',()=>{
let para = document.createElement('ul')
para.innerText= box.value
knoo.appendChild(para)
box.value=''
storedvalue.push(para.innerText)
localStorage.setItem('key', JSON.stringify(storedvalue))
//styling
para.addEventListener('click', ()=>{
para.style.textDecoration = 'line-through'
})
//delete
para.addEventListener('dblclick', ()=>{
knoo.removeChild(para)
})
})
<!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>
<h2>hi</h2>
<div id="hello">
<h1>hello</h1>
</div>
<button id="btn">delete</button> <br>
<br>
<input type="text" id="txt">
<button type="submit" id="sub">+</button>
<div id="kno"></div>
<script src="main.js"></script>
</body>
</html>
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>
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!
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
I'm trying to make a very simple app in javascript in order to get rgb color to be divided by 255. I want the result to appear on the index.html page but it hasn't worked can anyone tell me how to fix it.
Here is my HTML code:
<!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>app</title>
</head>
<body>
<script src="app.js"></script>
<p id="red"></p>
</body>
</html>
Here is my javascript code:
let red = prompt("Enter the red number here");
let green = prompt("Enter the green number here");
let blue = prompt("Enter the blue number here.");
let resultR = red/255;
let resultG = green/255;
let resultB = blue/255;
document.getElementById("red").innerHTML = resultR;
It works fine though...
The problem may be that you call the JavaScript before Html so can't find the element.
let red = prompt("Enter the red number here");
let green = prompt("Enter the green number here");
let blue = prompt("Enter the blue number here.");
let resultR = red/255;
let resultG = green/255;
let resultB = blue/255;
document.getElementById("red").innerHTML = resultR;
<!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>app</title>
</head>
<body>
<script src="app.js"></script>
<p id="red"></p>
</body>
</html>