I'm trying to a find a way where I can click on individual pixels and then the XY coordinates of the pixel will be recorded/printed. I found the code below online, but it only shows the coordinates of the last-clicked pixel. Is there a way to save/print the coordinates of all the pixels that I have clicked. I'm doing this for a Java applet and this would make it much easier for me to make polygons.
I would prefer the output (when I click the pixels) to be like this, so that I can just copy & paste into java:
int [] x={x1,x2,x3,x4,x...};
int [] y={y1,y2,y3,y4,y...};
Here is the code I found:
<html>
<head>
<script language="JavaScript">
function point_it(event){
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
document.getElementById("cross").style.left = (pos_x-1) ;
document.getElementById("cross").style.top = (pos_y-15) ;
document.getElementById("cross").style.visibility = "visible" ;
document.pointform.form_x.value = pos_x;
document.pointform.form_y.value = pos_y;
}
</script>
</head>
<body>
<form name="pointform" method="post">
<div id="pointer_div" onclick="point_it(event)" style = "background-image:url('image.jpg');width:2400px;height:1848px;">
<img src="point.gif" id="cross" style="position:relative;visibility:hidden;z-index:2;"></div>
You pointed on x = <input type="text" name="form_x" size="4" /> - y = <input type="text" name="form_y" size="4" />
</form>
</body>
</html>
<html>
<head>
<script language="JavaScript">
var x = [];
var y = [];
function point_it(event) {
pos_x = event.offsetX ? (event.offsetX) : event.pageX - document.getElementById("pointer_div").offsetLeft;
pos_y = event.offsetY ? (event.offsetY) : event.pageY - document.getElementById("pointer_div").offsetTop;
document.getElementById("cross").style.left = (pos_x - 1);
document.getElementById("cross").style.top = (pos_y - 15);
document.getElementById("cross").style.visibility = "visible";
x.push(pos_x);
y.push(pos_y);
document.getElementById("form_x").innerHTML = x;
document.getElementById("form_y").innerHTML = y;
};
function remove_it() {
x.pop();
y.pop();
document.getElementById("form_x").innerHTML = x;
document.getElementById("form_y").innerHTML = y;
}
</script>
</head>
<body>
<form name="pointform" method="post">
<div id="pointer_div" onclick="point_it(event)" style="background-image:url('image.jpg');width:2400px;height:1848px;">
<img src="point.gif" id="cross" style="position:relative;visibility:hidden;z-index:2;">
</div>
You pointed on
<br>x = <span id="form_x"></span>
<br>y = <span id="form_y"></span>
<br>
<button onclick="remove_it()">remove last</button>
</form>
</body>
</html>
Related
I want to use global variables 'x, y' in the below funcion.
it works when I put the variables inside the function
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var x = document.getElementById('field_one').value
var y = document.getElementById('field_two').value
function calculator()
{
var p = x * y;
alert(x + " times " + y + " is " + p); //shows undefined times undefined is NaN
} // calculator()
</script>
</head>
<body>
<p>This is a simple calculator.</p>
<form name="the_form">
Number 1: <input type="text" value="" id="field_one"/> <br />
Number 2: <input type="text" value="" id="field_two"/> <br />
<input type="button" value="multiply them!" onclick="javascript:calculator()"/>
</form>
</body>
</html>
Your code works. But youre running in a race problem. You try to find Elements, before they are created:
var x, y;
window.onload = function() {
x = document.getElementById().value;
y = document.getElementById().value;
}
If your site is loading for a long time, the user may try to start the calculator script before x and y are set. Solution:
var x, y, calculator;
calculator = function() {
alert("please wait, until the site is completely loaded");
};
window.onload = function() {
x = document.getElementById().value;
y = document.getElementById().value;
calculator = function() {
alert(x + " times " + y + " is " + x * y);
};
}
The problem is as you want to get the value of x and y but them doesn't are setted value when function is called. If you want to use the variables many times, you need the create a function (I called setValues) that is responsible the set the value of x and y with the value of input, and always you need to get the values of input you can call it. Something like this:
var x;
var y;
function setValues() {
x = document.getElementById('field_one').value;
y = document.getElementById('field_two').value;
}
document.getElementById("calc").addEventListener("click", function() {
setValues();
var p = x * y;
alert(x + " times " + y + " is " + p);
}, false);
<p>This is a simple calculator.</p>
<form name="the_form">
Number 1: <input type="text" value="" id="field_one"/> <br />
Number 2: <input type="text" value="" id="field_two"/> <br />
<input type="button" id="calc" value="multiply them!" />
</form>
Positioning your script after the .html content guarantees everything is defined at the time you want the script working.
You can declare global variables from a local scope simply not using 'var' on declaration.
Do not forget to end each statement with a ';'
This way, your code is 100% functional:
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>This is a simple calculator.</p>
<form name="the_form">
Number 1: <input type="text" id="field_one"/> <br/>
Number 2: <input type="text" id="field_two"/> <br/>
<input type="button" value="multiply them!" onclick="readFields();"/>
<script type="text/javascript">
function readFields(){
x = document.getElementById('field_one').value;
y = document.getElementById('field_two').value;
calculator();
}
function calculator(){
var p = x * y;
alert(x + " times " + y + " is " + p); //shows undefined times undefined is NaN
} // calculator()
</script>
</form>
</body>
</html>
I have some code in a graph and I already tried this code in canvas but for loop condition based in this code x&y value ellipse shape draw the canvas.
I want to how to add the for loop inside the canvas and plot the ellipse shape.
#mycanvas{
position:absolute;
width:250px;
height:400px;
top:200px;
left:200px;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet"type="text/css" href="newellipse.css">
<script src="jfile/myquery.js"></script>
</head>
<body>
<input id="ipvalue" type="text" value="25x^2+4y^2+100x-40y=-100">
<button onclick="checkFruit()">solve</button>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<canvas id="myCanvas"width="578" height="400" style="position:absolute;left:220px;top:50px";>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var step = 2*Math.PI/20; // see note 1
var h = 150;
var k = 150;
var r = 80;
ctx.beginPath(); //tell canvas to start a set of lines
for(var theta=0; theta < 2*Math.PI; theta+=step) {
var x = h + r*Math.cos(theta) ;
var y = k - 0.5 * r*Math.sin(theta) ; //note 2.
ctx.lineTo(x,y);
}
ctx.closePath(); //close the end to the start point
ctx.stroke(); //actually draw the accumulated lines
function checkFruit() {
var reg =/([\-+])?\s*(\d+)?([a-zA-Z])\b/g;
var equation = id("ipvalue").val();
var spli = reg.exec(equation);
alert(spli);
var y = document.getElementById("ipvalue").value;
switch(y) {
case "25x^2+4y^2+100x-40y=-100":
text = "Formula for Ellipse x^2/a^2+y^2/b^2=1";
text1= "First RHS side value consider for 1";
text2= "LHS side divide by RHS value for 16";
text3= "Take a square root of denaminater value";
text4= "Find the x and y value";
document.getElementById("demo").innerHTML = text;
document.getElementById("demo1").innerHTML = text1;
document.getElementById("demo2").innerHTML = text2;
document.getElementById("demo3").innerHTML = text3;
document.getElementById("demo4").innerHTML = text4;
break;
// add the default keyword here
}
}
</script>
</body>
<html>
<!DOCTYPE HTML>
<html>
<head>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
zoomEnabled: true,
title:{
text: "Try Zooming And Panning"
},
axisY:{
includeZero: false
},
title: {
text: "Graph"
},
data: [{
type: "spline",
dataPoints: [
{ x:-15, y:0 },
{ x:-10, y:18 },
{ x:0, y:20 },
{ x:10, y:18 },
{ x:15, y:0 },
{ x:10, y:-18 },
{ x:0, y:-20 },
{ x:-10, y:-15 },
{ x:-15, y:0 },
]},
]
});
chart.render();
}
</script>
</head>
<body>
<div id="correct"style="position:absolute;width:500px;height:70%;top:80px;left:250px;">
<div id="chartContainer" style="height: 400px; width: 100%;">
</div>
</div>
</body>
</html>
In that modal how to x and y value inside the for loop condition base draw the ellipse graph?
<canvas> must be closed as shown here.
The style attribute on <canvas> must have semicolon (;) before double-quote (").
html
<canvas id="myCanvas"width="578" height="400" style="position:absolute;left:220px;top:50px;"></canvas>
I personally prefer document.querySelector(...) over document.getElementById(...).
I took liberty to increase the number of lines for ellipsis from 20 to 1000.
My console says ReferenceError: id is not defined. So instead use document.querySelector('#ipvalue').
Also note that .val(...) works but with jQuery. And html uses .value property. So, the code become document.querySelector('#ipvalue').value.
I touched deliberately at your code structure... (I mean the checkFruit(...) function)
<!DOCTYPE HTML>
<html>
<head>
<!--<link rel="stylesheet"type="text/css" href="newellipse.css">
<script src="jfile/myquery.js"></script>-->
<meta charset="UTF-8">
</head>
<body>
<input id="ipvalue" type="text" value="25x^2+4y^2+100x-40y=-100">
<button onclick="checkFruit()">solve</button>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<canvas id="myCanvas"width="578" height="400" style="position:absolute;left:220px;top:50px;"></canvas>
<script>
var canvas = document.querySelector("#myCanvas");
var context2d = canvas.getContext("2d");
var step = 2*Math.PI/1000; // see note 1
var h = 150;
var k = 150;
var r = 80;
context2d.beginPath(); //tell canvas to start a set of lines
for(var theta = 0; theta < 2*Math.PI; theta += step)
{
var x = h + r*Math.cos(theta);
var y = k - 0.5 * r*Math.sin(theta); //note 2.
context2d.lineTo(x,y);
}
context2d.closePath(); //close the end to the start point
context2d.stroke(); //actually draw the accumulated lines
var splitter = /([\-+])?\s*(\d+)?([a-zA-Z])\b/g;
var source = document.querySelector('#ipvalue');
var target = document.querySelector("#demo");
var target1 = document.querySelector("#demo1");
var target2 = document.querySelector("#demo2");
var target3 = document.querySelector("#demo3");
var target4 = document.querySelector("#demo4");
function checkFruit()
{
var equation = splitter.exec(source.value);
console.log('SOURCE: ', source.value);
console.log('EQUATION: ', equation);
console.log('SUGGESTION: ', source.value.match(splitter));
var y = source.value;
switch(y)
{
case "25x^2+4y^2+100x-40y=-100":
var text = "Formula for Ellipse x^2/a^2+y^2/b^2=1";
var text1 = "First RHS side value consider for 1";
var text2 = "LHS side divide by RHS value for 16";
var text3 = "Take a square root of denaminater value";
var text4 = "Find the x and y value";
target.innerHTML = text;
target1.innerHTML = text1;
target2.innerHTML = text2;
target3.innerHTML = text3;
target4.innerHTML = text4;
break;
}
}
</script>
</body>
<html>
This does not add the numbers instead gives NaN
<html>
<body>
<script>
function checkit()
{
x = document.getElementById("a");
x1 = parseInt(x);
y = document.getElementById("b");
y1 = parseInt(y);
alert("Answer is" + (x1 + y1));
}
</script>
<input type="text" id="a">
<input type="text" id="b">
<input type="button" onclick="checkit()">
</body>
</html>
Even tried document.getElementById("a").value;
Still gives NaN
document.getElementById returns the HTML element (an input, in your case), not its value. Try this instead:
x = document.getElementById("a").value;
I am unable to add 2 numbers taking from inputs.
<script>
x = document.getElementById('input1').value;
y = document.getElementById('input2').value;
z = Number(x)+ Number(y);
document.getElementById('submit1').addEventListener("click",alpha);
function alpha(){document.getElementById('div1').innerHTML="The answer is" + z;}
</script>
I need to do this with help of javaSCript only.
You could try something like this:
document.getElementById('submit1').addEventListener("click", function(){
// I suppose that the values you insert in your inputs are
// integers. Otherwise, you could use the parseFloat(value, 10)
// to parse float =s.
var x = parseInt(document.getElementById('input1').value);
var y = parseInt(document.getElementById('input2').value);
// Add the numbers
var z = x + y;
// Set the result in the selected div.
document.getElementById('div1').innerHTML="The answer is" + z;
});
You could try to run the following snippet:
document.getElementById('submit1').addEventListener("click", function(){
// I suppose that the values you insert in your inputs are
// integers. Otherwise, you could use the parseFloat(value, 10)
// to parse float =s.
var x = parseInt(document.getElementById('input1').value);
var y = parseInt(document.getElementById('input2').value);
// Add the numbers
var z = x + y;
// Set the result in the selected div.
document.getElementById('div1').innerHTML="The answer is " + z;
});
<input type="text" id="input1"/>
<br/>
<input type="text" id="input2"/>
<br/>
<div id="div1">
</div>
<br/>
<button id="submit1">submit</button>
You want to use parseInt() to turn a string into an int.
<html>
<head>
<title></title>
<style>
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
document.getElementById("button").addEventListener("click",function(){
var a = parseInt(document.getElementById("input1").value);
var b = parseInt(document.getElementById("input2").value);
document.getElementById("output").innerHTML="The Answer is "+(a+b);
},false);
});
</script>
</head>
<body>
<input id="input1" type="text"/>
<input id="input2" type="text"/>
<button id="button">Add</button>
<div id="output"></div>
</body>
</html>
I want calculate initial bearing from point A to point B on Great Circle Method. The prototype of javascript that I got from website like this :
var y = Math.sin(λ2-λ1) * Math.cos(φ2);
var x = Math.cos(φ1)*Math.sin(φ2) -
Math.sin(φ1)*Math.cos(φ2)*Math.cos(λ2-λ1);
var brng = Math.atan2(y, x).toDegrees();
Where :
λ = longtitude
φ = latitude
So I try it to my HTML like this :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script>
function bearing()
{
if (typeof(Number.prototype.toDegrees) === "undefined")
{
Number.prototype.toDegrees = function()
{
return this * 180 / Math.PI;
}
}
var getlat1 = document.getElementById("lat1").value;
var getlong1 = document.getElementById("long1").value;
var getlat2 = document.getElementById("lat2").value;
var getlong2 = document.getElementById("long2").value;
var lat1 = parseFloat(getlat1);
var long1 = parseFloat(getlong1);
var lat2 = parseFloat(getlat2);
var long2 = parseFloat(getlong2);
var y = Math.sin(long2-long1) * Math.cos(lat2);
var x = Math.cos(lat1)*Math.sin(lat2) -
Math.sin(lat1)*Math.cos(lat2)*Math.cos(long2-long1);
var brng = Math.atan2(y, x).toDegrees();
document.getElementById('bearing').innerHTML = brng;
return brng;
}
</script>
</head>
<form action="#" onsubmit="bearing(); return false;">
<p>
Location 1 :
<input type="text" name="lat1" id="lat1" size="40" />
<input type="text" name="long1" id="long1" size="40" />
</p>
<p>
Location 2 :
<input type="text" name="lat2" id="lat2" size="40" />
<input type="text" name="long2" id="long2" size="40" />
</p>
<p>
<input type="submit" name="find" value="Search" />
</p>
</form>
Distance : <p id="results"></p>
<br />
Bearing : <p id="bearing"></p>
My input for Location 1 => latitude = -7.2742174 & longtitude = 112.719087 and
My input for Location 2 => latitude = -7.586675 & longtitude = 112.8082266
But the problem is, the result on my page is 175.63821414343275. Besides, the right answer is 164.21.
Anyone, do you know what's my mistake on my program? Thanks..