Javascript 无法同时计算select dropbox选项_Javascript_Html_Css

Javascript 无法同时计算select dropbox选项

javascript html css

Javascript 无法同时计算select dropbox选项,javascript,html,css,Javascript,Html,Css,我试图建立一个简单的网站，将三个数字从选择下拉框相乘在一起。但是，当我尝试计算时，我的代码仅显示数字1。我已经搜索了几个小时的答案，但始终无法找到任何有效的更改。提前谢谢 <!doctype html> <html lang="en"> <head> <title> Test Project </title> <link rel="stylesheet" href="main.css" /> </head>

我试图建立一个简单的网站，将三个数字从选择下拉框相乘在一起。但是，当我尝试计算时，我的代码仅显示数字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>


测试项目
这个表达式[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..

但是这显然不太方便。
这个片段警报（document.getElementsByTagName（“Option”）[x*y*z]）将从此站点上所有选项元素的集合中获取具有xyz索引的站点中的选项元素
这就是你想要的？或者只需乘以x*y*z：
警报（x*y*z）

这里有一个适用于您的案例的JSFIDEL，这就是我要说的。我一直想知道他到底在干什么。这正是我需要的信息。很抱歉，我没有更多的代表投票，谢谢你的回复。jsfiddle链接帮了大忙。：）