awaywego Posted April 9, 2014 Share Posted April 9, 2014 Hi all, I am a middle school teacher, a beginner at html5 and at code in general. I am trying to write a simple piece of software that students can use to make Venn Diagrams. The idea is that they can make the circles as big as they want (representing, for example, different population sizes) and then drag them to control the degree of overlap. Everything below looks fine in Chrome. The form is simple and straightforward. My circles are pretty and draggable. The PROBLEM comes when I try to define variables from user input. I using this: var popOneSize = document.popSizeForm.popOne.value; near the top of my <script>, then just putting that directly into the JS, like this: radius: 'popOneSize', and so on. No dice. I also tried giving each of the 'submit' buttons their own id (e.g. 'submitButtonOne') and then using document.getElementbyId('submitButtonOne').addEventListener('click', function(){}); Again, no dice. Any insights you can provide would be greatly appreciated. Here's the (working) code in full: <!DOCTYPE HTML><html> <head> <style> body { margin: 0px; padding: 0px; } </style> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script> </head> <body> <p>Please enter three population sizes.</p><p>Population size may range 1-100.</p><form id= "popSizeForm"><div> Population Size 1: <input type="number" name="popOne" min="1" max="100"> <input type="submit"></div><div> Population Size 2: <input type="number" name="popTwo" min="1" max ="100"> <input type="submit"></div><div> Population Size 3: <input type="number" name="popThree" min="1" max="100"> <input type="submit"></div></form> <div id="container"></div> <script defer="defer">//Here I'm using kinetic JavaScript to define everything, it's pretty straightforward... what I want to do is take the input from those <input> boxes and plug them in as the values for "radius": var stage2 = new Kinetic.Stage({ container: 'container', width: 800, height: 800 }); var layer1 = new Kinetic.Layer(); var layer2 = new Kinetic.Layer(); var layer3 = new Kinetic.Layer(); var circleOne = new Kinetic.Circle({ x: 165, y: 365, radius: 70, //this is the value I want to be able to change fill: '#CCFF33', stroke: 'black', strokeWidth: 2, draggable: true }); var circleTwo = new Kinetic.Circle({ x: 365, y: 365, radius: 70, fill: '#33CC33', stroke: 'black', strokeWidth: 2, opacity: 0.5, draggable: true }); var circleThree = new Kinetic.Circle({ x: 565, y: 365, radius: 70, fill: '#00BBDD', stroke: 'black', strokeWidth: 2, opacity: 0.5, draggable: true }); layer1.add(circleOne); layer2.add(circleTwo); layer3.add(circleThree); stage2.add(layer1); stage2.add(layer2); stage2.add(layer3); </script> </body></html> Quote Link to comment Share on other sites More sharing options...
sanojian Posted April 10, 2014 Share Posted April 10, 2014 If you don't define any behavior for a form submit, it will attempt to post to itself which causes the page to reload and you lose all your values. So you can do this instead:<form id= "popSizeForm" onsubmit="drawStuff(); return false;">This tells the form to call the function "drawStuff" and then do nothing more. Now wrap you Kinetic code in a function called "drawStuff" function drawStuff() { var stage2 = new Kinetic.Stage({...And set the radius to the form valueradius: document.forms.popSizeForm.popOne.value, awaywego 1 Quote Link to comment Share on other sites More sharing options...
awaywego Posted April 12, 2014 Author Share Posted April 12, 2014 This worked like a charm! THANK YOU! :-) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.