我似乎无法为表单的值定义变量

时间：2017-12-07 12:11:26

标签： javascript jquery

Hello其他程序员，我正在尝试建立一个进行路由描述的网站，但我无法将一个变量分配给输入表单。 我正在尝试将变量“Bval”（B值）分配给绿色选择表单，并将“Aval”（A值）分配给蓝色选择表单。有人能指出这段代码中的问题吗？

$(document).ready(function() {

  $('#selectroomA').change(function() {
  	Aval = $('#selectroomA').value;
  });

	$('#selectroomB').change(function() {
		Bval = $('#selectroomB').value;
	});
	
	$('#submit').click(function() {
      console.log('clicked');
		if (Aval === "a001") {
            console.log('Aval = a001');
			if (Bval === "a001") {
              console.log('Bval = a001');
			  alert('Je bent al in de A001');
			}
		} else {
          console.log('error with if statements');
        }
	});
});
body {
  margin: 0px;
  padding: 0px;
  font-family: Roboto;
}
      
.map-box {
  width: 600px;
  height: 300px;
  background: lightgrey;
  overflow: scroll;
}
.svg-container {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  overflow: scroll;
  background: lightgrey;
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 1px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}


/* Buildings */
#building {
  transition: 0.4s fill ease-in-out;
}
.building-a {
  height: 180px;
  width: 120px;
  fill: #455a64;
}
.building-a1 {
  height: 180px;
  width: 120px;
  fill: #1976D2;
}
.building-a2 {
  height: 180px;
  width: 120px;
  fill: #388E3C;
}
#a0 {
  opacity: 1;
}
#a1 {
  opacity: 0;
  transition: 0.4s opacity ease-in-out;
}
#a2 {
  opacity: 0;
  transition: 0.4s opacity ease-in-out;
}

/* Rooms */
#room {
  fill: #607d8b;
  transition: 0.4s fill ease-in-out;
}

/* Paths */
#generalpath {
  fill: white;
}
.path {
  transition: 0.3s opacity ease-in-out;
}
#a0path1, #a0path2, #a0path3, #a001pathty, #a002path, #a003path, #a004path, #a0stairpath {
  fill: #F44336;
  opacity: 0;
}

/* Form */
fieldset {
  border: none;
}
select {
  font-family: Roboto;
  background: white;
  color: black;
  padding: 5px;
  margin: 5px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}
button {
  margin-top: 12px;
}
#selectroomA {
  background: #40C4FF;
}
#selectroomB {
  background: #00E676;
}

/* Buttons */
.buttons {
  display: block;
}
.upButton, .downButton {
  font-family: Roboto;
  background: #EEE;
  color: black;
  transition: 0.4s all ease-in-out;
  border-radius: 2px;
  text-align: center;
  width: 30px;
  height: 30px;
  margin-top: 5px;
  margin-left: 5px;
  cursor: pointer;
  float: right;
}
.upButton, .downButton:hover {
  box-shadow: 2px 2px 6px #37474F;
  background-color: white;
}
#button i {
  margin-top: 4px;
  font-size: 22px;
}
.disabled {
  font-family: Roboto;
  background: #CCC;
  color: grey;
  transition: 0.4s all ease-in-out;
  border-radius: 2px;
  text-align: center;
  width: 30px;
  height: 30px;
  margin-top: 5px;
  margin-left: 5px;
  cursor: default;
  float: right;
}
/* Toolbar */
#toolbartop {
  width: 77%;
  padding-top: 10px;
  padding-left: 2%;
  padding-right: 1%;
  margin-left: 10%;
  margin-right: 7%;
  background-color: #607D8B;
  color: white;
}
.selection {
  display: block;
  padding-right: 10px;
  white-space: nowrap;
}
.selection select {
  vertical-align: middle;
  margin-left: 10px;
}
#A {
  float: left;
}
#B {
  float: left;
}
#submit {
  width: 77%;
  height: 30px;
  padding-top: 10px;
  padding-left: 2%;
  padding-right: 1%;
  margin-left: 10%;
  margin-right: 7%;
  background-color: #455A64;
  color: white;
  text-align: center;
  cursor: pointer;
  transition: 0.4s background-color ease-in-out;
}
#submit:hover {
  background-color: #546E7A;
}
<html>
  <head>
   <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
    <script src="code.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
    <div id="toolbartop">
      <form method="post">
        <div class="selection">
          <fieldset class="ui-field-contain">
            <div id="A">
              <select name="selectroomA" id="selectroomA">
                <option value="null">Selecteer startpunt</option>
                <optgroup label="A-gebouw">
                  <option value="a001">A001</option>
                  <option value="a002">A002</option>
                  <option value="a003">A003</option>
                  <option value="a004">A004</option>
                  <option value="a005">A005</option>
                </optgroup>
              </select>
            </div>
            <div id="B">
            <select name="selectroomB" id="selectroomB">
              <option value="null">Selecteer bestemming</option>
              <optgroup label="A-gebouw">
                <option value="a001">A001</option>
                <option value="a002">A002</option>
                <option value="a003">A003</option>
                <option value="a004">A004</option>
                <option value="a005">A005</option>
              </optgroup>
            </select>
            </div>
          </fieldset>
        </div>
      </form>
      <div class="buttons">
        <div id="button" class="upButton" onselectstart="return false"><i class="material-icons">arrow_upward</i></div>
        <div id="button" class="downButton" onselectstart="return false"><i class="material-icons">arrow_downward</i></div>
      </div>
    </div>
    <div id="submit" onselectstart="return false">Maak route</div>
    
    <div class="svg-container">
    <svg class="map-box" xmlns="http://www.w3.org/2000/svg">
      <g id="a0">
        <!-- Staircase -->
        <g class="staircase">
          <rect x='160px' y='16px' height='35px' width='26px' id="building" fill="#455a64" />
          <rect x='175px' y='40px' height='10px' width='11px' fill="#2196f3"/>
          
          <rect x='175px' y='39px' height='4px' width='11px' fill="#2196f3"/>
          <rect x='175px' y='33px' height='4px' width='11px' fill="#2994E7"/>
          <rect x='175px' y='27px' height='4px' width='11px' fill="#368DCF"/>
          <rect x='160px' y='16px' height='9px' width='26px' fill="#3E8AC2"/>
          <rect x='160px' y='27px' height='4px' width='11px' fill="#4B85AE"/>
          <rect x='160px' y='33px' height='4px' width='11px' fill="#5A7F95"/>
          <rect x='160px' y='39px' height='4px' width='11px' fill="#607D8B"/>
        </g>
         
        <!-- Building -->
        <rect x='130px' y='50px' class="building-a" id="building"/>
        <rect x='330px' y='50px' class="building-a" id="building"/>
        
        <!-- Rooms -->
        <rect x='213px' y='200px' width="35px" height="30px" id="room" class="a001"/>
        
        <rect x='130px' y='110px' width="30px" height="57px" id="room" class="a002"/>
        
        <rect x='130px' y='50px' width="30px" height="57px" id="room" class="a003"/>
        
        <rect x='130px' y='170px' width="30px" height="50px" id="room" class="a004"/>
        <rect x='130px' y='200px' width="80px" height="30px" id="room" class="a004"/>
        
        <rect x='185px' y='50px' width="25px" height="40px" id="room" class="a007"/>
        
        <!-- General Path -->
        <rect x='164px' y='179px' width="85px" height="17px" id="generalpath"/>
        <rect x='164px' y='50px' width="17px" height="137px" id="generalpath"/>
        
        <!-- Specific paths -->
        <rect x='169px' y='185px' width="65px" height="7px" id="a0path1" class="path"/>
        <rect x='169px' y='135px' width="7px" height="50px" id="a0path2" class="path"/>
        <rect x='169px' y='75px' width="7px" height="60px" id="a0path3" class="path"/>
        
        <rect x='228px' y='185px' width="7px" height="15px" id="a001path" class="path"/>
        <rect x='160px' y='135px' width="15px" height="7px" id="a002path" class="path"/>
        <rect x='160px' y='75px' width="15px" height="7px" id="a003path" class="path"/>
        <rect x='160px' y='185px' width="15px" height="7px" id="a004path" class="path"/>
          
        <rect x='169px' y='50px' width="7px" height="60px" id="a0stairpath" class="path"/>
        <rect x='163px' y='18px' width="5" height="32px" id="a0stairpath" class="path"/>
        <rect x='163px' y='18px' width="16" height="5px" id="a0stairpath" class="path"/>
        <rect x='178px' y='18px' width="5" height="32px" id="a0stairpath" class="path"/>
      </g>
      
      <g id="a1">
        <!-- Staircase -->
        <rect x='160px' y='16px' height='35px' width='11px' id="building" fill="#1976D2"/>
        <rect x='160px' y='16px' height='10px' width='26px' id="building" fill="#1976D2"/>
        <rect x='175px' y='16px' height='35px' width='11px' id="building" fill="#1976D2"/>
        <rect x='175px' y='40px' height='10px' width='11px' fill="#4CAF50"/>
        
        <rect x='175px' y='39px' height='4px' width='11px' fill="#4CAF50"/>
        <rect x='175px' y='33px' height='4px' width='11px' fill="#41A977"/>
        <rect x='175px' y='27px' height='4px' width='11px' fill="#3DA788"/>
        <rect x='160px' y='16px' height='9px' width='26px' fill="#36A2A5"/>
        <rect x='160px' y='27px' height='4px' width='11px' fill="#2E9EBE"/>
        <rect x='160px' y='33px' height='4px' width='11px' fill="#279AD9"/>
        <rect x='160px' y='39px' height='4px' width='11px' fill="#2196F3"/>
        
        <!-- Building -->
        <rect x='130px' y='50px' class="building-a1" id="building"/>
        
      </g>
      
      <g id="a2">
        <rect x='130px' y='50px' class="building-a2" id="building"/>
      </g>
    </svg>
    </div>
  </body>
</html>

有谁知道我做错了什么？如果是这样，请提前感谢。

3 个答案:

答案 0 :(得分：0)

＆＃13;
＆＃13; 
name
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

将.value更改为.val()。

请参阅http://api.jquery.com/val/

答案 2 :(得分：0)

在使用jquery时将.value更改为.val() 

$(document).ready(function() {
  $('#selectroomA').change(function() {
  	Aval = $('#selectroomA').val();
  });

	$('#selectroomB').change(function() {
		Bval = $('#selectroomB').val();
	});
	
	$('#submit').click(function() {
    console.log('clicked',Aval);
		if (Aval === "a001" && Bval === "a001"){
      console.log('Je bent al in de A001');
		}else{
      console.log('error with if statements');
    }
	});
});
body {
  margin: 0px;
  padding: 0px;
  font-family: Roboto;
}
      
.map-box {
  width: 600px;
  height: 300px;
  background: lightgrey;
  overflow: scroll;
}
.svg-container {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  overflow: scroll;
  background: lightgrey;
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 1px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}


/* Buildings */
#building {
  transition: 0.4s fill ease-in-out;
}
.building-a {
  height: 180px;
  width: 120px;
  fill: #455a64;
}
.building-a1 {
  height: 180px;
  width: 120px;
  fill: #1976D2;
}
.building-a2 {
  height: 180px;
  width: 120px;
  fill: #388E3C;
}
#a0 {
  opacity: 1;
}
#a1 {
  opacity: 0;
  transition: 0.4s opacity ease-in-out;
}
#a2 {
  opacity: 0;
  transition: 0.4s opacity ease-in-out;
}

/* Rooms */
#room {
  fill: #607d8b;
  transition: 0.4s fill ease-in-out;
}

/* Paths */
#generalpath {
  fill: white;
}
.path {
  transition: 0.3s opacity ease-in-out;
}
#a0path1, #a0path2, #a0path3, #a001pathty, #a002path, #a003path, #a004path, #a0stairpath {
  fill: #F44336;
  opacity: 0;
}

/* Form */
fieldset {
  border: none;
}
select {
  font-family: Roboto;
  background: white;
  color: black;
  padding: 5px;
  margin: 5px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}
button {
  margin-top: 12px;
}
#selectroomA {
  background: #40C4FF;
}
#selectroomB {
  background: #00E676;
}

/* Buttons */
.buttons {
  display: block;
}
.upButton, .downButton {
  font-family: Roboto;
  background: #EEE;
  color: black;
  transition: 0.4s all ease-in-out;
  border-radius: 2px;
  text-align: center;
  width: 30px;
  height: 30px;
  margin-top: 5px;
  margin-left: 5px;
  cursor: pointer;
  float: right;
}
.upButton, .downButton:hover {
  box-shadow: 2px 2px 6px #37474F;
  background-color: white;
}
#button i {
  margin-top: 4px;
  font-size: 22px;
}
.disabled {
  font-family: Roboto;
  background: #CCC;
  color: grey;
  transition: 0.4s all ease-in-out;
  border-radius: 2px;
  text-align: center;
  width: 30px;
  height: 30px;
  margin-top: 5px;
  margin-left: 5px;
  cursor: default;
  float: right;
}
/* Toolbar */
#toolbartop {
  width: 77%;
  padding-top: 10px;
  padding-left: 2%;
  padding-right: 1%;
  margin-left: 10%;
  margin-right: 7%;
  background-color: #607D8B;
  color: white;
}
.selection {
  display: block;
  padding-right: 10px;
  white-space: nowrap;
}
.selection select {
  vertical-align: middle;
  margin-left: 10px;
}
#A {
  float: left;
}
#B {
  float: left;
}
#submit {
  width: 77%;
  height: 30px;
  padding-top: 10px;
  padding-left: 2%;
  padding-right: 1%;
  margin-left: 10%;
  margin-right: 7%;
  background-color: #455A64;
  color: white;
  text-align: center;
  cursor: pointer;
  transition: 0.4s background-color ease-in-out;
}
#submit:hover {
  background-color: #546E7A;
}
<html>
  <head>
   <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
    <script src="code.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
    <div id="toolbartop">
      <form method="post">
        <div class="selection">
          <fieldset class="ui-field-contain">
            <div id="A">
              <select name="selectroomA" id="selectroomA">
                <option value="null">Selecteer startpunt</option>
                <optgroup label="A-gebouw">
                  <option value="a001">A001</option>
                  <option value="a002">A002</option>
                  <option value="a003">A003</option>
                  <option value="a004">A004</option>
                  <option value="a005">A005</option>
                </optgroup>
              </select>
            </div>
            <div id="B">
            <select name="selectroomB" id="selectroomB">
              <option value="null">Selecteer bestemming</option>
              <optgroup label="A-gebouw">
                <option value="a001">A001</option>
                <option value="a002">A002</option>
                <option value="a003">A003</option>
                <option value="a004">A004</option>
                <option value="a005">A005</option>
              </optgroup>
            </select>
            </div>
          </fieldset>
        </div>
      </form>
      <div class="buttons">
        <div id="button" class="upButton" onselectstart="return false"><i class="material-icons">arrow_upward</i></div>
        <div id="button" class="downButton" onselectstart="return false"><i class="material-icons">arrow_downward</i></div>
      </div>
    </div>
    <div id="submit" onselectstart="return false">Maak route</div>
    
    <div class="svg-container">
    <svg class="map-box" xmlns="http://www.w3.org/2000/svg">
      <g id="a0">
        <!-- Staircase -->
        <g class="staircase">
          <rect x='160px' y='16px' height='35px' width='26px' id="building" fill="#455a64" />
          <rect x='175px' y='40px' height='10px' width='11px' fill="#2196f3"/>
          
          <rect x='175px' y='39px' height='4px' width='11px' fill="#2196f3"/>
          <rect x='175px' y='33px' height='4px' width='11px' fill="#2994E7"/>
          <rect x='175px' y='27px' height='4px' width='11px' fill="#368DCF"/>
          <rect x='160px' y='16px' height='9px' width='26px' fill="#3E8AC2"/>
          <rect x='160px' y='27px' height='4px' width='11px' fill="#4B85AE"/>
          <rect x='160px' y='33px' height='4px' width='11px' fill="#5A7F95"/>
          <rect x='160px' y='39px' height='4px' width='11px' fill="#607D8B"/>
        </g>
         
        <!-- Building -->
        <rect x='130px' y='50px' class="building-a" id="building"/>
        <rect x='330px' y='50px' class="building-a" id="building"/>
        
        <!-- Rooms -->
        <rect x='213px' y='200px' width="35px" height="30px" id="room" class="a001"/>
        
        <rect x='130px' y='110px' width="30px" height="57px" id="room" class="a002"/>
        
        <rect x='130px' y='50px' width="30px" height="57px" id="room" class="a003"/>
        
        <rect x='130px' y='170px' width="30px" height="50px" id="room" class="a004"/>
        <rect x='130px' y='200px' width="80px" height="30px" id="room" class="a004"/>
        
        <rect x='185px' y='50px' width="25px" height="40px" id="room" class="a007"/>
        
        <!-- General Path -->
        <rect x='164px' y='179px' width="85px" height="17px" id="generalpath"/>
        <rect x='164px' y='50px' width="17px" height="137px" id="generalpath"/>
        
        <!-- Specific paths -->
        <rect x='169px' y='185px' width="65px" height="7px" id="a0path1" class="path"/>
        <rect x='169px' y='135px' width="7px" height="50px" id="a0path2" class="path"/>
        <rect x='169px' y='75px' width="7px" height="60px" id="a0path3" class="path"/>
        
        <rect x='228px' y='185px' width="7px" height="15px" id="a001path" class="path"/>
        <rect x='160px' y='135px' width="15px" height="7px" id="a002path" class="path"/>
        <rect x='160px' y='75px' width="15px" height="7px" id="a003path" class="path"/>
        <rect x='160px' y='185px' width="15px" height="7px" id="a004path" class="path"/>
          
        <rect x='169px' y='50px' width="7px" height="60px" id="a0stairpath" class="path"/>
        <rect x='163px' y='18px' width="5" height="32px" id="a0stairpath" class="path"/>
        <rect x='163px' y='18px' width="16" height="5px" id="a0stairpath" class="path"/>
        <rect x='178px' y='18px' width="5" height="32px" id="a0stairpath" class="path"/>
      </g>
      
      <g id="a1">
        <!-- Staircase -->
        <rect x='160px' y='16px' height='35px' width='11px' id="building" fill="#1976D2"/>
        <rect x='160px' y='16px' height='10px' width='26px' id="building" fill="#1976D2"/>
        <rect x='175px' y='16px' height='35px' width='11px' id="building" fill="#1976D2"/>
        <rect x='175px' y='40px' height='10px' width='11px' fill="#4CAF50"/>
        
        <rect x='175px' y='39px' height='4px' width='11px' fill="#4CAF50"/>
        <rect x='175px' y='33px' height='4px' width='11px' fill="#41A977"/>
        <rect x='175px' y='27px' height='4px' width='11px' fill="#3DA788"/>
        <rect x='160px' y='16px' height='9px' width='26px' fill="#36A2A5"/>
        <rect x='160px' y='27px' height='4px' width='11px' fill="#2E9EBE"/>
        <rect x='160px' y='33px' height='4px' width='11px' fill="#279AD9"/>
        <rect x='160px' y='39px' height='4px' width='11px' fill="#2196F3"/>
        
        <!-- Building -->
        <rect x='130px' y='50px' class="building-a1" id="building"/>
        
      </g>
      
      <g id="a2">
        <rect x='130px' y='50px' class="building-a2" id="building"/>
      </g>
    </svg>
    </div>
  </body>
</html>

相关问题
最新问题