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>
Related
I am facing a problem using mathjax. the equations already available are formatted but the equations that I put by myself are not being formatted.
here is my code:
<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>
<script async="true" src="https://cdn.jsdelivr.net/npm/mathjax#2/MathJax.js?config=AM_CHTML">
</script>
</head>
<body>
<input type="text" id="eq">
<button onclick="amb()">equation</button>
<p id="amb"></p>
<p>`x^3`</p>
<script>
function amb() {
eq = document.getElementById('eq').value;
document.getElementById('amb').append("`" + eq + "`");
}
</script>
</body>
</html>
First, I suggest use a form and a type=submit button for a better UX.
I found the solution you need to queue an action to rescan the page: MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
<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>
<script async="true" src="https://cdn.jsdelivr.net/npm/mathjax#2/MathJax.js?config=AM_CHTML">
</script>
</head>
<body>
<form onsubmit="amb(); return false">
<input type="text" id="eq">
<input type="submit" value="equation">
</form>
<p id="amb"></p>
<p>`x^3`</p>
<script>
function amb() {
eq = document.getElementById('eq').value;
document.getElementById('amb').innerText = ("`" + eq + "`");
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
}
</script>
</body>
</html>
I have a problem guys. As a beginner, I am trying to check the length of password and return the result, but it doesn't work. after clicking button, it does nothing. What am I doing wrong?
<!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>
<script>
function checkpassword(){
var pas=document.getElementByName(passcode).value;
var x=pas.length;
if(x<8){
document.getElementById(message).innerHTML="Error 404!";
}
else{
document.getElementById(message).innerHTML="It's acceptable"
}
}
</script>
<body>
<input type="password" name="passcode" placeholder="Enter password to check">
<input type="submit" value="submit" onclick="checkpassword()">
<p id="message"></p>
</body>
</html>
#'Felix Kling' and #'Daniel A. White have given some hints in the comments because you will have to pass the names and ids as strings. But another issue is that .getElementByName() is not a function. You can try this (note that I have used .getElementsByName (plural) and referenced the zero-ith index:
<!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>
<script>
function checkpassword(){
var pas=document.getElementsByName('passcode')[0].value;
var x=pas.length;
if(x<8){
document.getElementById("message").innerHTML="Error 404!";
}
else{
document.getElementById("message").innerHTML="It's acceptable"
}
}
</script>
<body>
<input type="password" name="passcode" placeholder="Enter password to check">
<input type="submit" value="submit" onclick="checkpassword()">
<p id="message"></p>
</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>
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>