I have a problem with my jQuery Code
I want to randomize numbers in a range and I wrote this:
jQuery Code:
$("#button").click(function() {
var numLow = $("#lownumber").value();
var numHigh = $("#highnumber").value();
var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;
var numRand = Math.floor(Math.random() * adjustedHigh) + parseFloat(numLow);
if ((isFinite(numLow)) && (isFinite(numHigh)) && parseFloat(numLow) <= parseFloat(numHigh) && (numLow != '') && (numHigh != '')) {
$("#random").text(numRand);
} else {
$("#random").text("Ops... an error!");
}
return false;
});
HTML page:
<body>
<div class="text">Random</div>
<input type="text" id="lownumber" value="1">
<input type="text" id="highnumber" value="100">
<input type="submit" id="button" value="Generate!">
<div id="random"></div>
<script type="text/javascript" src="js/random.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
PLEASE HELP ME! T.T
It is suppose to be .val() Not .value() So now it works..
$("#button").click(function(){
var numLow = $("#lownumber").val();
var numHigh = $("#highnumber").val();
var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow))+1;
var numRand = Math.floor(Math.random()*adjustedHigh)+parseFloat(numLow);
if((isFinite(numLow)) && (isFinite(numHigh)) && parseFloat(numLow) <= parseFloat(numHigh) && (numLow != '') && (numHigh != '')){
$("#random").text(numRand);
} else {
$("#random").text("Ops... an error!");
}
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="text">Random</div>
<input type="text" id="lownumber" value="1">
<input type="text" id="highnumber" value="100">
<input type="submit" id="button" value="Generate!">
<div id="random"></div>
</body>
Related
I hope I'm not repeating a question but I've searched around and couldnt find help so I thought I should ask directly, I'm still a beginner and this is an assignment for my class so please be as thorough as possible
I'm trying to create a form where as the user clicks on another field, it checks if the input he put in the first one is as required by the website, without having to click enter or a submit button.
this is the HTML file.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="test.js"></script>
<script>
$(document).ready(function(){
$("div.ID").focusin(function(){
$(this).css("background-color", "#FFFFCC");
});
$("div.ID").focusout(function(){
$(this).css("background-color", "#FFFFFF");
userid_validation(userid,5,12);
});
});
</script>
</head>
<body>
<div class="ID" >
User ID: <input type="text" name="userid" size="12" />
</div>
<div class="pass">
Password: <input type="text" name="psw" size="12" />
</div>
</body>
</html>
and this is the JS file
function userid_validation(userid,mx,my)
{
var uid_len = userid.value.length;
if (uid_len == 0 || uid_len >= my || uid_len < mx)
{
alert("User Id should not be empty / length be between "+mx+" to "+my);
//uid.focus();
return false;
}
return true;
}
I'm most probably doing something completely wrong but I don't know what. thanks in advance !
You need to apply focusin and foucsout on input elements. Currently you have applied it on div. Also you have code error on calling following function,
userid_validation(userid, 5, 12); // userid not defined.
Please check if this works.
function userid_validation(userid, min, max) {
var uid_len = userid.length;
if (uid_len == 0 || uid_len > max || uid_len < min) {
alert("User Id should not be empty / length be between " + min+ " to " + max);
//uid.focus();
return false;
}
return true;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="test.js"></script>
<script>
$(document).ready(function() {
$("div.ID").find('input').focusin(function() {
$(this).css("background-color", "#FFFFCC");
});
$("div.ID").find('input').focusout(function() {
$(this).css("background-color", "#FFFFFF");
userid_validation($(this).val(), 5, 12);
});
});
</script>
</head>
<body>
<div class="ID">
User ID:
<input type="text" name="userid" size="12" />
</div>
<div class="pass">
Password:
<input type="text" name="psw" size="12" />
</div>
</body>
</html>
This JS program should return function ggt(x,z). I tried to implement it this way, everything is ok except this part I believe: document.getElementById("demo").innerHTML=ggt(x,z);
What should be added to make this function work properly? Thanks
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function calculate(){
var a=document.getElementById("in1").value;
var b=document.getElementById("in2").value;
if(isNaN(a) || isNaN(b)){
alert("Not a number");
}else{
ggt(a,b);
}
}
function ggt(x,y){
if (y==0){
return x;
}else{
var z=x%y;
document.getElementById("demo").innerHTML=ggt(x,z);
return ggt(x,z);
}
}
</script>
<div>
<input id="in1" type="text" />
<input id="in2" type="text" />
<input type="button" onclick="calculate()" value="compute" />
<p id="demo"></p>
</div>
</body>
</html>
function calculate()
{
var a = document.getElementById("in1").value;
var b = document.getElementById("in2").value;
if (isNaN(a) || isNaN(b)) {
alert("Not a number");
} else {
var values = ggt(a, b);
console.log(values);
if (values.valid) {
document.getElementById("demonumber").innerHTML = values.number;
document.getElementById("demomodulus").innerHTML = values.modulo;
}
}
}
function ggt(x, y) {
var res = {};
if (y == 0) {
res.valid = false;
} else {
res.valid = true;
res.number = x;
res.modulo = x % y;
}
return res
}
<div>
<input id="in1" type="text" />
<input id="in2" type="text" />
<input type="button" onclick="calculate()" value="compute" />
<p id="demonumber"></p>
<p id="demomodulus"></p>
</div>
I have this html code with javascript. My average value displays correctly but my find minimum is not displaying anything. Its supposed to show when the user clicks on the find min button on the box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculate Your Grade</title>
<link rel="stylesheet" href="calc.css">
<script>
var $ = function (id) {
return document.getElementById(id);
}
var calculateGrade = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3=parseFloat($("exam3").value);
if (isNaN(exam1) || isNaN(exam2) ) {
alert("All three entries must be numeric");
}
else {
var average = (exam1 + exam2 + exam3) / 3;
$("average").value = average;
}
}
var min = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3=parseFloat($("exam3").value);
if ( (exam1<exam2) && (exam1<exam3)){
$("mini").value=exam1;}
else if ((exam2<exam1) && (exam2<exam3)){
$("mini").value=exam2;}
else {
$("mini").value=exam3;
}
}
window.onload = function () {
$("calculate").onclick = calculateGrade;
$("mini").onclick = min;
$("exam1").focus();
}
</script>
</head>
<body>
<section>
<h1>Calculate Average</h1>
<label for="exam1">Exam1:</label>
<input type="text" id="exam1"><br>
<label for="exam2">Exam2:</label>
<input type="text" id="exam2"><br>
<label for="exam3">Exam3:</label>
<input type="text" id="exam3"><br>
<label for="average"></label>
<input type="text" id="average"disabled ><br>
<label> </label>
<input type="button" id="calculate" value="Calc Avg">
<input type="button" id="mini" value="Find min">
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculate Your Grade</title>
<link rel="stylesheet" href="calc.css">
<script>
var $ = function (id) {
return document.getElementById(id);
}
var average = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3 = parseFloat($("exam3").value);
if (isNaN(exam1) || isNaN(exam2) || isNaN(exam3)) {
alert("All three entries must be numeric");
}
else {
var average = (exam1 + exam2 + exam3) / 3;
$("result").value = average;
}
}
var min = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3 = parseFloat($("exam3").value);
if (isNaN(exam1) || isNaN(exam2) || isNaN(exam3)) {
alert("All three entries must be numeric");
} else {
$("result").value = Math.min(exam1,exam2,exam3);
}
}
window.onload = function () {
$("average").onclick = average;
$("mini").onclick = min;
$("exam1").focus();
}
</script>
</head>
<body>
<section>
<h1>Calculate</h1>
<label for="exam1">Exam1:</label>
<input type="text" id="exam1"><br>
<label for="exam2">Exam2:</label>
<input type="text" id="exam2"><br>
<label for="exam3">Exam3:</label>
<input type="text" id="exam3"><br>
<label for="average"></label>
<input type="text" id="result" disabled ><br>
<label> </label>
<input type="button" id="average" value="Calc Avg">
<input type="button" id="mini" value="Find min">
</section>
</body>
</html>
The issue is with the min function. Instead of setting the value of textbox (probably, missing in your code example) you are setting the value of button "mini" (which is incorrect).
Update:
You need to be including one more textbox <input type="text" id="txtMin" disabled ><br>
and update your min function to set the value of it, as follows:
$("txtMin").value=exam1;
...
$("txtMin").value=exam2;
...
$("txtMin").value=exam3;
I'm making this calculator and have no idea why nothing comes into tulos box. Here is the code, I hope someone can help me. I'm starter with these kind of things, so there might be some really big mistakes in code.
<html>
<head>
<title>Laskurit</title>
</head>
<body>
<script language="JavaScript">
<!--
function Laskin() {
var paino = document.korvaus.paino.value;
var hinta = document.korvaus.hinta.value;
var mista = document.korvaus.mista.value;
var tulos;
if (mista == "koti")
{
paino *= 20 == koti1;
if (koti1 >= hinta)
{
tulos = hinta;
}
else
{
tulos = koti1;
}
}
else if (mista == "ulko")
{
paino *= 9,75 == ulko1;
if (ulko1 >= hinta)
{
tulos = hinta;
}
else
{
tulos = ulko1;
}
}
document.korvaus.tulos.value = tulos;
}
-->
</script>
<p><b>Korvauslaskuri</b></p>
<form name="korvaus">
<table><tr><td>Paino: <td><input type="text" name="paino"><br>
<tr><td>Kokonaishinta(€): <td><input type="text" name"hinta"><br>
<tr><td>Mistä/mihin?<br>
<td><select name="mista">
<option value="koti">Kotimaa</option>
<option value="ulko">Ulkomaa</option>
</select>
<tr><td>
<p>Korvausmäärä(€):</p>
<td><p><input type="text" size="40" name="tulos"></p>
</table></form>
<form name="nappulalomake">
<p><input type="button" name="B1" value="Laske" onClick="Laskin()"></p>
</form>
</body>
</html>
Not exactly sure what you are trying to accomplish but there were a few syntax errors in your code. Here working code
<html>
<head>
<title>Laskurit</title>
<script language="JavaScript">
<!--
function Laskin() {
var paino = document.korvaus.paino.value;
var hinta = document.korvaus.hinta.value;
var mista = document.korvaus.mista.value;
var tulos;
if (mista == "koti")
{
var koti1 = paino *20;
if (koti1 >= hinta)
{
tulos = hinta;
}
else
{
tulos = koti1;
}
}
else if (mista == "ulko")
{
var ulko1 = paino *9.75;
if (ulko1 >= hinta)
{
tulos = hinta;
}
else
{
tulos = ulko1;
}
}
document.korvaus.tulos.value = tulos;
}
-->
</script>
</head>
<body>
<p><b>Korvauslaskuri</b></p>
<form name="korvaus">
<table border=0>
<tr><td>Paino: </TD><td><input type="text" name="paino"></td></tr>
<tr><td>Kokonaishinta(€):</tD><td><input type="text" name="hinta"></td></tr>
<tr><td>Mistä/mihin?</td><td><select name="mista">
<option value="koti">Kotimaa</option>
<option value="ulko">Ulkomaa</option>
</select>
</td></tr>
<tr><td>
<p>Korvausmäärä(€):</p></td>
<td><p><input type="text" size="40" name="tulos"></p></td>
</tr>
</table></form>
<form name="nappulalomake">
<p><input type="button" name="B1" value="Laske" onClick="Laskin()"></p>
</form>
</body>
</html>
I have my existing code for multiplication
<label>Number of Shares:</label><input name="shares" id="shares" type="text" />
<input name="shares2" id="shares2" type="text" />
<br />
Total Value: € <span id="result"></span>
here is my script
$("#shares").keyup(function()
$("#shares2").keyup(function()
{
var val1 = parseFloat($(this).val());
var val2 = parseFloat($(this).val());
val3 = (val ? val * val2 : "Invalid number");
$("#result").text(val3);
})
How can i add the second input with the id shares2 in the script?
My code is a mess.
I wrote this and I think it does what you want:
var multiplyShares = function() {
var val1 = parseFloat($('#shares').val())
var val2 = parseFloat($('#shares2').val())
val3 = val1 * val2 || "Invalid number"
$("#result").html(val3)
}
$("#shares").keyup(function() { multiplyShares(); });
$("#shares2").keyup(function() { multiplyShares(); });
Here is an example of it working. Let me know if this helps:
http://jsfiddle.net/8dhME/
OK, I'm just leaving so I'll have to explain this later, but try this:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".js-calc").keyup(function(){
var val1 = parseInt($("#shares").val());
var val2 = parseInt($("#shares2").val());
if ( ! isNaN(val1) && ! isNaN(val2))
{
$("#result").text(val1 + val2);
}
});
});
</script>
</head>
<body>
<form>
<label>Number of Shares:</label>
<input class="js-calc" name="shares" id="shares" type="text" />
<input class="js-calc" name="shares2" id="shares2" type="text" />
</form>
<br />
Total Value: € <span id="result"></span>
</body>
</html>
Notice I put class="js-calc" on the input elements so we only need to target the class, not two ID's.