javascript - Passing values in forms -
the values input through dropdown menu arent getting reflected in variables event1 , event2 when tried global declarations. how store value both variables , pass javascript? lot.
<!doctype html> <html> <head> <title> correlation not imply causation </title> <script type="text/javascript"> var event1,event2; function main(e11,e22) {event1=e11; event2=e22;} window.onload = function () { var crimerain=[{x:1780330,y:42053.0},{x:1716120,y:51667.5 },{x: 1832015 ,y: 47647.5 },{x: 1822602 ,y: 51539.5 },{x: 1878293 ,y: 49135.3 },{x: 1989673 ,y: 52750.1 },{x: 2093379 ,y: 48508.1 },{x: 2121345 ,y: 42877.4 },{x: 2224831 ,y: 53483.1 },{x: 2325575 ,y: 49935.8 },{x: 2387188 ,y: 45813.1 },{x: 2647722 ,y: 53521.8 }]; var crimeexport=[{x:1780330,y:49},{x:1716120,y:59 },{x: 1832015 ,y: 77 },{x: 1822602 ,y: 100 },{x: 1878293 ,y: 122},{x: 1989673 ,y: 150 },{x: 2093379 ,y: 195 },{x: 2121345 ,y: 165 },{x: 2224831 ,y: 226 },{x: 2325575 ,y: 303},{x: 2387188 ,y: 297 },{x: 2647722 ,y: 312}]; var odsexport=[{x:50104.0,y:49},{x:88368.0,y:59 },{x: 52469.0 ,y: 77 },{x: 55293.0 ,y: 100 },{x: 53486.1 ,y: 122},{x: 51527.6 ,y: 150 },{x: 53118.9 ,y: 195 },{x: 58340.2,y: 165 },{x: 58905.7 ,y: 226 },{x:63154.44 ,y: 303},{x: 66217.62 ,y: 297 },{x: 63589.841 ,y: 312}]; var odsrain=[{x:50104.0,y:42053.0},{x:88368.0,y:51667.5 },{x: 52469.0 ,y: 47647.5 },{x: 55293.0,y: 51539.5 },{x: 53486.1,y: 49135.3 },{x:51527.6 ,y: 52750.1 },{x:53118.9 ,y: 48508.1 },{x: 58340.2,y: 42877.4 },{x:58905.7 ,y: 53483.1 },{x: 63154.44,y: 49935.8 },{x:66217.62 ,y: 45813.1 },{x: 63589.841 ,y: 53521.8 }]; var dps= [], xaxis, yaxis; if (event1==1 && event2==1) {dps=crimerain xaxis="cognizable crime rate" yaxis="rainfall(cm)" } else if (event1==1 && event2==2) { dps=crimeexport xaxis="cognizable crime rate" yaxis="export (goods) growth (us $billion)"} else if (event1==2 && event2==1) {dps=odsrain xaxis="production of ozone depleting substances" yaxis="rainfall(cm)"} else if (event1==2 && event2==2) {dps=odsexport xaxis="production of ozone depleting substances" yaxis="export (goods) growth (us $billion)"} var chart = new canvasjs.chart("chartcontainer", { zoomenabled: true, animationenabled: true, axisx:{ title: xaxis, valueformatstring: "#", }, axisy:{ title: yaxis, valueformatstring: "#" }, legend: { verticalalign: "bottom", horizontalalign: "left" }, data: [ { cursor: "pointer", type: "scatter", highlightenabled: true, color: "#3b5998", markerbordercolor : "white", markerborderthickness: 2, legendtext: "each circle represents 1 year", showinlegend: "true", markertype: "circle", markercolor: "#3b5998", tooltipcontent: "<span style='\"'color:white;'\"'><strong>xaxis</strong></span> {x}<br/> <span style='\"'color: white;'\"'><strong>yaxis</strong></span> {y}", datapoints:dps } ] }); chart.render(); } </script> <script type="text/javascript" src="c:\users\rishika\downloads\canvasjs-1.7.0\canvasjs.min.js"></script> <link href='https://fonts.googleapis.com/css?family=montserrat' rel='stylesheet' type='text/css'> </head> <body bgcolor="#3b5998"> <div style="color:white; font-family: 'montserrat', sans-serif;"><center> <p style="font-size:40px"><b><br/><br/><br/><br/>correlation not imply causation</b></p> statistically determine relation between 2 random events <br/><br/><br/> <form> <select style="color:white; width: 150px; height:40px; font-size:17px; font-family: 'montserrat', sans-serif; background-color:#3b5998; border:3px solid white;" name="event1"> <option id="e1" value="1">crime rate</option> <option id="e1" value="2">ozone depletion</option> </select> <select style="color:white; width: 150px; height:40px; font-size:17px; font-family: 'montserrat', sans-serif; background-color:#3b5998; border:3px solid white;" name="event2"> <option id "e2" value="1">rainfall</option> <option id="e2" value="2">export growth</option> </select><br/><br/><br/> <input style="color:white; width: 150px; height:40px; font-size:17px; font-family: 'montserrat', sans-serif; background-color:#3b5998; border:3px solid white;" type="submit" value="submit" onclick="func1(document.getelementbyname('event1').value,document.getelementbyname('event2').value)"> </form> </p> <div id="chartcontainer" style="height: 300px; width: 100%;"> </div> </body> </html>
you use document.getelementsbyname("event1")[0] 1 of <select> items. value of selected <option>:
var ele = document.getelementsbyname("event1")[0]; event1 = ele.options[ele.selectedindex].value; the same thing done event2.
Comments
Post a Comment