I am attempting to make a button that when clicked outputs an integer from 1-11. I have tested the "getRandomInt" function and it works, however when I try to add the button aspect nothing comes up when I click the button. Also the console does not log any errors.
code:
<form>
<input type="button" onclick="getRandomInt()" value="Click Here">
<br>
</form>
<script type="text/javascript">
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
};
document.write(getRandomInt(1, 12));
</script>
Can someone explain it in layman's terms how to fix this because the function should be correct, I think the button is wrong somehow and I think the two aren't being connected properly.
You need to supply arguments to getRandomInt when you call it. You also need to wrap the function call in something like document.write so you can see the output
<form>
<input type="button" onclick="document.write(getRandomInt(1, 10))" value="Click Here">
<br>
</form>
<script type="text/javascript">
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
};
document.write(getRandomInt(1, 12));
</script>
You are missing the glue between your program logic (getRandomInt()) and the presentation (document.write()), i. e. later statement is not part of your button's event handler.
I'd like to propose the following solution which avoids calling document.write and instead sets the text property of a dedicated <span id='display-random'>:
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
var button = document.getElementById('button-random'),
display = document.getElementById('display-random');
button.addEventListener('click', function(event) {
display.textContent = getRandomInt(1, 12);
});
<form>
<input type="button" id="button-random" value="Click Here">
</form>
<span id="display-random"></span>
Related
Can anyone please help me with the code. im trying to generate numbers from range 12012300 to 12012400 in sequence and without repetition. Will be great if message is displayed saying generated number is reserved, below the textbox.
Thanks heaps in advance
<form>
<input name="code" id="code" type="text" placeholder="#########" value="" readonly />
<script type="text/javascript">
function makeid() {
return Math.floor(Math.random() * 100) + 12012300;
}
</script>
<input type="button" value="Generate Code" onclick="document.getElementById('code').value = makeid()"></input>
<input type="reset" value="Reset" />
</form>
You can use the basic example of closure, self-invoking function
If you need sequential numbers you do not need to use Math.random
let makeid = (() => {
let id = 12012300;
return () => {
if(id > 12012400 ) throw( 'max id reached')
return id++;
};
})();
console.log(makeid())
console.log(makeid())
console.log(makeid())
I'm trying to animate an output which is calculated based on a single input value * 4.5. The calculation itself is working but I cannot figure out how to animate the value, what I'm trying to do is have the output count up to the calculated value quite quickly. I've found https://codepen.io/shivasurya/pen/FatiB which has the count animation I'd like to implement, but can't figure out how to implement it to my input and output fields, so far I have:
<form id="ewcalc" oninput="updateOutput()">
<input name="income" type="number" value="0" />
<output for="income" name="loan">0</output>
</form>
<script type="text/javascript">
function updateOutput() {
var form = document.getElementById("ewcalc");
form.elements["loan"].value=eval(parseInt(form.elements["income"].value) * 4.5);
}
</script>
Any suggestions how I can implement the animation? I've tried several things, none of which are working, and getting errors if I try using onsubmit.
You'll probably want to use requestAnimationFrame like this:
function updateOutput() {
var income = $("#income").val() * 4.5;
var output = Number($("#loan").text());
if (income !== output) {
if (income > output)
output += 0.5;
else if (income < output)
output -= 0.5;
$("#loan").text(output);
requestAnimationFrame(updateOutput);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="ewcalc" oninput="updateOutput()">
<input id="income" type="number" value="0" />
<output for="income" id="loan">0</output>
</form>
All I'm trying to do is have the user click a button to generate a random number. It seems to work, but the number only displays for a second before disappearing.
Here is my code.
<!DOCTYPE html>
<head>
</head>
<body>
<h3>
This is a random number generator!
</h3>
<form onsubmit= "randomNumber()">
<input type="submit" value="Click me!">
</form>
<script>
function randomNumber() {
document.write(Math.floor(Math.random() * 10));
}
</script>
<p id="number">
</p>
</body>
</html>
You need
<form onsubmit="randomNumber(); return false;">
to prevent a new load of the page and
function randomNumber() {
document.getElementById('number').innerHTML = Math.floor(Math.random() * 10);
}
to set the value.
Nina's answer is good, but you don't really need a form for that. How about this instead of your form?
<button onclick="randomNumber()">Click me!</button>
Then the randomNumber function would go as Nina suggested:
function randomNumber() {
document.getElementById('number').innerText = Math.floor(Math.random() * 10);
}
Since there is no form, there's no need to prevent the form from actually being sent.
Incidentally, this would put the random number in the p with id "number", which I guess is what you wanted. However, if you want to leave a page which contains just the number, use document.write instead of document.getElementById..., as in your original snippet.
I am trying to make a random number generator using a form. When you press the button, and enter in the maximum number, it comes up with a dialog box reading NaN, when it is meant to come up with the random number.
I have some code that looks like this:
<html>
<head>
</head>
<body>
<form name="gen">
<h1>Random Number Generator</h1>
<b>Number:</b> 1 to
<input id="numgen" type="text"/>
<button name="generate" type="submit" onclick="gennum()">Generate!</button>
<script>
function gennum()
{
alert(Math.floor(Math.random() * num.value + 1));
}
var num = document.getElementById('numgen').value;
</script>
</form>
</body>
</html>
I am not very good with Javascript, but I know a bit. If anyone knows how to fix this, I would be happy.
num.value is a string. Use parseInt(num.value, 10) to turn it into a number, that way it can be added to a number appropriately.
Also, it looks like you're getting the value twice, and the first time is when the page loads (so it doesn't have a value yet:
var numElem = document.getElementById('numgen'); //remove value here
then in your function:
alert(Math.floor(Math.random() * parseInt(num.value + 1)));
and, you need to use type="button" on your button, or the page will reload.
Here's your code refactored with better practices.
Live demo here (click).
Markup:
<form name="gen">
<h1>Random Number Generator</h1>
<b>Number:</b> 1 to
<input id="numgen" type="text"/>
<button id="generate" type="button">Generate</button>
</form>
JavaScript:
/* get element references */
var genButton = document.getElementById('generate');
var numInput = document.getElementById('numgen');
//use javascript to add the click function
genButton.addEventListener('click', function() {
/* it's easier to read and debug if you break things up
* instead of putting it all on one line with tons of ((()))
*/
var rand = genRandom(1, parseInt(numInput.value, 10));
alert(rand);
});
function genRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
I want user to load page, default value is 10 so it should calculate all variables for default value first, then I want user to enter his own value and click submit and the value gets updated.
Seems it needs onclick event that should call a function to recalculate the value.
I tried first without intparse and .value and no onclick event, then I figured out I need Intparse and .value to get integer. When setting default value on input id 1 it calculates three numbers correctly upon page load.
However when I put it in a function before it would calculate all three numbers correctly then page would reload for some reason and it goes back to default, This one doesn't work at all.
Can somebody explain what I did wrong?
<html>
<head>
</head>
<body>
<form id="frm1">
<input type="number" id="1" name="1" value="10"><br>
<input type="submit" onclick="myFunction()" id="s" value="Submit">
</form>
<p id="t"></p>
<script type="application/javascript">
Function myFunction() {
var N = parseInt(document.getElementById("1").value);
var m = N;
var cm = m * 100;
var mm = m * 1000;
document.getElementById("t").innerHTML = "" + m + " " + cm + " " + mm; }
</script>
</body>
</html>
Change the form to a div. This worked for me when I tried to run your code.