Question

我在这里撞墙挡住我的头。下面，您将找到我正在使用的代码，我正在尝试使用下拉列表设置变量。我已经尝试了所有我能想到的东西，我知道这很简单。但是，我错过了一些东西。向正确的方向轻推将是值得赞赏的。我在前两个变量上一直收到“null”的警报，但第三个变量正常。

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title>Homework 4 - Taxi Fare Calculator</title>
    <script src="scripts.js"></script>
  </head>
  <body bgcolor="#f0ffff">
    <h2>Taxi Fare Calculator by Christopher Lewis</h2>
    This calculator will look at a starting zone, ending zone, and total time of a drive.
    In the end, it calculates the fare.
    <h3>Please Choose Starting Zone:</h3>
    <select name="start">
      <option value ="1">Zone 1</option>
      <option value ="2">Zone 2</option>
      <option value ="3">Zone 3</option>
    </select>
    <h3>Please Choose Destination Zone:</h3>
    <select name="ending">
      <option value = "1">Zone 1</option>
      <option value = "2">Zone 2</option>
      <option value = "3">Zone 3</option>
    </select>
    <h3>Please enter total time of ride:</h3>
    <input type="text" id="totalTime" size="5">
    <p>
      <input type="button" id="button" value="Fare total" onclick="calculate()"
  </body>
</html>   

function calculate(){
  var startZone = document.getElementById("start");
  var endingZone = document.getElementById("ending");
  var time = parseFloat(document.getElementById("totalTime").value);
  alert(startZone);
  alert(endingZone);
  alert(time);
}

Answer 1

'startZone'和'endingZone'返回'null'的原因是因为您正在查询ID为start和ending的DOM元素。页面上没有包含此类ID的元素，因此document.getElementById会返回null。

我编辑了你的代码。我在<select>元素

中添加了ID属性

<select name="start" id="start">
 <option value ="1">Zone 1</option>
 <option value ="2">Zone 2</option>
 <option value ="3">Zone 3</option>
</select>


<select name="ending" id="ending">
 <option value = "1">Zone 1</option>
 <option value = "2">Zone 2</option>
 <option value = "3">Zone 3</option>
</select>

Answer 2

您的选择设置为name而非id设置，因此您无法使用getElementById找到它们。

Answer 3

您仍然可以从＆＃34;选择＆＃34;获得返回值。我做了一个简单的JavaScript示例：

但是您尝试按ID选择元素，这是您在name属性中的错误，在我的示例中，我留在了name属性中，但添加了id属性通过JavaScript

按Id选择元素

HTML

<select name="start" id="zone">
    <option value ="1">Zone 1</option>
    <option value ="2">Zone 2</option>
    <option value ="3">Zone 3</option>
</select>
<br>The selected value is: <span id='return'>none</span>

的JavaScript

document.getElementById("zone").onchange=function(){
  document.getElementById("return").innerHTML=document.getElementById("zone").value;
}

这是JSFiddle example

Answer 4

首先，您没有为select元素设置id。其次，您还需要使用javascript获取选择框的选定值：

document.getElementById('select-id').options[document.getElementById('select-id').selectedIndex].text;

这是正确的代码：

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title>Homework 4 - Taxi Fare Calculator</title>
    <script src="scripts.js"></script>
  </head>

<body bgcolor="#f0ffff">

<h2>Taxi Fare Calculator by Christopher Lewis</h2>
This calculator will look at a starting zone, ending zone, and total time of a drive.
In the end, it calculates the fare.
<h3>Please Choose Starting Zone:</h3>
<select id="start" name="start">
    <option value ="1">Zone 1</option>
    <option value ="2">Zone 2</option>
    <option value ="3">Zone 3</option>
</select>
<h3>Please Choose Destination Zone:</h3>
<select id="ending"  name="ending">
    <option value = "1">Zone 1</option>
    <option value = "2">Zone 2</option>
    <option value = "3">Zone 3</option>
</select>
<h3>Please enter total time of ride:</h3>
    <input type="text" id="totalTime" size="5">

<input type="button" id="button" value="Fare total" onclick="calculate()" />

</body></html>

的Javascript

function calculate(){
    var startZone = document.getElementById('start').options[document.getElementById('start').selectedIndex].text;
    var endingZone = document.getElementById('ending').options[document.getElementById('ending').selectedIndex].text;
    var time = parseFloat(document.getElementById("totalTime").value);
    alert(startZone);
    alert(endingZone);
    alert(time);
}

演示：http://jsfiddle.net/zUa7S/1/

Answer 5

如果你想按名称查询元素，那么这可能有效：

var startZone = document.getElementsByName("start")[0].value;
var endingZone = document.getElementsByName("ending")[0].value;

因为getElementsByName返回集合，而getElementById返回一个对象。

从下拉列表中获取变量

5 个答案: