Develop Reference

Calculate the volume of cylinder with JavaScript using prototype

I'm a JavaScript noob and beginner so don't get too hard on me.
I need to calculate the volume of a cylinder using a constructor function and prototype.
I've got a form with two inputs which I'll be getting the values from to do the calculation with. I have to create a new instance when the button is clicked and the calculation has to be outputted in the outcome input.
I seem to be stuck at the part to get the values out of the inputs as my console always says that 'hoogte' and 'diameter' is undefined when I click the button.
I've been looking at this for almost 24h now, but I'm not getting any progress..
This is my code:
<form action="">
<label>
Diameter: <input type="text" id="diameter"><br><br>
Hoogte: <input type="text" id="hoogte"> <br><br>
<input type="button" value="bereken" id="berekenBtn"><br><br>
<input type="text" id="uitkomst">
</label>
</form>
<script>
window.addEventListener("DOMContentLoaded", function () {
document.getElementById("berekenBtn").addEventListener("click", bereken);
});
function Cylinder(hoogte, diameter) {
this.hoogte = hoogte;
this.diameter = diameter;
}
Cylinder.prototype.volume = function () {
var radius = document.getElementById('diameter') = this.diameter / 2;
var hoogte = document.getElementById('hoogte') = this.hoogte;
var berekening = Math.PI * radius * radius * hoogte;
//berekening.toFixed(4);
}
function bereken() {
var myCylinder = new Cylinder(
document.getElementById("uitkomst").value = Cylinder()
)
console.log(myCylinder);
}
</script>

<form action="">
<label>
Diameter: <input type="number" id="diameter"><br><br>
Hoogte: <input type="number" id="hoogte"> <br><br>
<input type="button" value="bereken" id="berekenBtn"><br><br>
<input type="text" id="uitkomst">
</label>
</form>
<script>
window.addEventListener("DOMContentLoaded", function () {
document.getElementById("berekenBtn").addEventListener("click", bereken);
});
function Cylinder(hoogte, diameter) {
this.hoogte = hoogte;
this.diameter = diameter;
}
Cylinder.prototype.volume = function () {
var radius = this.diameter / 2;
var hoogte = this.hoogte;
var berekening = Math.PI * radius * radius * hoogte;
return berekening;
}
function bereken() {
var diameter = document.getElementById("diameter").value;
var hoogte = document.getElementById("hoogte").value;
var myCylinder = new Cylinder(diameter, hoogte);
var result = myCylinder.volume();
document.getElementById("uitkomst").value = result;
}
</script>
I have modified some code, try to understand this, hope it will helps you !

Use Javascript to Make Calculator

Good Day - I am Learning Javascript, I am trying to create a Calculator to calculate ampere-turn to magnetize a tool (it's related to my job.) I am trying to use some formulas to calculate this ampere-turn. The code seems fine to me, but it's not working. I put some values in the form, and click button submit, but no result found and i don't know why this happens.
I am sharing my code here for your kind review. and help me to fix this problem.
thank you.
function ampereturn()
{
var inputOD = Number(document.ampereturn.inputod.value);
var inputLen = Number(document.ampereturn.inputlen.value);
var InputID = Number(document.ampereturn.Inputid.value);
var InputTurn = Number(document.ampereturn.Inputturn.value);
var ans;
var ldratio = inputLen/inputOD;
var coilradius = InputID/2;
var toolradius = inputOD/2;
var pi = 3.14;
var xcoil = (coilradius * coilradius) * pi;
var xtool = (toolradius * toolradius) * pi;
var factor = xtool/xcoil;
var text = "Use Intermediate Fill-factor formula:";
if(factor >= 0.5)
{
ans = 35000/(ldratio+2)*Inputturn;
document.getElementById('sum').innerHTML = ans;
}
if(factor <= 0.1)
{
ans = 45000/ldratio*Inputturn;
document.getElementById('sum').innerHTML = ans;
}
else
{
document.getElementById('sum').innerHTML = text;
}
}
<form name="ampereturn">
<div class="w3-half w3-margin-top">
<label>Tool OD:</label>
<input id="inputod" class="w3-input w3-border" type="number" placeholder="Input Tool Outer Dia:">
</div>
<div class="w3-half w3-margin-top">
<label>Tool Lenght:</label>
<input id="inputlen" class="w3-input w3-border" type="number" placeholder="Input Tool Length">
</div>
<div class="w3-half w3-margin-top">
<label>Coil ID:</label>
<input id="Inputid" class="w3-input w3-border" type="number" placeholder="Input Coil Internal Dia:">
</div>
<div class="w3-half w3-margin-top">
<label>Coil Turn:</label>
<input id="Inputturn" class="w3-input w3-border" type="number" placeholder="Input Number of turn in coil:">
</div>
<div class="w3-half w3-margin-top">
<label>Required Ampere:</label>
<p id="sum"></p>
</div>
<button type="button" onclick="ampereturn()">Submit</button>
</form>
<br><hr>
thank you in advance. ....

Change the function name which is same as the form name.
Change Inputturn to InputTurn in the if condition.
Required Code:
function Ampereturn()
{
var inputOD = Number(document.ampereturn.inputod.value);
var inputLen = Number(document.ampereturn.inputlen.value);
var InputID = Number(document.ampereturn.Inputid.value);
var InputTurn = Number(document.ampereturn.Inputturn.value);
var ans;
var ldratio = inputLen/inputOD;
var coilradius = InputID/2;
var toolradius = inputOD/2;
var pi = 3.14;
var xcoil = (coilradius * coilradius) * pi;
var xtool = (toolradius * toolradius) * pi;
var factor = xtool/xcoil;
var text = "Use Intermediate Fill-factor formula:";
if(factor >= 0.5)
{
ans = 35000/(ldratio+2)*InputTurn;
document.getElementById('sum').innerHTML = ans;
}
else if(factor <=0.1)
{
ans = 45000/ldratio*InputTurn;
document.getElementById('sum').innerHTML = ans;
}
else
{
document.getElementById('sum').innerHTML = text;
}
}

onClick works only once

I input the values, and it works ONCE, which is a problem.
I try to change the numbers, and click Enter again, and it does nothing.
The only way it works again is if I use the scroll to up or down the current value.
var fuel = 2.5;
var mpg = 6;
function Hourly() {
var miles = document.getElementById('miles').value;
var brokerPay = document.getElementById('pay').value;
var gallons = miles / 6;
var hours = miles / 55;
var cost = gallons * fuel;
var net = brokerPay - cost
var hourlyPay = net / hours;
var newHeader = document.getElementById('changeMe');
newHeader.innerHTML = hourlyPay;
}
<h1 id="changeMe">Change me Here</h1>
<input type="number" placeholder="miles" id="miles" required/>
<input type="number" placeholder="Broker Pay" id="pay" required/>
<input type="submit" value="Enter" onclick="Hourly()" />

Recording XY coordinates of pixel onclick

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>

Why I Can't Get A Return Value To BAC?

<!DOCTYPE html>
<html>
<meta content="text/html; charset=utf-8">
<head>
<title>BAC Calculator</title>
//form for my html page. Not sure weather to use submit or just a button for this type. also if the return form is what is correct or not.
<form action="" onSubmit="return formbac()" id="formbac">
Weight:<input id="weight" name="weight1" type="number">
Beer:<input id="beer" name="beer1" type="number">
Wine:<input id="wine" name="wine1" type="number">
Shots:<input id="shots" name="shots1" type="number">
Time:<input id="time" name="time1" type="number">
<input name="submit" type="submit" value="Calculate">
<hr>
BAC: <input type="" name="bac" id="BAC">
</form>
</head>
<body>
//Javascript code for calculations
I think this is correct but i could possibly be mixing code up with my calculations//
<script>
// Basic function
function formbac(){
//values
var weight = document.getElementById("weight").value;
var beer = document.getElementById("beer" * .54).value;
var wine = document.getElementById("wine" * .6).value;
var shots = document.getElementById("shots" * .6).value;
var time= document.getElementById("time").value;
var BAC = 0;
//trying to get my output of baclevels
// calculations
var BAC = ((beer + wine + shots * 7.5) / (weight * .68)) - (0.015 * time);
//decimal round
var BAC = math.round(bac*100)/100;
//output
var BAC = document.getElementById(BAC).value;
}
</script>
</body>
</html>

Your output should be the other way around:
//output
document.getElementById('BAC').value = BAC;
Also, all the multiplications you're trying to perform inside document.getElementById should go outside. For example:
var beer = document.getElementById("beer").value * .54;

Try this line instead
document.getElementById("BAC").value = BAC; //notice "BAC" instead of BAC, you're trying to grab the element that doesn't exist

// calculations
var BAC = ((beer + wine + shots * 7.5) / (weight * .68)) - (0.015 * time);
//decimal round
var BAC = math.round(bac*100)/100; //override above value
//output
var BAC = document.getElementById(BAC).value; //override above value
As per your code your output will be the value of input control.