javascript - Setting height of a rect by form input -
i have make can manually fill in height of rect form.
so means: if change amount of first form imput 10, first rect must have height=10.
for (var = 0; < 5; i++) { var height = -math.random()*450; ctx.fillstyle = "#76dcdc"; ctx.fillrect(16+i*100,400,60,height); } with code generate random height every time press submit button. need code fill height in manually each of 5 different rectangles.
this have far. it's still messy.
var amount = []; var canvas = document.getelementbyid("canvas"); if(canvas.getcontext){ var ctx = canvas.getcontext("2d"); var hoeveelheid = 0; var emmer = new image(); emmer.addeventlistener("load",drawdrop ); emmer.src = "assets/pot_s.png"; }else{ } function draw(){ ctx.fillstyle = '#fff'; ctx.fillrect(0,0,canvas.width, canvas.height); } function amountchange(){ console.log("change amount"); var form = document.getelementbyid("form"); for(var = 0; < form.length; i++){ amount[i] = form[i].value; } draw(); } function drawdrop() { ctx.fillstyle="#fff" ctx.fillrect(0,0,canvas.width,canvas.height); for (var = 0; < 5; i++) { var height = -math.random()*450; ctx.fillstyle = "#76dcdc"; ctx.fillrect(17+i*100,410,60,height); } for (var = 0; < 5; i++){ ctx.drawimage(emmer,i*100,400); } hoeveelheid ++; if (hoeveelheid == 8) { hoeveelheid = 1; } } function randomize(){ console.log("random amount"); var form = document.getelementbyid("form"); for(var = 0; < form.length; i++){ form[i].value = math.round(math.random()*25)*5; } amountchange(); } function calculate() { console.log("bereken gegevens"); }<!doctype html> <html> <head> <meta charset="utf-8"> <title>cpii</title> <link rel="stylesheet" type="text/css" href="screen.css"> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <div> <h1>watergebruik</h1> <p>hoeveel minuten heb je vandaag ... gebruikt?</p> <form id="form" method="post"> de wc: <input type="number" name="wc" step="5" min="0" max="255"><br> de douche: <input type="number" name="douche" step="5" min="0" max="255" ><br> de lavabo: <input type="number" name="lavabo" step="5" min="0" max="255" ><br> de keukenkraan: <input type="number" name="keukenkraan" step="5" min="0" max="255"><br> de wasmachine: <input type="number" name="wasmachine" step="5" min="0" max="255"><br> de vaatwas: <input type="number" name="vaatwas" step="5" min="0" max="255"><br> <button onclick="calculate()">see results</button> <button onclick="randomize()">random numbers</button> </form> </div> <script src="js/script.js"></script> </body> </html>
first need value of form inputs. i'm using jquery here quick example.
for (var = 0; < 5; i++) { var height = document.getelementbyid('#input' + i).value; ctx.fillstyle = "#76dcdc"; ctx.fillrect(16+i*100,400,60,height); } this works 4 inputs. ids of inputs must "input1" - "input4"
Comments
Post a Comment