无法一起计算选择保管箱选项

时间:2014-12-24 21:14:36

标签: javascript html css

我正在尝试构建一个简单的网站,将选择下拉框中的三个数字相乘。但是,当我尝试计算时,我的代码只显示数字1。我已经搜索了几个小时的答案,并且无法提出任何有效的更改。提前谢谢。

<!doctype html>

<html lang="en">
<head> 
<title>
Test Project
</title>
<link rel="stylesheet" href="main.css" />

</head>
<meta charset="utf-8" /> </meta>
<body>

<div id="div_1" align="center"

    <header id="top_header">
        <h1>Test Project</h1> 
    </header>


</div>

<div align="center">








<select id="Section1">
    <option value="1"> 1</option>
    <option value="2"> 2</option>
    <option value="3"> 3</option>
    <option value="4"> 4</option>
    <option value="5"> 5</option>
    <option value="6"> 6</option>
    <option value="7"> 7</option>
    <option value="8"> 8</option>
    <option value="9"> 9</option>
    <option value="10"> 10</option>
    </select>




<select id="Section2">
    <option value="1"> 1</option>
    <option value="2"> 2</option>
    <option value="3"> 3</option>
    <option value="4"> 4</option>
    <option value="5"> 5</option>
    <option value="6"> 6</option>
    <option value="7"> 7</option>
    <option value="8"> 8</option>
    <option value="9"> 9</option>
    <option value="10"> 10</option>
    </select>

<select id="Section3">
    <option value="1"> 1</option>
    <option value="2"> 2</option>
    <option value="3"> 3</option>
    <option value="4"> 4</option>
    <option value="5"> 5</option>
    <option value="6"> 6</option>
    <option value="7"> 7</option>
    <option value="8"> 8</option>
    <option value="9"> 9</option>
    <option value="10"> 10</option>
    </select>

    <script>
function myFunction() {
var x = document.getElementById("Section1").selectedIndex;
var y = document.getElementById("Section2").selectedIndex;
var z = document.getElementById("Section3").selectedIndex;
   alert(document.getElementsByTagName("Option")[x * y * z].value);
 }
</script>

<button onclick="myFunction()">Calculate</button>





</body>
</html>

2 个答案:

答案 0 :(得分:3)

这个表达式[x * y * z].value毫无意义。试试这个:

function myFunction() {
    var x = document.getElementById("Section1").value;
    var y = document.getElementById("Section2").value;
    var z = document.getElementById("Section3").value;
    alert(x * y * z);
}

您还可以使用selectedIndex语法:

var section1 = document.getElementById("Section1");
var x = section1.options[section1.selectedIndex].value;
// and so on..

但这显然不太方便。

答案 1 :(得分:2)

此片段alert(document.getElementsByTagName("Option")[x * y * z]);将从该网站上的所有选项元素的集合中获取具有x y z索引的网站的选项元素。

这是你想要的?或者你想要乘以x * y * z:

alert(x * y * z)

以下是针对您的案例http://jsfiddle.net/k475jso9/

的工作jsfiddle