javascript - 在表单中传递值

标签 javascript html css forms

即使尝试使用全局声明,通过下拉菜单输入的值也不会反射(reflect)在变量 event1 和 event2 中。我如何将值存储到两个变量并将其传递给 javascript? 非常感谢。

<!DOCTYPE HTML>
<html>

<head>  
<title> Correlation Does 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 one 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 DOES NOT IMPLY CAUSATION</b></p>
Statistically determine the relation between two 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<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>

最佳答案

您将使用 document.getElementsByName("event1")[0]获得 <select> 之一元素。然后获取选中的值<option> :

var ele = document.getElementsByName("event1")[0];
event1 = ele.options[ele.selectedIndex].value;

对于 event2 也会做同样的事情.

关于javascript - 在表单中传递值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32916295/

相关文章:

javascript - IE7 中的渲染问题

html - Bootstrap 渲染不一致

javascript - 使用 Firefox 27.0.1 时,Window.settimeout 失败

JavaScript 表达式无法理解

javascript - Ajax 不工作

javascript - 如何使输入焦点像 dogpile.com?

html - Chrome 中的掩码结合了绝对位置、 overflow hidden 、z-index 和 border-radius

html - 防止 flex 元素从一边到另一边渲染

css - 从 150% 到 100% 的弹跳动画 -css

javascript - 为什么我们能够在 React 组件的构造函数中绑定(bind)函数?