verify input isn't working properly in javascript/jquery - javascript

I basically created this game that generates balls of random number on the screen based on the number of balls user types in to display, Then on the right side, he has to input the ball numbers in order and click verify, if he gets it right, it says "correct" otherwise it says "Sorry the correct number is " then is shows the actual order of the numbers. The problem is, whenever i click on verify, the result is always correct, even if i didn't input any number or even if the numbers r wrong. What is the mistake i am making? here r my codes: I will put a command next to the verify part of the program so it can be easier for u to locate the problem.
<html>
<head>
</head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
window.onload=draw;
var xArr=[];
var choose;
function draw(){
var canvas= document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var id;
var x;
var y;
var r;
var i;
var balls=[{"id":1,"x":85,"y":90,"r":40},{"id":2,"x":180,"y":90,"r":40},{"id":3,"x":270,"y":90,"r":40},{"id":4,"x":360,"y":90,"r":40},
{"id":5,"x":450,"y":90,"r":40},{"id":6,"x":535,"y":90,"r":40},{"id":7,"x":623,"y":90,"r":40},{"id":8,"x":710,"y":90,"r":40},
{"id":9,"x":85,"y":190,"r":40},{"id":10,"x":180,"y":190,"r":40},{"id":11,"x":270,"y":190,"r":40},{"id":12,"x":360,"y":190,"r":40},
{"id":13,"x":450,"y":190,"r":40},{"id":14,"x":535,"y":190,"r":40},{"id":15,"x":623,"y":190,"r":40},{"id":16,"x":710,"y":190,"r":40},
{"id":17,"x":85,"y":290,"r":40},{"id":18,"x":180,"y":290,"r":40},{"id":19,"x":270,"y":290,"r":40},{"id":20,"x":360,"y":290,"r":40},
{"id":21,"x":450,"y":290,"r":40},{"id":22,"x":535,"y":290,"r":40},{"id":23,"x":623,"y":290,"r":40},{"id":24,"x":710,"y":290,"r":40},
{"id":25,"x":85,"y":390,"r":40},{"id":26,"x":180,"y":390,"r":40},{"id":27,"x":270,"y":390,"r":40},{"id":28,"x":360,"y":390,"r":40},
{"id":29,"x":450,"y":390,"r":40},{"id":30,"x":535,"y":390,"r":40},{"id":31,"x":623,"y":390,"r":40},{"id":32,"x":710,"y":390,"r":40},
{"id":33,"x":85,"y":490,"r":40},{"id":34,"x":180,"y":490,"r":40},{"id":35,"x":270,"y":490,"r":40},{"id":36,"x":360,"y":490,"r":40},
{"id":37,"x":450,"y":490,"r":40},{"id":38,"x":535,"y":490,"r":40},{"id":39,"x":623,"y":490,"r":40},{"id":40,"x":710,"y":490,"r":40},
{"id":41,"x":85,"y":590,"r":40},{"id":42,"x":180,"y":590,"r":40},{"id":43,"x":270,"y":590,"r":40},{"id":44,"x":360,"y":590,"r":40},
{"id":45,"x":450,"y":590,"r":40},{"id":46,"x":535,"y":590,"r":40},{"id":47,"x":623,"y":590,"r":40},{"id":48,"x":710,"y":590,"r":40},
{"id":49,"x":85,"y":690,"r":40},{"id":50,"x":85,"y":690,"r":40}];
var texts=[];
for(i=1;i<=balls.length;i++){
texts[i]=i;
}
var x=[];
var t=[];
var xstep=0;
choose=parseFloat(prompt("enter the number of balls u want to see"));
for (i=0; i<choose; i++) {
var b = getRandomBall();
x.push(b);
ctx.fillStyle = "#800000";
ctx.strokeStyle = "#000000";
ctx.beginPath();
xstep=xstep+120;
var ystep=90;
ctx.arc(xstep, ystep, 50, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
ctx.fillStyle = 'black';
ctx.fillText(b.id, xstep, ystep);
console.log(i);
$(".selected").append('<label>Enter a number: </label><input type="text" name="userNumber'+i+'" id="userNumber'+i+'"><br /><br />');
}
function getRandomBall(){
var r = Math.floor(Math.random() * balls.length);
return balls.splice(r,1)[0];
}
xArr = x;
}
draw()
</script>
<body>
<div id="leftside" width="900" height="1000" style="border: 2px solid #000000">
<canvas id="canvas" width="800" height="800" style="border: 2px solid #000000">
</canvas>
<div id="rightside" width="300" height="800" style="border 2px solid #000000; float: right; margin-right:100px;">
<form action="#" method="get" >
<div class="selected"></div>
<input type="button" id="verifyBtn" value="verify">
<hr>
</form>
the result is:
<div id="result" style="font-size: 14px"></div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){ //here is the issue
for (i=0; i<choose; i++) {
$("#verifyBtn").click(function(){
if(($('#userNumber'+i).val()==xArr[i])){
$("#result").css({color:'green'});
$("#result").text("correct");
}
else{
$("#result").css({color:'red'});
$("#result").text("sorry: try again"+ " correct number was "+xArr);
}
})
}
})
</script>
</html>

Related

What function do I need to measure how far the user was from the green pocket on the roulette using angles?

This is my code for the roulette. It spins and stops with the button but I need it something to tell me how far the user was from the green pocket after they pressed stop. It has to be measured in angles.
<html>
<head>
<body>
<input type="button" value="START" style="bottom: auto" onClick="spinning()">
<input type="button" value="STOP" style="bottom: auto" onClick="stop()">
<p>
Spin the roulette and try to get it to land on the green pocket as accurately as possible.
</p>
<canvas id="newCanvas" width="1000" height="1000"></canvas>
<script>
"use strict";
var a = document.getElementById("newCanvas");
var c = a.getContext("2d");
var increaseAngle=0;
c.beginPath();
c.arc(200,200,195,0,2*Math.PI);
c.fillStyle="black"
c.fill();
spinning();
function spinning() {
increaseAngle+=0.08;
for (var i=0; i<20; i++) {
var angleSize=2*Math.PI/20;
c.beginPath();
c.moveTo(200,200);
c.arc(200,200,180, angleSize * i+increaseAngle, angleSize * (i+1)+increaseAngle);
c.lineTo(200,200);
c.fillStyle="black"
c.fill();
if (i%2 == 0) {
c.fillStyle="red"
c.fill();
}
}
if (i%2==0){
c.fillStyle="green"
c.fill();
}
angleSize++;
pause = window.setTimeout(spinning,17)
}
var pause;
function stop() {
clearTimeout(pause);
}
//arrow
c.beginPath();
c.rect(190,0,25,60);
c.fillStyle="yellow";
c.fill();
</script>
</body>
</head>
</html>
I just have to add a function to this that can measure the distance.

Using a variable to draw a line (canvas)

I'm trying to use an input into a search bar (length (in the code)) to draw a line of 'length' length.
I've set up a very rough canvas area, the search/variable input but can't seem to link them together. Currently, I have the variable in the lineTo direction and it does plot, but only remains static even if the variable is updated.
function myFunction() {
var length = document.getElementById("myText").value;
}
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(100,25);
ctx.lineTo(length,25);
ctx.stroke();
<canvas id="myCanvas" width="500" height="50"
style="border:1px solid #d3d3d3;">
</canvas>
<input class="search" type="number" id="myText" value="Size...">
<button class="button" onclick="myFunction()">Size</button>
<p id="demo"></p>

The canvas interaction commands run once. To redraw each time, place the code inside the myFunction:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
function myFunction() {
var length = document.getElementById("myText").value;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(100, 25);
ctx.lineTo(length, 25);
ctx.stroke();
ctx.closePath();
}
myFunction();
<canvas id="myCanvas" width="500" height="50" style="border:1px solid #d3d3d3;">
</canvas>
<input class="search" type="number" id="myText" value="Size...">
<button class="button" onclick="myFunction()">Size</button>
<p id="demo"></p>

I recommend
<canvas id="myCanvas" width="500" height="50"
style="border:1px solid #d3d3d3;">
</canvas>
<input class="search" type="number" id="myText">
<button class="button" onclick="myFunction()">Size</button>
<p id="demo"></p>
I removed "value="Size..."" I don't know if you had more intentions with that
var canvas = document.getElementById("myCanvas");
function myFunction() {
var length = document.getElementById("myText").value || 100;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(length,25);
ctx.lineTo(0,25);
ctx.stroke();
}
myFunction()

HTML5 Everything disappears after clicking a button

I'm new to html5.
I'm not sure what happened here, I'm trying to make it so whenever the button is clicked, a quadratic function appears in the canvas. But in what I wrote, whenever I click the button everything disappears right after actually plotting the requested curve.
Here's the code jsfiddle
<!DOCTYPE html>
<body>
<form action="">
a: <input type="text" name="tbax2" id="itbax2" value=0.01 size="4">
b: <input type="text" name="tbbx" id="itbbx" value=1 size="4">
c: <input type="text" name="tbc" id="itbc" value=40 size="4">
<button onclick="dibujarCurva()">Graficar</button>
</form>
<canvas id="myCanvas" width="500" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
function dibujarCurva(){
var ax2 = parseFloat(document.getElementById('itbax2').value);
var bx = parseFloat(document.getElementById('itbbx').value);
var c = parseFloat(document.getElementById('itbc').value);
ctx.beginPath();
ctx.strokeStyle = '#FF0000'
x=0
ctx.moveTo(0,150-(ax2*(x-250)*(x-250) + bx*(x-250) + c));
while (x<501){
ctx.lineTo(x,150-(ax2*(x-250)*(x-250) + bx*(x-250) + c));
x=x+10
ctx.stroke();}
ctx.closePath();
}
function dibujarGrid(){
ctx.beginPath();
ctx.strokeStyle = '#F2F2F2'
ctx.moveTo(0,0);
x=0
while (x<501){
ctx.moveTo(x,0);
ctx.lineTo(x,300);
x=x+10
ctx.stroke();}
x=0
while (x<301){
ctx.moveTo(0,x);
ctx.lineTo(500,x);
x=x+10
ctx.stroke();}
ctx.closePath();
ctx.beginPath();
ctx.strokeStyle = '#000000'
ctx.moveTo(250,0);
ctx.lineTo(250,300);
ctx.stroke();
ctx.moveTo(0,150);
ctx.lineTo(500,150);
ctx.stroke();
}
dibujarGrid()
ctx.fillText(("ax^2 + bx + c"),10,20);
</script>
</body>

Seems to be trying to submit the form.
A quick and easy fix is to change your onclick as follows:
<button onclick="return dibujarCurva()">Graficar</button>
and add a
return false;
to the end of the dibujarCurva() function.
This is useful if you want to conditionally submit. However, as slicedtoad and acontell pointed out the following will also solve it without any modification to the function.
<button type="button" onclick="dibujarCurva()">Graficar</button>

You can add the type attribute of the button and prevent it from sending the form:
<button type="button" onclick="dibujarCurva()">Graficar</button>

Drawing circles to canvas using functions

<div>
<canvas id="canvas" width="250px" height="400px" style="border: 1px solid black" onload="drawCircle()"></canvas>
</div>
<script type="text/javascript" src="canvasjs.js"></script>
</body>
</html>
var canv = document.getElementById("canvas");
var ctx = canv.getContext("2d");
function drawCircle(){
ctx.fillStyle="blue";
ctx.beginPath();
ctx.arc(50,50,50,0,Math.PI*2);
ctx.closePath();
ctx.fill();
}
Just wondering if anyone can tell me why this does not draw to canvas. If I remove the code from the function it works.

You did not invoke your function.
please append this code below your codes;
drawCircle();

HTML5 Canvas text not appearing

I am trying to display a text on a canvas by entering a message in a textbox but it's not appearing.
Here is my code:
<html>
<body>
<canvas id="myCanvas" width="600" height="400"></canvas>
<input type="text" name="fname" size="50" id="form_val">
<button onclick="clicked()">Submit</button>
<script type="text/javascript">
function clicked () {
var x = document.getElementById("form_val");
return x.value;
}
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "25px Verdana";
ctx.fillText(clicked(), 250, 250);
</script>
</body>
</html>

The code outside of your function is triggered immediately, put it inside the function so it's called when it needs to be (as it currently stands, it calls nothing. And when you click the button, it's returning the input value to the onclick method. Try this instead:
function clicked(){
var x=document.getElementById("form_val");
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="25px Verdana";
ctx.fillText(x.value,250,250);
}

HTML:
<canvas id="myCanvas" width="600" height="400"></canvas>
<input type="text" name="fname" size="50" id="form_val">
<button id='submit'>Submit</button>
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="25px Verdana";
document.getElementById('submit').addEventListener('click', clicked);
function clicked(){
var x=document.getElementById("form_val");
// Create the text when the button is clicked
ctx.fillText(x.value,250,250);
}
Fiddle.

I believe you want to do something like this
<script type="text/javascript">
function clicked(){
var x=document.getElementById("form_val");
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="25px Verdana";
ctx.fillText(x.value,250,250);
}
With this, the text will be filled when clicking the button. Note: I haven't tested the code, but you might get the picture

Categories