I can’t work out why the event.Listener wont stop and accept the result before it continues.
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Island Maker</title>
<style>
html { font-family: sans-serif;}
body {
width:50%;
max-width: 800px;
min-width: 480px;
margin: 0 auto;
}
.form input[type="number"]{
width: 200px;
}
.lastResult {
color: white;
padding: 3px;
}
</style>
</head>
<body>
<h1>Island Maker(The basics)</h1>
<div class="form">
<label for="optionField">Select a height: </label>
<input type="number" min="1" max="10" required id="optionField" class="optionField">
<input type="submit" value="Submit Height" class="optionSubmit">
</div>
<div class="resultParas">
<p class="height"></p>
</div>
<canvas id="c" width="40" height="40" style="width: 400px; image-rendering: pixelated;"></canvas>
<script type="application/javascript" ><!--
"use strict";
var height = document.querySelector(".height");
var optionSubmit = document.querySelector(".optionSubmit");
function checkOption(){
var height = Number(optionField.value);
optionSubmit.addEventListener('click', checkOption);
//alert(height);
}
checkOption();
// Draws squares?
var attachInterface;
attachInterface = function (CanvasID) {
var _;
_ = {
el: document.getElementById(CanvasID),
c: null,
getpixel: function (x, y) {
return this.c.getImageData(x, y, 1, 1).data;
},
putpixel: function (x, y, r, g, b) {
var id, d;
d = (id = this.c.getImageData(x, y, 1, 1)).data;
d[0] = r;
d[1] = g;
d[2] = b;
d[3] = 255;
this.c.putImageData(id, x, y);
},
rect: function (x1, y1, x2, y2, r, g, b) {
var id, d;
var n, N;
var x, y;
x = (x1 < x2? x1: x2);
y = (y1 < y2? y1: y2);
d = (id = this.c.getImageData(x, y, (x1 > x2? x1 - x: x2 - x) + 1, (y1 > y2? y1 - y: y2 - y) + 1)).data;
N = d.length;
for (n = 0; n < N; n += 4) {
d[n] = r;
}
for (n = 1; n < N; n += 4) {
d[n] = g;
}
for (n = 2; n < N; n += 4) {
d[n] = b;
}
for (n = 3; n < N; n += 4) {
d[n] = 255;
}
this.c.putImageData(id, x, y);
},
_: null
};
_.c = _.el.getContext("2d");
return _;
};
/* Populates 3 "size" by "size" arrays with R G B values */
var cp;
var x, y, a, aa, aaa, pie, size, rads;
cp = attachInterface("c");
a = []
aa = []
aaa = []
pie = 3.14159268
size = 40
rads = 40
height = 1.8;
for (y = 0; y < size; y++) {
for (x = 0; x < size; x++) {
// Starting RGB values of each pixel
a[x + size * y] = (((Math.sin(pie*(x/rads)))+(Math.sin(pie*(y/rads))))/height)-0.5
aa[x + size * y] = (((Math.sin(pie*(x/rads)))+(Math.sin(pie*(y/rads))))/height)-0.5
aaa[x + size * y] = (((Math.sin(pie*(x/rads)))+(Math.sin(pie*(y/rads))))/height)-0.5
// Creates blue border
if (((x < 1) || (x > (size-2))) || ((y < 1)) || (y > (size-2))) {
a[x + size * y] = 0
aa[x + size * y] = 0.2
aaa[x + size * y] = 0.8
};
}
}
//Test Text
// <button>Hello</button>
// Const btn = document.querySelector('button');
// btn.addEventListener('click', () => {
// Do This;
// });
//While hasn't clicked exit
//Await button click
/* Draws "size" by "size" square with colours from above code */
cp.rect(0, 0, size, size, 0,0,0);
for (y = 0; y < size; y++) {
for (x = 0; x < size; x++) {
cp.putpixel(x, y, Math.floor(a[x + size * y] * 255), Math.floor(aa[x + size * y] * 255), Math.floor(aaa[x + size * y] * 255));
}
}
//--></script>
</body>
</html>
