I'm making a new game, I want the amount of circles in the game to be inputed by the player, but am having difficulty setting up the variable from HTML into javascript.
I have determined that the problem only relies on the 'i' variable not being set correctly, since replacing 'document.getElementsByName('circles').value;' with any number works fine.
<div>
<form>
<input type="number" Name="circles" id = "circles" min="2" max="50"
value="2">
<input type="submit">
</form>
</div>
<div id="container">
<canvas id="myCanvas" width="800" height="800">
</canvas>
</div>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i = document.getElementsByName('circles').value;
for (i; i > 0; i= i-1) {
ctx.beginPath();
ctx.arc(Math.random()*c.width+1, Math.random()*c.height+1, 25, 0, 2 *
Math.PI);
ctx.stroke();
}
</script>
I expect the number of appearing circles to be the same as the given value, but instead nothing happens.
Get value by id not using names and make input type as button not submit.
function a(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i = document.getElementById('circles').value;
console.log(i)
for (i; i > 0; i= i-1) {
ctx.beginPath();
ctx.arc(Math.random()*c.width+1, Math.random()*c.height+1, 25, 0, 2 *
Math.PI);
ctx.stroke();
}}
<div>
<form>
<input type="number" Name="circles" id = "circles" min="2" max="50"/>
<input type="button" onclick='a()' value="Click"/>
</form>
</div>
<div id="container">
<canvas id="myCanvas" width="800" height="800">
</canvas>
</div>
Related
While working on the html code which contains some javascript code as well, i saw that the programm works but gives the results needed fast and then erases them in one single moment (I think that the problem is not rooted in the javascript code). What I need is to pause those results on screen, not erase them. Here is the code:
<html>
<head>
<title>Geometric operations</title>
<script>
function Calculate(){
var radius=document.forms["form1"]["radius"].value;
if (radius==null || radius=="" || isNaN(radius)){
alert("Please give the radius of the circle");
return false;
}
var radius = parseInt(document.getElementById("radius").value,5);
var perimeter = (2 * radius * Math.PI);
var embadon = (radius * radius * Math.PI);
document.getElementById("perimeter").value = perimeter;
document.getElementById("embadon").value = embadon;
}
</script>
</head>
<body>
<h1>Calculation of circle perimeter and circle area</h1>
To calculate the circle perimeter and circle area you need to give the radius and then press the button<b>"Calculation"</b><br>
<form name="form1" action="" method="" onSubmit="return Calculate()">
<pre>
Circle radius : <input type="text" id="radius" size=5> m<br>
Circle perimeter : <input type="text" id='perimeter' size=5> m <br>
Circle area : <input type="text" id='embadon' size=5> m^2<br>
<input type="submit" name="submit" value="Calculation" onclick="Calculate()">
</pre></form>
</body>
</html>
Thanks in advance for any help or insight as to why this happens.
You run to send the form and execution of the function. The function is sent and the page is refreshed. Change the type of button type="submit" to type="button" and add return false;in the function.
<html>
<head>
<title>Geometric operations</title>
<script>
function Calculate(){
var radius=document.forms["form1"]["radius"].value;
if (radius==null || radius=="" || isNaN(radius)){
alert("Please give the radius of the circle");
return false;
}
var radius = parseInt(document.getElementById("radius").value,5);
var perimeter = (2 * radius * Math.PI);
var embadon = (radius * radius * Math.PI);
document.getElementById("perimeter").value = perimeter;
document.getElementById("embadon").value = embadon;
return false;
}
</script>
</head>
<body>
<h1>Calculation of circle perimeter and circle area</h1>
To calculate the circle perimeter and circle area you need to give the radius and then press the button<b>"Calculation"</b><br>
<form name="form1" action="" method="" onSubmit="return Calculate()">
<pre>
Circle radius : <input type="text" id="radius" size=5> m<br>
Circle perimeter : <input type="text" id='perimeter' size=5> m <br>
Circle area : <input type="text" id='embadon' size=5> m^2<br>
<input type="button" name="submit" value="Calculation" onclick="Calculate()">
</pre></form>
</body>
</html>
Here it is:
<html>
<head>
<title>Geometric operations</title>
<script>
function Calculate(){
var radius=document.forms["form1"]["radius"].value;
if (radius==null || radius=="" || isNaN(radius)){
alert("Please give the radius of the circle");
return false;
}
var num=2;
var PI=3.14159;
var radius=document.forms["form1"]["radius"].value;
var perimeter = ((num) * (radius) * (PI));
var embadon = ((radius) * (radius) * (PI));
document.getElementById("perimeter").value = perimeter;
document.getElementById("embadon").value = embadon;
return false;
}
</script>
</head>
<body>
<h1>Calculation of circle perimeter and circle area</h1>
To calculate the circle perimeter and circle area you need to give the
radius and then press the button<b>"Calculation"</b><br>
<form name="form1" action="" method="" onSubmit="return Calculate()">
<pre>
Circle radius : <input type="text" id="radius" size=5> m<br>
Circle perimeter : <input type="text" id='perimeter' size=5> m <br>
Circle area : <input type="text" id='embadon' size=5> m^2<br>
<input type="button" name="SUBMIT" value="Calculation"onclick="Calculate()">
</pre></form>
</body>
</html>
I am making a simple Lissajous Figure Generator in JS.
I cannot get working displaying current slider values in html code.
Here's the complete code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<meta charset="UTF-8">
<title>Lissajous figures</title>
<br>
<script type="application/javascript">
var ctx;
var timer = null;
var aS = new Array();
var rad = 189;
var max=3*360, m1=max-1, m2 = max/2;
var iXo=0, iYo=m2/2;
var parN=2, parM=1;
function init() {
var canvas = document.getElementById("field");
if (canvas.getContext) { ctx = canvas.getContext("2d");
sf=Math.sin(3.14159265/m2); cf=Math.cos(3.14159265/m2);
s=-sf; c=cf;
for (i=0; i<m2; i++) {
s1=s*cf+c*sf; c=c*cf-s*sf; s=s1;
aS[i]=Math.round(rad*(1.+s))+1;
aS[i+m2]=Math.round(rad*(1.-s))+1;
}
startAnimation();
}
}
function draw() {
Xo=aS[iXo],Yo=aS[iYo];
ctx.beginPath();
ctx.moveTo(Xo,Yo);
for (j=max; j>0; j--) {
iX=(iXo+parM) % max; iY=(iYo+parN) % m1;
X=aS[iX]; Y=aS[iY];
ctx.lineTo(X,Y);
iXo=iX; iYo=iY; Xo=X; Yo=Y;
}
ctx.clearRect (0, 0, 500, 500);
ctx.stroke();
ctx.strokeStyle="green";
ctx.lineWidth = 3;
}
function startAnimation() {
setInterval(draw,0);
}
</script>
</head>
<h1>Lissajous Figure Generator</h1>
<br>
<body onload="init();" bgcolor="black">
<center><canvas id="field" width="400" height="400">
</canvas>
<br>
<br>
<br>
<h2>Choose parameters value using sliders below:</h2>
<p><h2>A = <input type="range" id="value1" name="parM_choose" min="1" max="9" value="1" step="1" oninput="parM=parseInt(this.value)">
<output name="show_parM_val" id="parM">1</output></h2>
</p>
<p><h2>B = <input type="range" id="value2" min="1" max="9" value="2" step="1" oninput="parN=parseInt(this.value)">
<output name="show_parN_val" id="parN">2</output></h2>
</p>
</center>
</body>
</html>
How to make the output value working? What should be the correct ID?
I am talking about code fragment below:
<h2>Choose parameters value using sliders below:</h2>
<p><h2>A = <input type="range" id="value1" name="parM_choose" min="1" max="9" value="1" step="1" oninput="parM=parseInt(this.value)">
<output name="show_parM_val" id="parM">1</output></h2>
</p>
<p><h2>B = <input type="range" id="value2" min="1" max="9" value="2" step="1" oninput="parN=parseInt(this.value)">
<output name="show_parN_val" id="parN">2</output></h2>
You're problem is your setting global scope variables in your slides, but using local variables in your code, check this updated working example:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<meta charset="UTF-8">
<title>Lissajous figures</title>
<br>
<script type="application/javascript">
var ctx;
var timer = null;
var aS = new Array();
var rad = 189;
var max = 3 * 360,
m1 = max - 1,
m2 = max / 2;
var iXo = 0,
iYo = m2 / 2;
parN = 2;
parM = 1;
function init() {
var canvas = document.getElementById("field");
if (canvas.getContext) {
ctx = canvas.getContext("2d");
sf = Math.sin(3.14159265 / m2);
cf = Math.cos(3.14159265 / m2);
s = -sf;
c = cf;
for (i = 0; i < m2; i++) {
s1 = s * cf + c * sf;
c = c * cf - s * sf;
s = s1;
aS[i] = Math.round(rad * (1. + s)) + 1;
aS[i + m2] = Math.round(rad * (1. - s)) + 1;
}
startAnimation();
}
}
function draw() {
Xo = aS[iXo], Yo = aS[iYo];
ctx.beginPath();
ctx.moveTo(Xo, Yo);
for (j = max; j > 0; j--) {
iX = (iXo + parM) % max;
iY = (iYo + parN) % m1;
X = aS[iX];
Y = aS[iY];
ctx.lineTo(X, Y);
iXo = iX;
iYo = iY;
Xo = X;
Yo = Y;
}
ctx.clearRect(0, 0, 500, 500);
ctx.stroke();
ctx.strokeStyle = "green";
ctx.lineWidth = 3;
}
function startAnimation() {
setInterval(draw, 0);
}
</script>
</head>
<h1>Lissajous Figure Generator</h1>
<br>
<body onload="init();" bgcolor="black">
<center>
<canvas id="field" width="400" height="400">
</canvas>
<br>
<br>
<br>
<div style="background: #999;">
<h2>Choose parameters value using sliders below:</h2>
<p>
<h2>A = <input type="range" id="value1" name="parM_choose" min="1" max="9" value="1" step="1" oninput="document.getElementById('parM').innerText = parseInt(this.value);parM=parseInt(this.value)">
<output name="show_parM_val" id="parM">1</output></h2>
</p>
<p>
<h2>B = <input type="range" id="value2" min="1" max="9" value="2" step="1" oninput="document.getElementById('parN').innerText = parseInt(this.value);parN=parseInt(this.value)">
<output name="show_parN_val" id="parN">2</output></h2>
</p>
</div>
</center>
</body>
</html>
This works.
Target the element with the function updateTextInput(val) functions to update the value in the field.
Answer here: HTML5 input type range show range value
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<meta charset="UTF-8">
<title>Lissajous figures</title>
<br>
<script type="application/javascript">
var ctx;
var timer = null;
var aS = new Array();
var rad = 189;
var max=3*360, m1=max-1, m2 = max/2;
var iXo=0, iYo=m2/2;
var parN=2, parM=1;
function init() {
var canvas = document.getElementById("field");
if (canvas.getContext) { ctx = canvas.getContext("2d");
sf=Math.sin(3.14159265/m2); cf=Math.cos(3.14159265/m2);
s=-sf; c=cf;
for (i=0; i<m2; i++) {
s1=s*cf+c*sf; c=c*cf-s*sf; s=s1;
aS[i]=Math.round(rad*(1.+s))+1;
aS[i+m2]=Math.round(rad*(1.-s))+1;
}
startAnimation();
}
}
function draw() {
Xo=aS[iXo],Yo=aS[iYo];
ctx.beginPath();
ctx.moveTo(Xo,Yo);
for (j=max; j>0; j--) {
iX=(iXo+parM) % max; iY=(iYo+parN) % m1;
X=aS[iX]; Y=aS[iY];
ctx.lineTo(X,Y);
iXo=iX; iYo=iY; Xo=X; Yo=Y;
}
ctx.clearRect (0, 0, 500, 500);
ctx.stroke();
ctx.strokeStyle="green";
ctx.lineWidth = 3;
}
function startAnimation() {
setInterval(draw,0);
}
function updateTextInput(val) {
document.getElementById('textInput').value=val;
}
function updateTextInput2(val) {
document.getElementById('textInput2').value=val;
}
</script>
</head>
<h1>Lissajous Figure Generator</h1>
<br>
<body onload="init();" bgcolor="black">
<center><canvas id="field" width="400" height="400">
</canvas>
<br>
<br>
<br>
<h2>Choose parameters value using sliders below:</h2>
<p><h2>A = <input type="range" id="value1" name="parM_choose" min="1" max="9" value="1" step="1" oninput="parM=parseInt(this.value)" onchange="updateTextInput(this.value);">
<input type="text" id="textInput" value="">
</p>
<p><h2>B = <input type="range" id="value2" min="1" max="9" value="2" step="1" oninput="parN=parseInt(this.value)" onchange="updateTextInput2(this.value);">
<input type="text" id="textInput2" value="">
</p>
</center>
</body>
</html>
For this project, we're working with canvas. I need to create some buttons, and when you click on the buttons, the corresponding function should be called. These functions will then draw something in the canvas. However, my code isn't working. The buttons and the canvas themselves appear, but nothing draws when you click on the buttons. Are there any errors?
<script>
function drawCircle(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
}
function drawLine(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
}
function drawRectangle(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
}
function drawImage(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
}
function drawText(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
}
</script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<input type="button" onclick="drawCircle();" value="Draw Circle">
<input type="button" onclick="drawLine();" value="Draw Line">
<input type="button" onclick="drawRectangle();" value="Draw Rectangle">
<input type="button" onclick="drawImage();" value="Draw Line">
<input type="button" onclick="drawText();" value="Text">
<input type="button" onclick="drawGradient();" value="Gradient">
<input type="button" onclick="scale();" value="Scale">
</body>
</html>
I tried your code in CodePen and the buttons for which you've implemented the function work just fine. Does your console show any errors?
I'm trying to draw a line in Canvas when a user gives the X and Y coordinates. This is what I have so far. I can get the canvas and the input boxes it won't draw though. I'm a newbie so any advice is appreciated.
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x1 = document.getElementById("x1").value;
var x2 = document.getElementById("x2").value;
var y1 = document.getElementById("y1").value;
var y2 = document.getElementById("y2").value;
function draw(){
context.beginPath();
context.moveTo(x1.value,y1.value);
context.lineTo(x2.value,y2.value);
context.stroke();
}
</script>
<br><br>
<h1>Draw a Line</h1>
X-coordinate 1 <input type="text" id="start_x"><br><br>
Y-coordinate 1<input type="text" id="start_y"><br><br>
X-coordinate 2<input type="text" id="end_x"><br><br>
Y-coordinate 2<input type="text" id="end_y"><br><br>
<input type="button" value="draw" onclick="draw()">
It's giving you undefined because you set your input id as start_x, start_y,end_x,end_y and in your js you are getting the value as x1,x2,y1,y2.
html
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;">
</canvas>
<h1>Draw a Line</h1>
<form>
X-coordinate 1 <input type="text" id="start_x"><br><br>
Y-coordinate 1<input type="text" id="start_y"><br><br>
X-coordinate 2<input type="text" id="end_x"><br><br>
Y-coordinate 2<input type="text" id="end_y"><br><br>
<input type="button" value="draw" onclick="draw()">
</form>
js
function draw(){
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x1 = document.getElementById("start_x").value;
var x2 = document.getElementById("start_y").value;
var y1 = document.getElementById("end_x").value;
var y2 = document.getElementById("end_y").value;
context.beginPath();
context.moveTo(x1,x2);
context.lineTo(y1,y2);
context.stroke();
}
Rewrite your code this way;
<canvas width="300" height="300" id="myCanvas"></canvas><br /><br />
X-coordinate 1<input type="text" id="x1"><br><br>
Y-coordinate 1<input type="text" id="y1"><br><br>
X-coordinate 2<input type="text" id="x2"><br><br>
Y-coordinate 2<input type="text" id="y2"><br><br>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function draw(){
var x1 = document.getElementById("x1").value;
var x2 = document.getElementById("x2").value;
var y1 = document.getElementById("y1").value;
var y2 = document.getElementById("y2").value;
context.beginPath();
context.strokeStyle="#FF0000";
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.stroke();
}
</script>
<br><br>
<h1>Draw a Line</h1>
<input type="button" value="draw" onclick="draw()">
your draw function is called onclick but the function uses the input value which was set as 'undefined' because when window loaded the value of the input was not defined, to resolve this you should include your code of getting those values in the draw function.
I am trying to use this(GitHub), Where my "Draw It" is working as expected but "Type It" functionality is not giving me any value in my inputHidden field.
Please, Refer the VF page code and Screenshot for more information :
Draw It
Type It
VF Page Code
<apex:page standardController="Case" extensions="signaturepadCaseController">
<apex:includeScript value="{!URLFOR($Resource.jQuery,'js/jquery-1.6.2.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.signature,'/signature/jquery.signaturepad.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.signature,'/signature/json2.min.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.signature,'/signature/jquery.signaturepad.css')}" />
<form method="post" action="#" class="sigPad">
<label for="name">Print your name</label>
<input type="text" name="name" id="name" class="name"/>
<p class="typeItDesc">Review your signature</p>
<p class="drawItDesc">Draw your signature</p>
<ul class="sigNav">
<li class="typeIt">Type It</li>
<li class="drawIt">Draw It</li>
<li class="clearButton">Clear</li>
</ul>
<canvas class="pad" width="198" height="55" id="signatureCanvas1"></canvas>
<div class="sig sigWrapper">
<div class="typed" id="typeit">
</div>
<canvas class="pad" width="198" height="55" id="signatureCanvas"></canvas>
<input type="hidden" name="output" class="output" id="hidden"></input>
</div>
<input type="button" onclick="saveSignature();" value="Accept" class="btn" target="_parent" />
</form>
<script>
// $('.sigPad').signaturePad(options);
j$ = jQuery.noConflict();
var api;
j$(document).ready(function() {
api = j$('.sigPad').signaturePad();
});
var canvas;
var canvas1;
var RecordID = '';
function saveSignature() {
canvas = document.getElementById("signatureCanvas");
canvas1 = document.getElementById("signatureCanvas1");
// if(j$('#hidden').val() == ''){
// alert('Please draw your signature');
// }
// else{
RecordId = '{!caseId}';
var imgData;
typeSign = j$('#typeit').text();
if (typeSign != '') {
var ctx = canvas1.getContext("2d");
ctx.fillText(typeSign, 10, 10);
}
imgData = canvas1.toDataURL("image/jpeg");
imgData = imgData.split(',')[1];
console.log('---'+imgData);
strDataURI = imgData;
SignaturePad.signaturepadCaseController.saveSignature(strDataURI, RecordId, handleResult);
// }
}
function handleResult(result) {
if (result.indexOf('success:true')) {
//window.top.location = '/{!Case.id}';
} else {
alert(result);
}
}
</script>
</apex:page>
The output variable is only set when drawing a signature. When typing a signature the canvas isn't drawn to and instead a div with the text in is overlaid to create the effect. You can see more details issue in the project's issue tracker with a possible solution if you're okay with forking the code.